From 64c4f1ed918e93e7599effc615b7b23b41887199 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Wed, 13 Dec 2023 18:19:58 -0500
Subject: [PATCH 01/28] DIG-3665: UI/UX Update Registry Marriage Intention Form
 - Navigation

---
 .../src/__snapshots__/Storyshots.test.ts.snap | 1634 ++++++++++++++++-
 .../src/components/ProgressNav.stories.tsx    |  140 ++
 .../src/components/ProgressNav.tsx            |  234 +++
 modules-js/react-fleet/src/react-fleet.ts     |    1 +
 .../react-fleet/src/utilities/constants.ts    |    1 +
 .../react-fleet/src/utilities/interfaces.ts   |   13 +
 modules-js/storybook-common/src/wrappers.tsx  |    3 +-
 .../registry-certs/client/PageWrapper.tsx     |   17 +-
 .../__snapshots__/Storyshots.test.ts.snap     |   34 +-
 .../common/checkout/CheckoutPageLayout.tsx    |    5 +-
 .../client/common/checkout/PaymentContent.tsx |    6 +-
 .../client/common/checkout/ReviewContent.tsx  |    6 +-
 .../common/checkout/ShippingContent.tsx       |    6 +-
 .../marriageintention/forms/partnerForm.tsx   | 1113 +++++++++++
 .../marriageintention/forms/partnerFormA.tsx  |   97 +-
 .../marriageintention/forms/partnerFormUI.tsx |  164 ++
 .../client/marriageintention/index.tsx        |   93 +-
 .../MarriageIntentionCertificateRequest.ts    |   47 +-
 services-js/registry-certs/client/types.ts    |    8 +
 services-js/registry-certs/lib/interfaces.ts  |   18 +
 20 files changed, 3436 insertions(+), 204 deletions(-)
 create mode 100644 modules-js/react-fleet/src/components/ProgressNav.stories.tsx
 create mode 100644 modules-js/react-fleet/src/components/ProgressNav.tsx
 create mode 100644 modules-js/react-fleet/src/utilities/interfaces.ts
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
 create mode 100644 services-js/registry-certs/lib/interfaces.ts

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 6cc298a2c..194fa6b66 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -1620,7 +1620,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
           id="future-year"
           max="9999"
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -1770,7 +1770,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max="9999"
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -1920,7 +1920,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max={2040}
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -2070,7 +2070,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           id="story-year"
           max={2040}
           maxLength={4}
-          min={2023}
+          min={2024}
           name="year"
           onBlur={[Function]}
           onChange={[Function]}
@@ -2218,7 +2218,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
         <input
           className="txt-f"
           id="past-year"
-          max={2023}
+          max={2024}
           maxLength={4}
           min="1000"
           name="year"
@@ -2368,7 +2368,7 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
         <input
           className="txt-f"
           id="initial-year"
-          max={2023}
+          max={2024}
           maxLength={4}
           min="1000"
           name="year"
@@ -4659,6 +4659,1628 @@ exports[`Storyshots ProgressBar with task name 1`] = `
 </div>
 `;
 
+exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 1 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Getting Started
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 2 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Person 1
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 3 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Person 2
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed focused "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed  current"
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 3 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Person 2
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 4 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Contact Info
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots ProgressNav Step 5: Review 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 5 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Review
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="completed focused current done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 6 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Submit
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots UI|Footer custom attributes 1`] = `
 <footer
   className="ft br br-a300"
diff --git a/modules-js/react-fleet/src/components/ProgressNav.stories.tsx b/modules-js/react-fleet/src/components/ProgressNav.stories.tsx
new file mode 100644
index 000000000..c573afde7
--- /dev/null
+++ b/modules-js/react-fleet/src/components/ProgressNav.stories.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { withKnobs, button } from '@storybook/addon-knobs';
+
+import { NarrowWrapper } from '@cityofboston/storybook-common';
+import ProgressNav from './ProgressNav';
+
+interface Props {
+  steps: Array<string>;
+  totalSteps: number;
+  currentStep: number;
+  showStepName?: boolean;
+  offset?: number;
+  completed?: Array<number>;
+  clickHandler?: any;
+  blockStepBackAfterLastNav?: boolean;
+}
+
+interface State {
+  completed: boolean;
+}
+
+const taskList: Array<string> = [
+  'Getting Started',
+  'Person 1',
+  'Person 2',
+  'Contact Info',
+  'Review',
+  'Submit',
+];
+const clickHandler = (key: number = 0): void => {
+  console.log(`Step Click: #${key}`);
+};
+
+class InteractiveStep extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      completed: false,
+    };
+  }
+
+  render() {
+    const label = 'Marriage Intention Application';
+    const handler = () => this.setState({ completed: true });
+
+    button(label, handler);
+
+    return <ProgressNav {...this.props} />;
+  }
+}
+
+storiesOf('ProgressNav', module)
+  .addDecorator(story => <NarrowWrapper>{story()}</NarrowWrapper>)
+  .addDecorator(withKnobs)
+  .add('Step 1: Getting Started (default)', () => (
+    <ProgressNav
+      steps={taskList}
+      totalSteps={taskList.length}
+      currentStep={0}
+      showStepName={true}
+      offset={0}
+      completed={[0]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 2: Person 1', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={1}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 3: Person 2', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={2}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 4: Contact Info', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={3}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 4: Contact Info - Nav one step back', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={2}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 5: Review', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={4}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3, 4]}
+      clickHandler={clickHandler}
+    />
+  ))
+  .add('Step 6: Submit', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={5}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3, 4, 5]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ));
diff --git a/modules-js/react-fleet/src/components/ProgressNav.tsx b/modules-js/react-fleet/src/components/ProgressNav.tsx
new file mode 100644
index 000000000..77f91bc68
--- /dev/null
+++ b/modules-js/react-fleet/src/components/ProgressNav.tsx
@@ -0,0 +1,234 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useState } from 'react';
+
+import {
+  BLACK,
+  WHITE,
+  OPTIMISTIC_BLUE_DARK,
+  GRAY_200,
+} from '../utilities/constants';
+
+interface Props {
+  steps: Array<string>;
+  totalSteps?: number;
+  currentStep: number;
+  currentStepCompleted?: boolean;
+  showStepName?: boolean;
+  offset?: number;
+  completed?: Array<number>;
+  clickHandler?: any;
+  lastCompletedStepIndex?: number;
+  blockStepBackAfterLastNav?: boolean;
+  disableOnEnd?: boolean;
+}
+
+export default function ProgressNav(props: Props): JSX.Element {
+  const {
+    steps,
+    currentStep,
+    showStepName,
+    offset,
+    completed,
+    clickHandler,
+    blockStepBackAfterLastNav,
+    disableOnEnd,
+    totalSteps,
+  } = props;
+  const [focused, setFocus] = useState<number>(currentStep);
+  const stepElem = (step: string, key: number, index: any) => {
+    const completedCss =
+      index && index.indexOf(key) > -1 ? `completed` : `uncompleted`;
+    const focusedCss = currentStep === key ? ` focused` : ` `;
+    const formDone = completed && completed.length === totalSteps;
+    const doneCss = formDone ? ` done` : ``;
+    const disableCss =
+      disableOnEnd && disableOnEnd === true ? ` disabled` : ` `;
+    const currentCss = key === index[index.length - 1] ? `current` : ``;
+    const set_Focus =
+      index && index.indexOf(key) > -1 && !formDone
+        ? () => setFocus(key)
+        : () => {};
+    const evalCurrStep = steps.length - 1;
+    const blockStepBack =
+      typeof blockStepBackAfterLastNav === 'undefined' ||
+      (blockStepBackAfterLastNav && blockStepBackAfterLastNav === true);
+    const on_Click =
+      index &&
+      index.indexOf(key) > -1 &&
+      currentStep < evalCurrStep &&
+      blockStepBack
+        ? () => clickHandler(key)
+        : e => e.preventDefault();
+    let linkParam = {
+      key: key,
+      title: `${step}`,
+      onClick: on_Click,
+      'aria-label': `${step}`,
+      className: `${completedCss}${focusedCss}${disableCss}${currentCss}${doneCss}`,
+    };
+    if (formDone) {
+      linkParam['onTouchMove'] = set_Focus;
+      linkParam['onMouseEnter'] = set_Focus;
+    }
+    const $link = (
+      <a {...Object.assign({}, linkParam)}>
+        {step}
+        <span className="arrow" />
+      </a>
+    );
+    return $link;
+  };
+
+  const currStepCount =
+    offset && typeof offset === 'number' ? currentStep + offset : currentStep;
+  const progressText = () => {
+    return <span>{`Step ${currStepCount + 1} of ${steps.length}`}</span>;
+  };
+
+  const mobileText = () => {
+    const showStepNameCss =
+      showStepName && showStepName === true ? `` : `mobile`;
+    return (
+      <span className={`${showStepNameCss}`}>
+        {`: `} {steps[focused]}
+      </span>
+    );
+  };
+
+  return (
+    <div css={PROGRESSBAR_STYLE}>
+      <div className="progressbar">
+        <div className="nav">
+          {steps &&
+            steps.map((step, index) => stepElem(step, index, completed))}
+        </div>
+        <div className="progress-text">
+          {progressText()}
+          {mobileText()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const BORDER_WIDTH = '1px';
+const PROGRESSBAR_STYLE = css`
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  // max-width: 46rem;
+
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+
+  .progressbar {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .nav {
+      display: table;
+      flex-flow: row wrap;
+      align-items: center;
+      text-align: center;
+      line-height: normal;
+      font-style: normal;
+      font-family: Lora, serif;
+      color: ${BLACK};
+      // background: green;
+
+      a {
+        display: table-cell;
+        border-width: ${BORDER_WIDTH};
+        border-color: black;
+        border-style: solid;
+        border-left-width: 0;
+        padding: 0.85em 0em;
+        min-width: 80px;
+        color: black;
+        background: ${WHITE};
+
+        min-width: 120px;
+        font-size: 0.85em;
+
+        &:last-child {
+          grid-column-start: 2;
+        }
+
+        &:first-child {
+          border-left-width: ${BORDER_WIDTH};
+        }
+
+        &.completed,
+        &.completed:hover,
+        &.current,
+        &.focused {
+          color: white;
+          cursor: pointer;
+          background: ${OPTIMISTIC_BLUE_DARK};
+        }
+
+        &.focused,
+        &.completed:hover {
+          box-shadow: inset 0 0 0px 1px #fff;
+        }
+
+        &.current,
+        &.completed .current,
+        &.completed .focused .current {
+          color: ${BLACK};
+          background: ${WHITE};
+        }
+
+        &.uncompleted,
+        &.done,
+        &.done:hover {
+          color: ${BLACK};
+          background: ${GRAY_200};
+        }
+
+        &.done,
+        &.done:hover {
+          cursor: default;
+        }
+      }
+    }
+
+    .progress-text {
+      justify-content: flex-end;
+      font-style: italic;
+      font-size: 1rem;
+      margin-top: 0.5rem;
+      // background-color: purple;
+
+      .mobile {
+        // background-color: red;
+        display: none;
+      }
+    }
+  }
+
+  @media screen and (max-width: 540px) {
+    max-width: 25.875em;
+
+    .progressbar {
+      .nav {
+        a {
+          overflow: hidden;
+          min-width: 10px;
+          padding: 0.5em 0;
+          text-indent: -500px;
+          line-height: 0;
+        }
+      }
+
+      .progress-text {
+        .mobile {
+          display: inline-block;
+        }
+      }
+    }
+  }
+`;
diff --git a/modules-js/react-fleet/src/react-fleet.ts b/modules-js/react-fleet/src/react-fleet.ts
index 6e1d0fd2d..8c1dee529 100644
--- a/modules-js/react-fleet/src/react-fleet.ts
+++ b/modules-js/react-fleet/src/react-fleet.ts
@@ -20,6 +20,7 @@ export {
 } from './form-elements/inputs/MemorableDateInput';
 export { default as Menu } from './components/Menu';
 export { default as ProgressBar } from './components/ProgressBar';
+export { default as ProgressNav } from './components/ProgressNav';
 export { default as Radio, RadioGroup } from './form-elements/inputs/Radio';
 export { default as SelectDropdown } from './form-elements/SelectDropdown';
 export { default as SectionHeader } from './sectioning-elements/SectionHeader';
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index ed9c1b1de..853461d35 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -39,6 +39,7 @@ export const SANS = 'Montserrat, Arial, sans-serif';
 export const SERIF = 'Lora, Georgia, serif';
 
 export const MEDIA_SMALL = '@media screen and (min-width: 480px)';
+export const MEDIA_SMALL_MAX = '@media screen and (max-width: 480px)';
 export const MEDIA_MEDIUM = '@media screen and (min-width: 768px)';
 export const MEDIA_MEDIUM_MAX = '@media screen and (max-width: 768px)';
 export const MEDIA_LARGE = '@media screen and (min-width: 840px)';
diff --git a/modules-js/react-fleet/src/utilities/interfaces.ts b/modules-js/react-fleet/src/utilities/interfaces.ts
new file mode 100644
index 000000000..e76d38c54
--- /dev/null
+++ b/modules-js/react-fleet/src/utilities/interfaces.ts
@@ -0,0 +1,13 @@
+export interface stepObj {
+  label: string;
+  name?: string;
+  uri?: string;
+  completed?: boolean;
+}
+
+export interface Progress {
+  totalSteps: number;
+  currentStep: number;
+  currentStepCompleted: boolean;
+  offset?: number | undefined;
+}
diff --git a/modules-js/storybook-common/src/wrappers.tsx b/modules-js/storybook-common/src/wrappers.tsx
index b89881759..725f42a49 100644
--- a/modules-js/storybook-common/src/wrappers.tsx
+++ b/modules-js/storybook-common/src/wrappers.tsx
@@ -13,6 +13,7 @@ export function NarrowWrapper(props: { children: Children }): JSX.Element {
 const CENTER_STYLING = { margin: '2rem auto' };
 
 const NARROW_STYLING = {
-  maxWidth: '600px',
+  // maxWidth: '600px',
+  maxWidth: '768px',
   ...CENTER_STYLING,
 };
diff --git a/services-js/registry-certs/client/PageWrapper.tsx b/services-js/registry-certs/client/PageWrapper.tsx
index 822f9ca0b..94609c0b0 100644
--- a/services-js/registry-certs/client/PageWrapper.tsx
+++ b/services-js/registry-certs/client/PageWrapper.tsx
@@ -6,8 +6,7 @@ import { Component, ReactNode } from 'react';
 
 import {
   ProgressBar,
-  // MEDIA_LARGE,
-  // MEDIA_SMALL,
+  ProgressNav,
   MEDIA_X_LARGE,
 } from '@cityofboston/react-fleet';
 
@@ -15,22 +14,18 @@ import PageLayout from './PageLayout';
 
 import { BREADCRUMB_NAV_LINKS } from '../lib/breadcrumbs';
 
-type CertificateRequestType = 'birth' | 'marriage' | 'intention';
+import { ProgressProps, ProgressNavProps } from '../lib/interfaces';
 
-export interface Progress {
-  totalSteps: number;
-  currentStep: number;
-  currentStepCompleted: boolean;
-  offset?: number | undefined;
-}
+type CertificateRequestType = 'birth' | 'marriage' | 'intention';
 
 interface Props {
   certificateType: CertificateRequestType;
-  progress?: Progress;
+  progress?: ProgressProps;
   footer?: ReactNode;
   classString?: string;
   mainHeadline?: string;
   offset?: number;
+  progressNav?: ProgressNavProps;
 }
 
 /**
@@ -48,6 +43,7 @@ export default class PageWrapper extends Component<Props> {
       classString,
       mainHeadline,
       offset,
+      progressNav,
     } = this.props;
     const sec2ndClassStr = footer ? 'b-c--nbp' : '';
     const classStr =
@@ -73,6 +69,7 @@ export default class PageWrapper extends Component<Props> {
           </h1>
 
           {progress && <ProgressBar {...modProgress} />}
+          {progressNav && <ProgressNav {...Object.assign({}, progressNav)} />}
 
           <section className="m-t500">{children}</section>
         </div>
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index ffee63e4f..54fafc864 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -10066,7 +10066,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
                 <input
                   className="txt-f"
                   id="dob-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -10568,7 +10568,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
                 <input
                   className="txt-f"
                   id="dob-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -14095,7 +14095,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 3. Personal information 1`] = `
                         <input
                           className="txt-f"
                           id="dob-year"
-                          max={2023}
+                          max={2024}
                           maxLength={4}
                           min={1870}
                           name="year"
@@ -39236,7 +39236,7 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
             <input
               className="year-field txt-f "
               id="date1year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39295,7 +39295,7 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
             <input
               className="year-field txt-f "
               id="date2year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39449,7 +39449,7 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
             <input
               className="year-field txt-f "
               id="date1year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39508,7 +39508,7 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
             <input
               className="year-field txt-f "
               id="date2year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39662,7 +39662,7 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
             <input
               className="year-field txt-f "
               id="date1year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39721,7 +39721,7 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
             <input
               className="year-field txt-f "
               id="date2year"
-              max={2023}
+              max={2024}
               min={1870}
               onBlur={[Function]}
               onChange={[Function]}
@@ -39825,7 +39825,7 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`]
           <input
             className="year-field txt-f "
             id="date1year"
-            max={2023}
+            max={2024}
             min={1870}
             onBlur={[Function]}
             onChange={[Function]}
@@ -39928,7 +39928,7 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent with values
           <input
             className="year-field txt-f "
             id="date2year"
-            max={2023}
+            max={2024}
             min={1870}
             onBlur={[Function]}
             onChange={[Function]}
@@ -67443,7 +67443,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
                 <input
                   className="year-field txt-f "
                   id="date1year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -67502,7 +67502,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
                 <input
                   className="year-field txt-f "
                   id="date2year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -68421,7 +68421,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
                 <input
                   className="txt-f"
                   id="dateOfMarriageStart-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -68959,7 +68959,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
                 <input
                   className="txt-f"
                   id="dateOfMarriageStart-year"
-                  max={2023}
+                  max={2024}
                   maxLength={4}
                   min={1870}
                   name="year"
@@ -69512,7 +69512,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
                 <input
                   className="year-field txt-f "
                   id="date1year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -69571,7 +69571,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
                 <input
                   className="year-field txt-f "
                   id="date2year"
-                  max={2023}
+                  max={2024}
                   min={1870}
                   onBlur={[Function]}
                   onChange={[Function]}
diff --git a/services-js/registry-certs/client/common/checkout/CheckoutPageLayout.tsx b/services-js/registry-certs/client/common/checkout/CheckoutPageLayout.tsx
index c0b3a6f48..1e6419f1d 100644
--- a/services-js/registry-certs/client/common/checkout/CheckoutPageLayout.tsx
+++ b/services-js/registry-certs/client/common/checkout/CheckoutPageLayout.tsx
@@ -12,7 +12,8 @@ import { CertificateType } from '../../types';
 import { BREADCRUMB_NAV_LINKS } from '../../../lib/breadcrumbs';
 
 import PageLayout from '../../PageLayout';
-import PageWrapper, { Progress } from '../../PageWrapper';
+import PageWrapper from '../../PageWrapper';
+import { ProgressProps } from '../../../lib/interfaces';
 
 import { SECTION_HEADING_STYLING } from '../question-components/styling';
 
@@ -21,7 +22,7 @@ type Props = {
   title?: string;
   children?: ReactNode;
   footer?: ReactNode;
-  progress?: Progress;
+  progress?: ProgressProps;
 };
 
 /**
diff --git a/services-js/registry-certs/client/common/checkout/PaymentContent.tsx b/services-js/registry-certs/client/common/checkout/PaymentContent.tsx
index 05a2b1836..4b9362f65 100644
--- a/services-js/registry-certs/client/common/checkout/PaymentContent.tsx
+++ b/services-js/registry-certs/client/common/checkout/PaymentContent.tsx
@@ -23,7 +23,7 @@ import { makeStateSelectOptions } from '../utility/form-elements';
 import { runInitialValidation } from './formik-util';
 import CheckoutPageLayout from './CheckoutPageLayout';
 
-import { Progress } from '../../PageWrapper';
+import { ProgressProps } from '../../../lib/interfaces';
 import { BackButtonContent } from '../question-components/BackButton';
 import MarriageCertificateRequest from '../../store/MarriageCertificateRequest';
 import RenderOrderDetails from './OrderDetails';
@@ -45,12 +45,12 @@ type Props = {
   | {
       certificateType: 'birth';
       birthCertificateRequest: BirthCertificateRequest;
-      progress: Progress;
+      progress: ProgressProps;
     }
   | {
       certificateType: 'marriage';
       marriageCertificateRequest: MarriageCertificateRequest;
-      progress: Progress;
+      progress: ProgressProps;
     });
 
 interface State {
diff --git a/services-js/registry-certs/client/common/checkout/ReviewContent.tsx b/services-js/registry-certs/client/common/checkout/ReviewContent.tsx
index 9335050fc..a03a6eedd 100644
--- a/services-js/registry-certs/client/common/checkout/ReviewContent.tsx
+++ b/services-js/registry-certs/client/common/checkout/ReviewContent.tsx
@@ -20,7 +20,7 @@ import CostSummary from '../CostSummary';
 import { OrderErrorCause } from '../../queries/graphql-types';
 import { SubmissionError } from '../../dao/CheckoutDao';
 import CheckoutPageLayout from './CheckoutPageLayout';
-import { Progress } from '../../PageWrapper';
+import { ProgressProps } from '../../../lib/interfaces';
 import RenderOrderDetails from './OrderDetails';
 
 export type Props = {
@@ -36,12 +36,12 @@ export type Props = {
   | {
       certificateType: 'birth';
       birthCertificateRequest: BirthCertificateRequest;
-      progress: Progress;
+      progress: ProgressProps;
     }
   | {
       certificateType: 'marriage';
       marriageCertificateRequest: MarriageCertificateRequest;
-      progress: Progress;
+      progress: ProgressProps;
     });
 
 export interface State {
diff --git a/services-js/registry-certs/client/common/checkout/ShippingContent.tsx b/services-js/registry-certs/client/common/checkout/ShippingContent.tsx
index b405950c8..29d97be3a 100644
--- a/services-js/registry-certs/client/common/checkout/ShippingContent.tsx
+++ b/services-js/registry-certs/client/common/checkout/ShippingContent.tsx
@@ -15,7 +15,7 @@ import MarriageCertificateRequest from '../../store/MarriageCertificateRequest';
 import Order, { OrderInfo } from '../../models/Order';
 import { makeStateSelectOptions } from '../utility/form-elements';
 
-import { Progress } from '../../PageWrapper';
+import { ProgressProps } from '../../../lib/interfaces';
 import CheckoutPageLayout from './CheckoutPageLayout';
 import { BackButtonContent } from '../question-components/BackButton';
 import RenderOrderDetails from './OrderDetails';
@@ -31,12 +31,12 @@ export type Props = {
   | {
       certificateType: 'birth';
       birthCertificateRequest: BirthCertificateRequest;
-      progress: Progress;
+      progress: ProgressProps;
     }
   | {
       certificateType: 'marriage';
       marriageCertificateRequest: MarriageCertificateRequest;
-      progress: Progress;
+      progress: ProgressProps;
     });
 
 export interface ShippingInfo {
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx
new file mode 100644
index 000000000..705ec0839
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx
@@ -0,0 +1,1113 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/core';
+
+import { ChangeEvent, Component, MouseEvent } from 'react';
+import { observer } from 'mobx-react';
+
+import {
+  TextInput,
+  MemorableDateInput,
+  RadioGroup,
+  SelectDropdown,
+} from '@cityofboston/react-fleet';
+
+import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
+import QuestionComponent from '../../common/question-components/QuestionComponent';
+import FieldsetComponent from '../../common/question-components/FieldsetComponent';
+
+import {
+  SECTION_HEADING_STYLING,
+  SECTION_WRAPPER_STYLING,
+  NAME_FIELDS_CONTAINER_STYLING,
+  NAME_FIELDS_BASIC_CONTAINER_STYLING,
+  HEADER_SPACING_STYLING,
+  RADIOGROUP_CONTAINER_STYLING,
+  HEADER_PADDING_TOP_STYLING,
+  OVERRIDE_SELECT_DISPLAY_STYLING,
+  MARRIAGE_INTENTION_FORM_STYLING,
+} from '../../common/question-components/styling';
+
+import {
+  ONE_AND_HALF_MARGINBOTTOM,
+  BOTTOM_SPACING_STYLING,
+  TWO_AND_HALF_MARGINBOTTOM,
+} from './styling';
+
+import {
+  // SEX_CHECKBOX,
+  BOOL_RADIOGROUP,
+  COUNTRIES,
+  PARTNERSHIP_TYPE_DISSOLVED,
+  PARTNERSHIP_TYPE,
+  MARRIAGE_COUNT,
+  US_STATES,
+  LAST_MARRIAGE_STATUS,
+  BOSTON_NEIGHBORHOODS,
+  SUFFIX_OPTIONS,
+} from './inputData';
+
+interface Props {
+  marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
+  handleProceed: (ev: MouseEvent) => void;
+  handleStepBack: (ev: MouseEvent) => void;
+  partnerLabel: string;
+}
+
+@observer
+export default class PartnerForm extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public static isComplete({
+    requestInformation,
+  }: MarriageIntentionCertificateRequest): boolean {
+    const {
+      partnerA_firstName,
+      partnerA_lastName,
+      partnerA_surName,
+      partnerA_dob,
+      partnerA_age,
+      // partnerA_sex,
+      partnerA_occupation,
+      partnerA_residenceAddress,
+      partnerA_residenceCountry,
+      partnerA_bloodRelation,
+      partnerA_bloodRelationDesc,
+      partnerA_parentsMarriedAtBirth,
+      partnerA_parentA_Name,
+      partnerA_parentA_Surname,
+      partnerA_parentB_Name,
+      partnerA_parentB_Surname,
+      partnerA_birthCity,
+      partnerA_birthState,
+      partnerA_birthCountry,
+      partnerA_partnershipType,
+      partnerA_partnershipTypeDissolved,
+      partnerA_partnershipState,
+
+      partnerA_marriageNumb,
+      partnerA_lastMarriageStatus,
+    } = requestInformation;
+
+    let bloodRelReq = true;
+    let partnerA_partnership_dissolved = true;
+    let partnerA_lastMarriageStatusReq = true;
+    let partnerA_birthStateZip = true;
+    let partnershipState = true;
+    if (
+      partnerA_partnershipType !== PARTNERSHIP_TYPE[0].value &&
+      partnerA_partnershipState.length < 2
+    ) {
+      partnershipState = false;
+    }
+
+    const bloodRelDescReq =
+      partnerA_bloodRelation && partnerA_bloodRelation == '1' ? true : false;
+
+    if (partnerA_birthCountry === 'USA') {
+      partnerA_birthStateZip = partnerA_birthState.length > 0 ? true : false;
+    }
+
+    if (bloodRelDescReq && partnerA_bloodRelationDesc.length < 1) {
+      bloodRelReq = false;
+    }
+
+    const marriageNumb = MARRIAGE_COUNT.find(
+      entry => entry.value === partnerA_marriageNumb
+    );
+    if (marriageNumb && marriageNumb.value !== MARRIAGE_COUNT[0].value) {
+      if (partnerA_lastMarriageStatus === '') {
+        partnerA_lastMarriageStatusReq = false;
+      }
+    }
+
+    if (partnerA_partnershipType !== PARTNERSHIP_TYPE[0].value) {
+      if (partnerA_partnershipTypeDissolved === '') {
+        partnerA_partnership_dissolved = false;
+      }
+    }
+
+    return !!(
+      partnerA_firstName &&
+      partnerA_lastName &&
+      partnerA_surName &&
+      partnerA_dob &&
+      partnerA_age &&
+      // partnerA_sex &&
+      partnerA_bloodRelation &&
+      bloodRelReq &&
+      partnerA_parentsMarriedAtBirth &&
+      partnerA_parentA_Name &&
+      partnerA_parentA_Surname &&
+      partnerA_parentB_Name &&
+      partnerA_parentB_Surname &&
+      partnerA_birthCity &&
+      partnerA_birthCountry &&
+      partnerA_partnershipType &&
+      partnerA_partnership_dissolved &&
+      partnerA_marriageNumb &&
+      partnerA_lastMarriageStatusReq &&
+      partnerA_residenceAddress &&
+      partnerA_residenceCountry &&
+      partnerA_occupation &&
+      partnershipState &&
+      partnerA_birthStateZip
+    );
+  }
+
+  private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        [event.target.name]: event.target.value,
+      },
+      ''
+    );
+  };
+
+  private handleBloodRelDescChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        ['partnerA_bloodRelationDesc']: event.target.value,
+      },
+      ''
+    );
+
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        ['partnerB_bloodRelationDesc']: event.target.value,
+      },
+      ''
+    );
+  };
+
+  private handleBloodRelChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        ['partnerA_bloodRelation']: event.target.value,
+      },
+      ''
+    );
+
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        ['partnerB_bloodRelation']: event.target.value,
+      },
+      ''
+    );
+
+    if (event.target.value === '0') {
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          ['partnerA_bloodRelationDesc']: '',
+        },
+        ''
+      );
+
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          ['partnerB_bloodRelationDesc']: '',
+        },
+        ''
+      );
+    }
+  };
+
+  private handleBirthDateChange = (newDate: Date | null): void => {
+    const isDate = this.isDateObj(newDate);
+    let age = '';
+    if (isDate) {
+      age = `${this.calcAge(newDate)}`;
+      this.updateAge(age);
+    }
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        partnerA_dob: newDate,
+      },
+      ''
+    );
+  };
+
+  private handleBirthplaceCountryChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        [event.target.name]: event.target.value,
+      },
+      ''
+    );
+
+    if (event.target.value !== 'USA') {
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          ['partnerA_birthState']: '',
+        },
+        ''
+      );
+    }
+  };
+
+  private handleResidenceCountryChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        [event.target.name]: event.target.value,
+      },
+      ''
+    );
+
+    if (event.target.value !== 'USA') {
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          ['partnerA_residenceState']: '',
+        },
+        ''
+      );
+
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          ['partnerA_residenceZip']: '',
+        },
+        ''
+      );
+    }
+  };
+
+  private handleZipCodeChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    const val = event.target.value
+      .replace(/[^0-9]/g, '')
+      .replace(/(\..*)\./g, '$1');
+
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        [event.target.name]: val,
+      },
+      ''
+    );
+  };
+
+  private handleResidenceStateChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_residenceCity,
+      partnerA_residenceCountry,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    const inlowerCase = partnerA_residenceCity.toLowerCase();
+    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        [event.target.name]: event.target.value,
+      },
+      ''
+    );
+
+    if (
+      partnerA_residenceCountry === 'USA' &&
+      event.target.value === 'MA' &&
+      isBosNeighborhood > -1
+    ) {
+      this.replaceBosNeighborhoods({
+        target: {
+          name: 'partnerA_residenceCity',
+          value: partnerA_residenceCity,
+        },
+      });
+    }
+  };
+
+  private replaceBosNeighborhoods = (
+    event:
+      | ChangeEvent<HTMLInputElement>
+      | {
+          target: { name: string; value: string };
+        }
+  ): void => {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_residenceCountry,
+      partnerA_residenceState,
+    } = marriageIntentionCertificateRequest.requestInformation;
+    const inlowerCase = event.target.value.toLowerCase();
+    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+
+    if (
+      partnerA_residenceCountry === 'USA' &&
+      partnerA_residenceState === 'MA' &&
+      isBosNeighborhood > -1
+    ) {
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          [event.target.name]: 'Boston',
+        },
+        ''
+      );
+    }
+  };
+
+  private checkBirthCityForNeighborhood = (): void => {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_birthCountry,
+      partnerA_birthCity,
+      partnerA_birthState,
+    } = marriageIntentionCertificateRequest.requestInformation;
+    const inlowerCase = partnerA_birthCity.toLowerCase();
+    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+
+    if (
+      partnerA_birthCountry === 'USA' &&
+      (partnerA_birthState === 'MA' ||
+        partnerA_birthState === 'Massachusetts') &&
+      isBosNeighborhood > -1
+    ) {
+      this.props.marriageIntentionCertificateRequest.answerQuestion(
+        {
+          ['partnerA_birthCity']: 'Boston',
+        },
+        ''
+      );
+    }
+  };
+
+  private updateAge = age => {
+    this.props.marriageIntentionCertificateRequest.answerQuestion(
+      {
+        partnerA_age: age,
+      },
+      ''
+    );
+  };
+
+  private calcAge = dateObj => {
+    const today = new Date();
+    let age = today.getFullYear() - dateObj.getFullYear();
+    const m = today.getMonth() - dateObj.getMonth();
+
+    if (m < 0 || (m === 0 && today.getDate() < dateObj.getDate())) {
+      age = age - 1;
+    }
+
+    return age;
+  };
+
+  private isDateObj = dateObj => {
+    if (Object.prototype.toString.call(dateObj) === '[object Date]') {
+      return true;
+    }
+    return false;
+  };
+
+  // RENDER ALL UI
+  public render() {
+    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
+    const {
+      partnerA_marriageNumb,
+    } = marriageIntentionCertificateRequest.requestInformation;
+    const marriageNumb = MARRIAGE_COUNT.find(
+      entry => entry.value === partnerA_marriageNumb
+    );
+
+    return (
+      <QuestionComponent
+        handleProceed={this.props.handleProceed}
+        handleStepBack={this.props.handleStepBack}
+        allowProceed={PartnerForm.isComplete(
+          marriageIntentionCertificateRequest
+        )}
+        nextButtonText={'NEXT'}
+      >
+        <FieldsetComponent
+          legendText={
+            <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
+          }
+        >
+          {this.nameFields()}
+          {this.dateOfBirth()}
+          {this.birthPlace()}
+          {this.residence()}
+
+          {marriageNumb &&
+            marriageNumb.value !== MARRIAGE_COUNT[0].value &&
+            this.lastMarriageStatus()}
+
+          {this.partnershipType()}
+          {this.parents()}
+          {/* {this.sex()} */}
+          {this.parentsMarried()}
+          {this.bloodRelation()}
+        </FieldsetComponent>
+      </QuestionComponent>
+    );
+  }
+
+  // UI ELEMENTS
+  // -----------
+
+  lastMarriageStatus() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_lastMarriageStatus,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            HEADER_SPACING_STYLING,
+            BOTTOM_SPACING_STYLING,
+          ]}
+        >
+          <h2 css={SECTION_HEADING_STYLING}>
+            If Applicable, Status of Last Marriage
+          </h2>
+
+          <div css={RADIOGROUP_CONTAINER_STYLING}>
+            <RadioGroup
+              items={LAST_MARRIAGE_STATUS}
+              name="partnerA_lastMarriageStatus"
+              checkedValue={partnerA_lastMarriageStatus}
+              handleItemChange={this.handleChange}
+              groupLabel=""
+              hideLabel
+            />
+
+            <label className="notice">
+              If void, please provide clerk with evidence.
+            </label>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  residenceState() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_residenceState,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div>
+        <div css={NAME_FIELDS_CONTAINER_STYLING}>
+          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
+            <div className="fs-c m-b300">
+              <div className="sel">
+                <SelectDropdown
+                  label="Residence State"
+                  hideBlankOption
+                  options={US_STATES}
+                  name={'partnerA_residenceState'}
+                  value={partnerA_residenceState}
+                  onChange={this.handleResidenceStateChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  residenceZip() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_residenceZip,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div>
+        <TextInput
+          label="Residence Zip Code"
+          name="partnerA_residenceZip"
+          value={partnerA_residenceZip}
+          onChange={this.handleZipCodeChange}
+          disableLabelNoWrap={true}
+          maxLength={10}
+          minLength={5}
+        />
+      </div>
+    );
+  }
+
+  residence() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_residenceCountry,
+      partnerA_marriageNumb,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+          <h2 css={SECTION_HEADING_STYLING}>Residence</h2>
+        </div>
+
+        <div
+          css={[TWO_AND_HALF_MARGINBOTTOM, NAME_FIELDS_BASIC_CONTAINER_STYLING]}
+        >
+          <div
+            css={[
+              NAME_FIELDS_BASIC_CONTAINER_STYLING,
+              OVERRIDE_SELECT_DISPLAY_STYLING,
+            ]}
+          >
+            <div className="fs-c m-b300">
+              <div className="sel">
+                <SelectDropdown
+                  label="Select Country of Residence"
+                  // hideBlankOption
+                  options={COUNTRIES}
+                  name={'partnerA_residenceCountry'}
+                  value={partnerA_residenceCountry}
+                  onChange={this.handleResidenceCountryChange}
+                  disableLabelNoWrap={true}
+                />
+              </div>
+            </div>
+          </div>
+
+          {partnerA_residenceCountry === 'USA' && this.residenceState()}
+          {partnerA_residenceCountry && this.residenceCity()}
+          {partnerA_residenceCountry === 'USA' && this.residenceZip()}
+
+          <div
+            css={[
+              NAME_FIELDS_BASIC_CONTAINER_STYLING,
+              OVERRIDE_SELECT_DISPLAY_STYLING,
+            ]}
+          >
+            <div className="fs-c m-b300">
+              <div className="sel">
+                <SelectDropdown
+                  label="This Marriage is your ..."
+                  // hideBlankOption
+                  options={MARRIAGE_COUNT}
+                  name={'partnerA_marriageNumb'}
+                  value={partnerA_marriageNumb}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  residenceCity() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_residenceAddress,
+      partnerA_residenceCity,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div>
+        <TextInput
+          label="Residence City/Town"
+          name="partnerA_residenceCity"
+          value={partnerA_residenceCity}
+          onChange={this.handleChange}
+          onBlur={this.replaceBosNeighborhoods}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
+          }
+          maxLength={100}
+        />
+
+        <TextInput
+          label="Residence Address"
+          name="partnerA_residenceAddress"
+          value={partnerA_residenceAddress}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            'Please include your apartment number if that applies.'
+          }
+          maxLength={100}
+        />
+      </div>
+    );
+  }
+
+  partnershipType() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_partnershipType,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            HEADER_SPACING_STYLING,
+            BOTTOM_SPACING_STYLING,
+          ]}
+        >
+          <h2 css={SECTION_HEADING_STYLING}>Were you ever a member of a ...</h2>
+
+          <div css={RADIOGROUP_CONTAINER_STYLING}>
+            <RadioGroup
+              items={PARTNERSHIP_TYPE}
+              name="partnerA_partnershipType"
+              checkedValue={partnerA_partnershipType}
+              handleItemChange={this.handleChange}
+              groupLabel=""
+              hideLabel
+            />
+          </div>
+        </div>
+
+        {partnerA_partnershipType &&
+          (partnerA_partnershipType === 'CIV' ||
+            partnerA_partnershipType === 'DOM') &&
+          this.dissolved()}
+      </div>
+    );
+  }
+
+  dissolved() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_partnershipTypeDissolved,
+      partnerA_partnershipState,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          HEADER_SPACING_STYLING,
+          BOTTOM_SPACING_STYLING,
+        ]}
+      >
+        <h3 css={SECTION_HEADING_STYLING}>
+          Civil Union Or Domestic Partnership: Dissolved
+        </h3>
+
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <RadioGroup
+            items={PARTNERSHIP_TYPE_DISSOLVED}
+            name="partnerA_partnershipTypeDissolved"
+            checkedValue={partnerA_partnershipTypeDissolved}
+            handleItemChange={this.handleChange}
+            groupLabel=""
+            hideLabel
+          />
+        </div>
+
+        <TextInput
+          label="Partnership State/Country"
+          name="partnerA_partnershipState"
+          value={partnerA_partnershipState}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          maxLength={100}
+        />
+      </div>
+    );
+  }
+
+  bloodRelation() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_bloodRelation,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div
+          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
+        >
+          <h2 css={SECTION_HEADING_STYLING}>
+            Related by blood or marriage to Person B
+          </h2>
+
+          <div css={RADIOGROUP_CONTAINER_STYLING}>
+            <div css={ONE_AND_HALF_MARGINBOTTOM}>
+              <RadioGroup
+                items={BOOL_RADIOGROUP}
+                name="partnerA_bloodRelation"
+                groupLabel=""
+                checkedValue={partnerA_bloodRelation}
+                handleItemChange={this.handleBloodRelChange}
+                hideLabel
+              />
+            </div>
+          </div>
+        </div>
+
+        {partnerA_bloodRelation === '1' && this.bloodRelDesc()}
+      </div>
+    );
+  }
+
+  bloodRelDesc() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_bloodRelationDesc,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+        <TextInput
+          label="Blood Relation: If yes, how?"
+          name="partnerA_bloodRelationDesc"
+          value={partnerA_bloodRelationDesc}
+          onChange={this.handleBloodRelDescChange}
+          disableLabelNoWrap={true}
+          maxLength={100}
+        />
+      </div>
+    );
+  }
+
+  parentsMarried() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_parentsMarriedAtBirth,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div
+          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
+        >
+          <h2 css={SECTION_HEADING_STYLING}>
+            Were your parents married at the time of your birth?
+          </h2>
+
+          <div css={RADIOGROUP_CONTAINER_STYLING}>
+            <div css={ONE_AND_HALF_MARGINBOTTOM}>
+              <RadioGroup
+                items={BOOL_RADIOGROUP}
+                groupLabel=""
+                name="partnerA_parentsMarriedAtBirth"
+                checkedValue={partnerA_parentsMarriedAtBirth}
+                handleItemChange={this.handleChange}
+                hideLabel
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  birthPlace() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_birthCountry,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div
+          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
+        >
+          <h2 css={SECTION_HEADING_STYLING}>Birthplace</h2>
+
+          <div
+            css={[
+              NAME_FIELDS_BASIC_CONTAINER_STYLING,
+              OVERRIDE_SELECT_DISPLAY_STYLING,
+            ]}
+          >
+            <SelectDropdown
+              label="Birthplace Country"
+              // hideBlankOption
+              name={'partnerA_birthCountry'}
+              options={COUNTRIES}
+              value={partnerA_birthCountry}
+              onChange={this.handleBirthplaceCountryChange}
+              onBlur={this.checkBirthCityForNeighborhood}
+            />
+          </div>
+
+          {partnerA_birthCountry === 'USA' && this.birthStateZip()}
+          {partnerA_birthCountry && this.birthCity()}
+        </div>
+      </div>
+    );
+  }
+
+  birthCity() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_birthCity,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div>
+        <TextInput
+          label="Birthplace City/Town"
+          name="partnerA_birthCity"
+          value={partnerA_birthCity}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          onBlur={this.checkBirthCityForNeighborhood}
+          optionalDescription={
+            'Please list the city/town where the hospital was located, not where your family was living.'
+          }
+          maxLength={100}
+        />
+      </div>
+    );
+  }
+
+  birthStateZip() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_birthState,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div css={NAME_FIELDS_CONTAINER_STYLING}>
+          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
+            <div className="fs-c m-b300">
+              <div className="sel">
+                <SelectDropdown
+                  label="Birthplace State/Province"
+                  hideBlankOption
+                  options={US_STATES}
+                  name={'partnerA_birthState'}
+                  value={partnerA_birthState}
+                  onChange={this.handleChange}
+                  onBlur={this.checkBirthCityForNeighborhood}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  parents() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_parentA_Name,
+      partnerA_parentA_Surname,
+      partnerA_parentB_Name,
+      partnerA_parentB_Surname,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div css={[HEADER_SPACING_STYLING, HEADER_PADDING_TOP_STYLING]}>
+          <h2 css={SECTION_HEADING_STYLING}>Parents</h2>
+        </div>
+        <div
+          css={[
+            MARRIAGE_INTENTION_FORM_STYLING,
+            TWO_AND_HALF_MARGINBOTTOM,
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          ]}
+          style={{ marginBottom: '2.5em' }}
+        >
+          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 1/Mother</h4>
+
+          <TextInput
+            label="Parent 1/Mother - First Middle Last"
+            name="partnerA_parentA_Name"
+            value={partnerA_parentA_Name}
+            onChange={this.handleChange}
+            disableLabelNoWrap={true}
+            maxLength={38}
+          />
+
+          <TextInput
+            label="Parent 1/Mother - Maiden Name/Surname at Birth or Adoption"
+            name="partnerA_parentA_Surname"
+            value={partnerA_parentA_Surname}
+            onChange={this.handleChange}
+            disableLabelNoWrap={true}
+            maxLength={38}
+            optionalDescription={
+              "This should be your parent's last name at the time of their birth or adoption."
+            }
+          />
+        </div>
+
+        <div
+          css={[
+            MARRIAGE_INTENTION_FORM_STYLING,
+            TWO_AND_HALF_MARGINBOTTOM,
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          ]}
+          style={{ marginBottom: '2.5em' }}
+        >
+          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 2/Father</h4>
+
+          <TextInput
+            label="Parent 2/Father - First Middle Last"
+            name="partnerA_parentB_Name"
+            value={partnerA_parentB_Name}
+            onChange={this.handleChange}
+            disableLabelNoWrap={true}
+            maxLength={38}
+          />
+
+          <TextInput
+            label="Parent 2/Father - Maiden Name/Surname at Birth or Adoption"
+            name="partnerA_parentB_Surname"
+            value={partnerA_parentB_Surname}
+            onChange={this.handleChange}
+            disableLabelNoWrap={true}
+            maxLength={38}
+            optionalDescription={
+              "This should be your parent's last name at the time of their birth or adoption."
+            }
+          />
+        </div>
+      </div>
+    );
+  }
+
+  dateOfBirth() {
+    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
+    const {
+      partnerA_dob,
+      partnerA_age,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={SECTION_WRAPPER_STYLING}>
+        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+          <h2 css={SECTION_HEADING_STYLING} style={{ marginBottom: '1.5rem' }}>
+            Date of Birth
+          </h2>
+          <MemorableDateInput
+            hideLengend={true}
+            legend={`Person ${partnerLabel} Date of Birth`}
+            initialDate={partnerA_dob || undefined}
+            componentId="dob"
+            onlyAllowPast={true}
+            handleDate={this.handleBirthDateChange}
+          />
+        </div>
+
+        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+          <TextInput
+            label="Age"
+            name="partnerA_age"
+            value={partnerA_age}
+            onChange={this.handleChange}
+            maxLength={2}
+            disabled={true}
+            disableLabelNoWrap={true}
+            optionalDescription={
+              'Your age will be automatically calculated based on your date of birth.'
+            }
+          />
+        </div>
+      </div>
+    );
+  }
+
+  nameFields() {
+    const { marriageIntentionCertificateRequest } = this.props;
+    const {
+      partnerA_firstName,
+      partnerA_lastName,
+      partnerA_middleName,
+      partnerA_surName,
+      partnerA_occupation,
+      partnerA_suffix,
+    } = marriageIntentionCertificateRequest.requestInformation;
+
+    return (
+      <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+        <TextInput
+          label="First Name"
+          name="partnerA_firstName"
+          value={partnerA_firstName}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          maxLength={100}
+        />
+
+        <TextInput
+          label="Middle Name"
+          name="partnerA_middleName"
+          value={partnerA_middleName}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            'This is your current middle name if you have one. You may not list a new middle name.'
+          }
+          maxLength={50}
+        />
+
+        <TextInput
+          label="Last Name"
+          name="partnerA_lastName"
+          value={partnerA_lastName}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          maxLength={100}
+        />
+
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+          ]}
+        >
+          <TextInput
+            label="Last Name / SURNAME to be used after marriage"
+            name="partnerA_surName"
+            value={partnerA_surName}
+            onChange={this.handleChange}
+            disableLabelNoWrap={true}
+            optionalDescription={
+              "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
+            }
+            maxLength={50}
+          />
+        </div>
+
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+          ]}
+        >
+          <SelectDropdown
+            label="Suffix"
+            // hideBlankOption
+            options={SUFFIX_OPTIONS}
+            name={'partnerA_suffix'}
+            value={partnerA_suffix}
+            onChange={this.handleResidenceStateChange}
+          />
+        </div>
+
+        <TextInput
+          label="Occupation"
+          name="partnerA_occupation"
+          value={partnerA_occupation}
+          onChange={this.handleChange}
+          disableLabelNoWrap={true}
+          maxLength={100}
+        />
+      </div>
+    );
+  }
+}
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index fd0d3cf47..35abb0cbb 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -42,11 +42,13 @@ import {
   PARTNERSHIP_TYPE,
   MARRIAGE_COUNT,
   US_STATES,
-  LAST_MARRIAGE_STATUS,
+  // LAST_MARRIAGE_STATUS,
   BOSTON_NEIGHBORHOODS,
   SUFFIX_OPTIONS,
 } from './inputData';
 
+import { lastMarriageStatus, nameFields } from './partnerFormUI';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
@@ -414,6 +416,14 @@ export default class PartnerForm extends Component<Props> {
     const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
     const {
       partnerA_marriageNumb,
+      partnerA_lastMarriageStatus,
+
+      partnerA_firstName,
+      partnerA_lastName,
+      partnerA_middleName,
+      partnerA_surName,
+      partnerA_occupation,
+      partnerA_suffix,
     } = marriageIntentionCertificateRequest.requestInformation;
     const marriageNumb = MARRIAGE_COUNT.find(
       entry => entry.value === partnerA_marriageNumb
@@ -433,18 +443,29 @@ export default class PartnerForm extends Component<Props> {
             <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
           }
         >
-          {this.nameFields()}
+          {nameFields(
+            this.handleChange,
+            this.handleResidenceStateChange,
+            partnerA_firstName,
+            partnerA_lastName,
+            partnerA_middleName,
+            partnerA_surName,
+            partnerA_occupation,
+            partnerA_suffix
+          )}
           {this.dateOfBirth()}
           {this.birthPlace()}
           {this.residence()}
 
           {marriageNumb &&
             marriageNumb.value !== MARRIAGE_COUNT[0].value &&
-            this.lastMarriageStatus()}
+            lastMarriageStatus({
+              handleChange: this.handleChange,
+              partnerA_lastMarriageStatus: partnerA_lastMarriageStatus,
+            })}
 
           {this.partnershipType()}
           {this.parents()}
-          {/* {this.sex()} */}
           {this.parentsMarried()}
           {this.bloodRelation()}
         </FieldsetComponent>
@@ -455,44 +476,6 @@ export default class PartnerForm extends Component<Props> {
   // UI ELEMENTS
   // -----------
 
-  lastMarriageStatus() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_lastMarriageStatus,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            HEADER_SPACING_STYLING,
-            BOTTOM_SPACING_STYLING,
-          ]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            If Applicable, Status of Last Marriage
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <RadioGroup
-              items={LAST_MARRIAGE_STATUS}
-              name="partnerA_lastMarriageStatus"
-              checkedValue={partnerA_lastMarriageStatus}
-              handleItemChange={this.handleChange}
-              groupLabel=""
-              hideLabel
-            />
-
-            <label className="notice">
-              If void, please provide clerk with evidence.
-            </label>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   residenceState() {
     const { marriageIntentionCertificateRequest } = this.props;
     const {
@@ -809,36 +792,6 @@ export default class PartnerForm extends Component<Props> {
     );
   }
 
-  // sex() {
-  //   const { marriageIntentionCertificateRequest } = this.props;
-  //   const {
-  //     partnerA_sex,
-  //   } = marriageIntentionCertificateRequest.requestInformation;
-
-  //   return (
-  //     <div css={SECTION_WRAPPER_STYLING}>
-  //       <div
-  //         css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-  //       >
-  //         <h2 css={SECTION_HEADING_STYLING}>Sex</h2>
-
-  //         <div css={RADIOGROUP_CONTAINER_STYLING}>
-  //           <div css={ONE_AND_HALF_MARGINBOTTOM}>
-  //             <RadioGroup
-  //               items={SEX_CHECKBOX}
-  //               name="partnerA_sex"
-  //               groupLabel=""
-  //               checkedValue={partnerA_sex}
-  //               handleItemChange={this.handleChange}
-  //               hideLabel
-  //             />
-  //           </div>
-  //         </div>
-  //       </div>
-  //     </div>
-  //   );
-  // }
-
   birthPlace() {
     const { marriageIntentionCertificateRequest } = this.props;
     const {
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
new file mode 100644
index 000000000..b615be3a8
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -0,0 +1,164 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+import {
+  RadioGroup,
+  TextInput,
+  SelectDropdown,
+  // MemorableDateInput,
+} from '@cityofboston/react-fleet';
+
+import {
+  SECTION_HEADING_STYLING,
+  SECTION_WRAPPER_STYLING,
+  // NAME_FIELDS_CONTAINER_STYLING,
+  NAME_FIELDS_BASIC_CONTAINER_STYLING,
+  HEADER_SPACING_STYLING,
+  RADIOGROUP_CONTAINER_STYLING,
+  // HEADER_PADDING_TOP_STYLING,
+  OVERRIDE_SELECT_DISPLAY_STYLING,
+  // MARRIAGE_INTENTION_FORM_STYLING,
+} from '../../common/question-components/styling';
+
+import {
+  BOTTOM_SPACING_STYLING,
+  // ONE_AND_HALF_MARGINBOTTOM,
+  // TWO_AND_HALF_MARGINBOTTOM,
+} from './styling';
+
+import {
+  SUFFIX_OPTIONS,
+  LAST_MARRIAGE_STATUS,
+  // BOOL_RADIOGROUP,
+  // COUNTRIES,
+  // PARTNERSHIP_TYPE_DISSOLVED,
+  // PARTNERSHIP_TYPE,
+  // MARRIAGE_COUNT,
+  // US_STATES,
+  // BOSTON_NEIGHBORHOODS,
+} from './inputData';
+
+export const lastMarriageStatus = (data: {
+  handleChange: ((e: any) => void) | undefined;
+  partnerA_lastMarriageStatus: string;
+}) => {
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          HEADER_SPACING_STYLING,
+          BOTTOM_SPACING_STYLING,
+        ]}
+      >
+        <h2 css={SECTION_HEADING_STYLING}>
+          If Applicable, Status of Last Marriage
+        </h2>
+
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <RadioGroup
+            items={LAST_MARRIAGE_STATUS}
+            name="partnerA_lastMarriageStatus"
+            checkedValue={data.partnerA_lastMarriageStatus}
+            handleItemChange={data.handleChange}
+            groupLabel=""
+            hideLabel
+          />
+
+          <label className="notice">
+            If void, please provide clerk with evidence.
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const nameFields = (
+  handleChange: ((e: any) => void) | undefined,
+  handleResidenceStateChange: ((e: any) => void) | undefined,
+  partnerA_firstName: string,
+  partnerA_lastName: string,
+  partnerA_middleName: string,
+  partnerA_surName: string,
+  partnerA_occupation: string,
+  partnerA_suffix: string
+) => {
+  return (
+    <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+      <TextInput
+        label="First Name"
+        name="partnerA_firstName"
+        value={partnerA_firstName}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
+
+      <TextInput
+        label="Middle Name"
+        name="partnerA_middleName"
+        value={partnerA_middleName}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        optionalDescription={
+          'This is your current middle name if you have one. You may not list a new middle name.'
+        }
+        maxLength={50}
+      />
+
+      <TextInput
+        label="Last Name"
+        name="partnerA_lastName"
+        value={partnerA_lastName}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
+
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          OVERRIDE_SELECT_DISPLAY_STYLING,
+        ]}
+      >
+        <TextInput
+          label="Last Name / SURNAME to be used after marriage"
+          name="partnerA_surName"
+          value={partnerA_surName}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
+          }
+          maxLength={50}
+        />
+      </div>
+
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          OVERRIDE_SELECT_DISPLAY_STYLING,
+        ]}
+      >
+        <SelectDropdown
+          label="Suffix"
+          // hideBlankOption
+          options={SUFFIX_OPTIONS}
+          name={'partnerA_suffix'}
+          value={partnerA_suffix}
+          onChange={handleResidenceStateChange}
+        />
+      </div>
+
+      <TextInput
+        label="Occupation"
+        name="partnerA_occupation"
+        value={partnerA_occupation}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
+    </div>
+  );
+};
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index 351fec990..8bfd46621 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -57,6 +57,7 @@ interface State {
    * doesn’t receive prevProps.)
    */
   currentStep: MarriageIntentionStep;
+  completedSteps: Set<number>;
 }
 
 /**
@@ -128,6 +129,7 @@ export default class IndexPage extends React.Component<Props, State> {
       globalMarriageIntentionCertificateRequest:
         props.marriageIntentionCertificateRequest,
       currentStep: props.currentStep,
+      completedSteps: new Set([0]),
     };
   }
 
@@ -150,6 +152,12 @@ export default class IndexPage extends React.Component<Props, State> {
   ) => {
     const { currentStep, marriageIntentionCertificateRequest } = this.props;
 
+    const {
+      localMarriageIntentionCertificateRequest,
+      completedSteps,
+    } = this.state;
+    const { steps } = localMarriageIntentionCertificateRequest;
+
     if (marriageIntentionCertificateRequest !== modifiedRequest) {
       marriageIntentionCertificateRequest.updateFrom(modifiedRequest);
     }
@@ -166,6 +174,9 @@ export default class IndexPage extends React.Component<Props, State> {
     this.gaEventActionAndLabel();
 
     const nextStep = newSteps[currentIndex + 1];
+    this.setState({
+      completedSteps: new Set([...completedSteps, steps.indexOf(nextStep)]),
+    });
     Router.push(`/marriageintention?step=${nextStep}`);
   };
 
@@ -196,8 +207,6 @@ export default class IndexPage extends React.Component<Props, State> {
   };
 
   gaAnswerQuestion = (action: string, label: string): void => {
-    // eslint-disable-next-line no-console
-    // console.log(`gaAnswerQuestion: , action: ${action} | label: ${label}`);
     this.props.siteAnalytics.sendEvent(action, {
       category: 'MarriageIntention',
       label,
@@ -207,45 +216,17 @@ export default class IndexPage extends React.Component<Props, State> {
   private submitRequest = async (
     modifiedRequest: MarriageIntentionCertificateRequest
   ) => {
-    // eslint-disable-next-line no-console
-    // console.log('ReviewForm > submitRequest', this);
-
     // DIG-2105
-    // console.log('submitRequest: ', modifiedRequest);
-    const {
-      // currentStep,
-      // marriageIntentionCertificateRequest,
-      marriageIntentionDao,
-    } = this.props;
+    const { marriageIntentionDao } = this.props;
 
     try {
-      // let formCompleted: any = null;
-
-      // eslint-disable-next-line no-console
-      // console.log('index > submitRequest > modifiedRequest: ', modifiedRequest);
-
       // DIG-2105
       await marriageIntentionDao.submitMarriageIntentionCertificateRequest(
         modifiedRequest
       );
 
-      // formCompleted = await marriageIntentionDao.submitMarriageIntentionCertificateRequest(
-      //   modifiedRequest
-      // );
-      // eslint-disable-next-line no-console
-      // console.log(
-      //   'ReviewForm > submitRequest > formCompleted: ',
-      //   formCompleted
-      // );
-
       // DIG-2105
       this.advanceQuestion(modifiedRequest);
-
-      // DIG-2105
-      // const newSteps = marriageIntentionCertificateRequest.steps;
-      // const currentIndex = newSteps.indexOf(currentStep);
-      // const nextStep = newSteps[currentIndex + 1];
-      // Router.push(`/marriageintention?step=${nextStep}`);
     } catch (e) {
       if ((window as any).Rollbar) {
         (window as any).Rollbar.error(e);
@@ -274,11 +255,22 @@ export default class IndexPage extends React.Component<Props, State> {
     Router.push(`/marriageintention?step=${steps[newIndex]}`);
   };
 
+  private progressNavClick = (i: string | number) => {
+    const {
+      marriageIntentionCertificateRequest: { steps },
+    } = this.props;
+    Router.push(`/marriageintention?step=${steps[i]}`);
+  };
+
   render() {
     const { currentStep } = this.props;
-    const { localMarriageIntentionCertificateRequest } = this.state;
+    const {
+      localMarriageIntentionCertificateRequest,
+      completedSteps,
+    } = this.state;
+    const { steps, labels } = localMarriageIntentionCertificateRequest;
 
-    let isStepComplete: boolean = false;
+    // let isStepComplete: boolean = false;
     let questionsEl: React.ReactNode = null;
 
     switch (currentStep) {
@@ -299,15 +291,6 @@ export default class IndexPage extends React.Component<Props, State> {
             {emailContentBlock()}
           </>
         );
-
-        // DIG-2105
-        // questionsEl = (
-        //   <Receipt
-        //     marriageIntentionCertificateRequest={
-        //       localMarriageIntentionCertificateRequest
-        //     }
-        //   />
-        // );
         break;
       case 'contactInfo':
         questionsEl = (
@@ -366,11 +349,6 @@ export default class IndexPage extends React.Component<Props, State> {
         );
         break;
       case 'reviewForms':
-        // eslint-disable-next-line no-console
-        // console.log(
-        //   'index>switch>reviewForms: ',
-        //   localMarriageIntentionCertificateRequest
-        // );
         questionsEl = (
           <>
             <ReviewForms
@@ -417,16 +395,25 @@ export default class IndexPage extends React.Component<Props, State> {
         break;
     }
 
-    const { steps } = localMarriageIntentionCertificateRequest;
-
     return (
       <PageWrapper
         certificateType="intention"
-        progress={{
+        // progress={{
+        //   totalSteps: steps.length,
+        //   currentStep: steps.indexOf(currentStep) + 1,
+        //   currentStepCompleted: isStepComplete,
+        //   offset: -1,
+        // }}
+        progressNav={{
+          steps: labels,
           totalSteps: steps.length,
-          currentStep: steps.indexOf(currentStep) + 1,
-          currentStepCompleted: isStepComplete,
-          offset: -1,
+          currentStep: steps.indexOf(currentStep),
+          showStepName: false,
+          offset: 0,
+          completed: Array.from(completedSteps),
+          clickHandler: this.progressNavClick,
+          blockStepBackAfterLastNav: true,
+          // disableOnEnd: true,
         }}
         classString={'b-c'}
         mainHeadline={'Marriage Intention Application'}
diff --git a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
index 1c631bb4b..a69036a85 100644
--- a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
+++ b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
@@ -8,6 +8,7 @@ import { GaSiteAnalytics } from '@cityofboston/next-client-common';
 import {
   MarriageIntentionCertificateRequestInformation,
   MarriageIntentionStep,
+  MarriageIntentionStepLabels,
   JSONObject,
   JSONValue,
 } from '../types';
@@ -103,6 +104,15 @@ export const QUESTION_STEPS: MarriageIntentionStep[] = [
   'reviewForms',
 ];
 
+export const LABEL_STEPS: MarriageIntentionStepLabels[] = [
+  'Getting Started',
+  'Person 1',
+  'Person 2',
+  'Contact Info',
+  'Review',
+  'Submit',
+];
+
 export const CHECKOUT_STEPS: MarriageIntentionStep[] = ['reviewRequest'];
 
 type MarriageIntentionCertificateRequestInformationJson = {
@@ -393,27 +403,12 @@ export default class MarriageIntentionCertificateRequest {
 
   @computed
   public get steps(): MarriageIntentionStep[] {
-    return [
-      ...QUESTION_STEPS,
-      // ...(this.needsIdentityVerification ? VERIFY_IDENTIFICATION_STEPS : []),
-      ...CHECKOUT_STEPS,
-    ];
+    return [...QUESTION_STEPS, ...CHECKOUT_STEPS];
   }
 
   @computed
-  public get needsIdentityVerification(): boolean {
-    // const {
-    //   partnerA_firstName,
-    //   partnerA_lastName,
-    //   partnerA_surName,
-    // } = this.requestInformation;
-
-    // const firstName = partnerA_firstName && partnerA_firstName !== '';
-    // const lastName = partnerA_lastName && partnerA_lastName !== '';
-    // return !!(partnerA_firstName && partnerA_firstName !== '');
-
-    // return !!(partnerA_firstName && partnerA_lastName && partnerA_surName);
-    return true;
+  public get labels(): MarriageIntentionStepLabels[] {
+    return [...LABEL_STEPS];
   }
 
   // A user’s answer may span several fields:
@@ -467,26 +462,10 @@ export default class MarriageIntentionCertificateRequest {
   @computed
   public get completedQuestionSteps() {
     const steps = {
-      // partnerFormA: false,
-      // partnerFormB: false,
       partnerFormA: true,
       partnerFormB: true,
-      // verifyIdentification: true,
     };
 
-    // const {
-    //   partnerA,
-    //   partnerB,
-    // } = this.requestInformation;
-
-    // if (partnerA.firstName && partnerA.lastName && partnerA.surName) {
-    //   steps.partnerFormA = true;
-    // }
-
-    // if (partnerB.firstName && partnerB.lastName && partnerB.surName) {
-    //   steps.partnerFormB = true;
-    // }
-
     return steps;
   }
 
diff --git a/services-js/registry-certs/client/types.ts b/services-js/registry-certs/client/types.ts
index 000677e96..8fd12ca9a 100644
--- a/services-js/registry-certs/client/types.ts
+++ b/services-js/registry-certs/client/types.ts
@@ -97,6 +97,14 @@ export type MarriageIntentionStep =
   | 'reviewForms'
   | 'reviewRequest';
 
+export type MarriageIntentionStepLabels =
+  | 'Getting Started'
+  | 'Person 1'
+  | 'Person 2'
+  | 'Contact Info'
+  | 'Review'
+  | 'Submit';
+
 export type IntentionQuestion = 'introStart';
 
 // Marriage-specific
diff --git a/services-js/registry-certs/lib/interfaces.ts b/services-js/registry-certs/lib/interfaces.ts
new file mode 100644
index 000000000..0ece2c72f
--- /dev/null
+++ b/services-js/registry-certs/lib/interfaces.ts
@@ -0,0 +1,18 @@
+export interface ProgressProps {
+  totalSteps: number;
+  currentStep: number;
+  currentStepCompleted: boolean;
+  offset?: number | undefined;
+  showStepName?: string;
+}
+
+export interface ProgressNavProps {
+  steps: Array<string>;
+  totalSteps: number;
+  currentStep: number;
+  showStepName?: boolean;
+  offset?: number;
+  completed?: Array<number>;
+  clickHandler?: ((e: any) => void) | undefined;
+  blockStepBackAfterLastNav?: boolean;
+}

From f28a9e40359fee183d2296c3da20c95c7e919041 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Sat, 20 Jan 2024 02:37:37 -0500
Subject: [PATCH 02/28] DIG-3685: Fix Application state to use one person
 template

---
 .../marriageintention/forms/partnerFormA.tsx  | 776 +++-------------
 .../marriageintention/forms/partnerFormB.tsx  | 847 +++---------------
 .../marriageintention/forms/partnerFormUI.tsx | 801 +++++++++++++++--
 3 files changed, 949 insertions(+), 1475 deletions(-)

diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index 35abb0cbb..7d2935314 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -5,49 +5,29 @@ import { jsx } from '@emotion/core';
 import { ChangeEvent, Component, MouseEvent } from 'react';
 import { observer } from 'mobx-react';
 
-import {
-  TextInput,
-  MemorableDateInput,
-  RadioGroup,
-  SelectDropdown,
-} from '@cityofboston/react-fleet';
-
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 import QuestionComponent from '../../common/question-components/QuestionComponent';
 import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import {
-  SECTION_HEADING_STYLING,
-  SECTION_WRAPPER_STYLING,
-  NAME_FIELDS_CONTAINER_STYLING,
-  NAME_FIELDS_BASIC_CONTAINER_STYLING,
-  HEADER_SPACING_STYLING,
-  RADIOGROUP_CONTAINER_STYLING,
-  HEADER_PADDING_TOP_STYLING,
-  OVERRIDE_SELECT_DISPLAY_STYLING,
-  MARRIAGE_INTENTION_FORM_STYLING,
-} from '../../common/question-components/styling';
+import { SECTION_HEADING_STYLING } from '../../common/question-components/styling';
 
 import {
-  ONE_AND_HALF_MARGINBOTTOM,
-  BOTTOM_SPACING_STYLING,
-  TWO_AND_HALF_MARGINBOTTOM,
-} from './styling';
-
-import {
-  // SEX_CHECKBOX,
-  BOOL_RADIOGROUP,
-  COUNTRIES,
-  PARTNERSHIP_TYPE_DISSOLVED,
   PARTNERSHIP_TYPE,
   MARRIAGE_COUNT,
-  US_STATES,
-  // LAST_MARRIAGE_STATUS,
   BOSTON_NEIGHBORHOODS,
-  SUFFIX_OPTIONS,
 } from './inputData';
 
-import { lastMarriageStatus, nameFields } from './partnerFormUI';
+import {
+  lastMarriageStatus,
+  nameFields,
+  dateOfBirth,
+  birthPlace,
+  residence,
+  bloodRelation,
+  parentsMarried,
+  parents,
+  partnershipType,
+} from './partnerFormUI';
 
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
@@ -71,7 +51,6 @@ export default class PartnerForm extends Component<Props> {
       partnerA_surName,
       partnerA_dob,
       partnerA_age,
-      // partnerA_sex,
       partnerA_occupation,
       partnerA_residenceAddress,
       partnerA_residenceCountry,
@@ -137,7 +116,6 @@ export default class PartnerForm extends Component<Props> {
       partnerA_surName &&
       partnerA_dob &&
       partnerA_age &&
-      // partnerA_sex &&
       partnerA_bloodRelation &&
       bloodRelReq &&
       partnerA_parentsMarriedAtBirth &&
@@ -417,13 +395,32 @@ export default class PartnerForm extends Component<Props> {
     const {
       partnerA_marriageNumb,
       partnerA_lastMarriageStatus,
-
       partnerA_firstName,
       partnerA_lastName,
       partnerA_middleName,
       partnerA_surName,
       partnerA_occupation,
       partnerA_suffix,
+      partnerA_dob,
+      partnerA_age,
+      partnerA_birthCountry,
+      partnerA_birthCity,
+      partnerA_birthState,
+      partnerA_residenceZip,
+      partnerA_residenceCity,
+      partnerA_residenceState,
+      partnerA_residenceAddress,
+      partnerA_residenceCountry,
+      partnerA_bloodRelation,
+      partnerA_bloodRelationDesc,
+      partnerA_parentsMarriedAtBirth,
+      partnerA_parentB_Surname,
+      partnerA_parentB_Name,
+      partnerA_parentA_Surname,
+      partnerA_parentA_Name,
+      partnerA_partnershipType,
+      partnerA_partnershipState,
+      partnerA_partnershipTypeDissolved,
     } = marriageIntentionCertificateRequest.requestInformation;
     const marriageNumb = MARRIAGE_COUNT.find(
       entry => entry.value === partnerA_marriageNumb
@@ -443,654 +440,85 @@ export default class PartnerForm extends Component<Props> {
             <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
           }
         >
-          {nameFields(
-            this.handleChange,
-            this.handleResidenceStateChange,
-            partnerA_firstName,
-            partnerA_lastName,
-            partnerA_middleName,
-            partnerA_surName,
-            partnerA_occupation,
-            partnerA_suffix
-          )}
-          {this.dateOfBirth()}
-          {this.birthPlace()}
-          {this.residence()}
+          {nameFields({
+            partnerFlag: partnerLabel,
+            handleChange: this.handleChange,
+            handleResidenceStateChange: this.handleResidenceStateChange,
+            firstName: partnerA_firstName,
+            lastName: partnerA_lastName,
+            middleName: partnerA_middleName,
+            surName: partnerA_surName,
+            occupation: partnerA_occupation,
+            suffix: partnerA_suffix,
+          })}
+          {dateOfBirth({
+            partnerDOB: partnerA_dob,
+            partnerAge: partnerA_age,
+            partnerFlag: partnerLabel,
+            handleChange: this.handleChange,
+            handleBirthDateChange: this.handleBirthDateChange,
+          })}
+          {birthPlace({
+            partnerFlag: partnerLabel,
+            birthCityStr: partnerA_birthCity,
+            birthCountryStr: partnerA_birthCountry,
+            birthStateStr: partnerA_birthState,
+            handleChange: this.handleChange,
+            handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
+            checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
+          })}
+          {residence({
+            partnerFlag: partnerLabel,
+            marriageNumb: partnerA_marriageNumb,
+            residenceZipStr: partnerA_residenceZip,
+            residenceCityStr: partnerA_residenceCity,
+            residenceStateStr: partnerA_residenceState,
+            residenceAddressStr: partnerA_residenceAddress,
+            residenceCountryStr: partnerA_residenceCountry,
+            handleChange: this.handleChange,
+            handleZipCodeChange: this.handleZipCodeChange,
+            replaceBosNeighborhoods: this.replaceBosNeighborhoods,
+            handleResidenceStateChange: this.handleResidenceStateChange,
+            handleResidenceCountryChange: this.handleResidenceCountryChange,
+          })}
 
           {marriageNumb &&
             marriageNumb.value !== MARRIAGE_COUNT[0].value &&
             lastMarriageStatus({
+              partnerFlag: partnerLabel,
               handleChange: this.handleChange,
-              partnerA_lastMarriageStatus: partnerA_lastMarriageStatus,
+              lastMarriageStatus: partnerA_lastMarriageStatus,
             })}
 
-          {this.partnershipType()}
-          {this.parents()}
-          {this.parentsMarried()}
-          {this.bloodRelation()}
+          {partnershipType({
+            partnerFlag: partnerLabel,
+            partnershipType: partnerA_partnershipType,
+            partnershipState: partnerA_partnershipState,
+            partnershipTypeDissolved: partnerA_partnershipTypeDissolved,
+            handleChange: this.handleChange,
+          })}
+          {parents({
+            partnerFlag: partnerLabel,
+            parentA_Name: partnerA_parentA_Name,
+            parentA_Surname: partnerA_parentA_Surname,
+            parentB_Name: partnerA_parentB_Name,
+            parentB_Surname: partnerA_parentB_Surname,
+            handleChange: this.handleChange,
+          })}
+          {parentsMarried({
+            partnerFlag: partnerLabel,
+            parentsMarriedAtBirth: partnerA_parentsMarriedAtBirth,
+            handleChange: this.handleChange,
+          })}
+          {bloodRelation({
+            partnerFlag: partnerLabel,
+            bloodRelation: partnerA_bloodRelation,
+            bloodRelationDesc: partnerA_bloodRelationDesc,
+            handleBloodRelChange: this.handleBloodRelChange,
+            handleBloodRelDescChange: this.handleBloodRelDescChange,
+          })}
         </FieldsetComponent>
       </QuestionComponent>
     );
   }
-
-  // UI ELEMENTS
-  // -----------
-
-  residenceState() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <div css={NAME_FIELDS_CONTAINER_STYLING}>
-          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Residence State"
-                  hideBlankOption
-                  options={US_STATES}
-                  name={'partnerA_residenceState'}
-                  value={partnerA_residenceState}
-                  onChange={this.handleResidenceStateChange}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceZip() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceZip,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Residence Zip Code"
-          name="partnerA_residenceZip"
-          value={partnerA_residenceZip}
-          onChange={this.handleZipCodeChange}
-          disableLabelNoWrap={true}
-          maxLength={10}
-          minLength={5}
-        />
-      </div>
-    );
-  }
-
-  residence() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceCountry,
-      partnerA_marriageNumb,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <h2 css={SECTION_HEADING_STYLING}>Residence</h2>
-        </div>
-
-        <div
-          css={[TWO_AND_HALF_MARGINBOTTOM, NAME_FIELDS_BASIC_CONTAINER_STYLING]}
-        >
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Select Country of Residence"
-                  // hideBlankOption
-                  options={COUNTRIES}
-                  name={'partnerA_residenceCountry'}
-                  value={partnerA_residenceCountry}
-                  onChange={this.handleResidenceCountryChange}
-                  disableLabelNoWrap={true}
-                />
-              </div>
-            </div>
-          </div>
-
-          {partnerA_residenceCountry === 'USA' && this.residenceState()}
-          {partnerA_residenceCountry && this.residenceCity()}
-          {partnerA_residenceCountry === 'USA' && this.residenceZip()}
-
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="This Marriage is your ..."
-                  // hideBlankOption
-                  options={MARRIAGE_COUNT}
-                  name={'partnerA_marriageNumb'}
-                  value={partnerA_marriageNumb}
-                  onChange={this.handleChange}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceCity() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceAddress,
-      partnerA_residenceCity,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Residence City/Town"
-          name="partnerA_residenceCity"
-          value={partnerA_residenceCity}
-          onChange={this.handleChange}
-          onBlur={this.replaceBosNeighborhoods}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
-          }
-          maxLength={100}
-        />
-
-        <TextInput
-          label="Residence Address"
-          name="partnerA_residenceAddress"
-          value={partnerA_residenceAddress}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            'Please include your apartment number if that applies.'
-          }
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  partnershipType() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_partnershipType,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            HEADER_SPACING_STYLING,
-            BOTTOM_SPACING_STYLING,
-          ]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>Were you ever a member of a ...</h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <RadioGroup
-              items={PARTNERSHIP_TYPE}
-              name="partnerA_partnershipType"
-              checkedValue={partnerA_partnershipType}
-              handleItemChange={this.handleChange}
-              groupLabel=""
-              hideLabel
-            />
-          </div>
-        </div>
-
-        {partnerA_partnershipType &&
-          (partnerA_partnershipType === 'CIV' ||
-            partnerA_partnershipType === 'DOM') &&
-          this.dissolved()}
-      </div>
-    );
-  }
-
-  dissolved() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_partnershipTypeDissolved,
-      partnerA_partnershipState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div
-        css={[
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          HEADER_SPACING_STYLING,
-          BOTTOM_SPACING_STYLING,
-        ]}
-      >
-        <h3 css={SECTION_HEADING_STYLING}>
-          Civil Union Or Domestic Partnership: Dissolved
-        </h3>
-
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <RadioGroup
-            items={PARTNERSHIP_TYPE_DISSOLVED}
-            name="partnerA_partnershipTypeDissolved"
-            checkedValue={partnerA_partnershipTypeDissolved}
-            handleItemChange={this.handleChange}
-            groupLabel=""
-            hideLabel
-          />
-        </div>
-
-        <TextInput
-          label="Partnership State/Country"
-          name="partnerA_partnershipState"
-          value={partnerA_partnershipState}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  bloodRelation() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_bloodRelation,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            Related by blood or marriage to Person B
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <div css={ONE_AND_HALF_MARGINBOTTOM}>
-              <RadioGroup
-                items={BOOL_RADIOGROUP}
-                name="partnerA_bloodRelation"
-                groupLabel=""
-                checkedValue={partnerA_bloodRelation}
-                handleItemChange={this.handleBloodRelChange}
-                hideLabel
-              />
-            </div>
-          </div>
-        </div>
-
-        {partnerA_bloodRelation === '1' && this.bloodRelDesc()}
-      </div>
-    );
-  }
-
-  bloodRelDesc() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_bloodRelationDesc,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-        <TextInput
-          label="Blood Relation: If yes, how?"
-          name="partnerA_bloodRelationDesc"
-          value={partnerA_bloodRelationDesc}
-          onChange={this.handleBloodRelDescChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  parentsMarried() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_parentsMarriedAtBirth,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            Were your parents married at the time of your birth?
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <div css={ONE_AND_HALF_MARGINBOTTOM}>
-              <RadioGroup
-                items={BOOL_RADIOGROUP}
-                groupLabel=""
-                name="partnerA_parentsMarriedAtBirth"
-                checkedValue={partnerA_parentsMarriedAtBirth}
-                handleItemChange={this.handleChange}
-                hideLabel
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  birthPlace() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthCountry,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>Birthplace</h2>
-
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <SelectDropdown
-              label="Birthplace Country"
-              // hideBlankOption
-              name={'partnerA_birthCountry'}
-              options={COUNTRIES}
-              value={partnerA_birthCountry}
-              onChange={this.handleBirthplaceCountryChange}
-              onBlur={this.checkBirthCityForNeighborhood}
-            />
-          </div>
-
-          {partnerA_birthCountry === 'USA' && this.birthStateZip()}
-          {partnerA_birthCountry && this.birthCity()}
-        </div>
-      </div>
-    );
-  }
-
-  birthCity() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthCity,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Birthplace City/Town"
-          name="partnerA_birthCity"
-          value={partnerA_birthCity}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          onBlur={this.checkBirthCityForNeighborhood}
-          optionalDescription={
-            'Please list the city/town where the hospital was located, not where your family was living.'
-          }
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  birthStateZip() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_CONTAINER_STYLING}>
-          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Birthplace State/Province"
-                  hideBlankOption
-                  options={US_STATES}
-                  name={'partnerA_birthState'}
-                  value={partnerA_birthState}
-                  onChange={this.handleChange}
-                  onBlur={this.checkBirthCityForNeighborhood}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  parents() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_parentA_Name,
-      partnerA_parentA_Surname,
-      partnerA_parentB_Name,
-      partnerA_parentB_Surname,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={[HEADER_SPACING_STYLING, HEADER_PADDING_TOP_STYLING]}>
-          <h2 css={SECTION_HEADING_STYLING}>Parents</h2>
-        </div>
-        <div
-          css={[
-            MARRIAGE_INTENTION_FORM_STYLING,
-            TWO_AND_HALF_MARGINBOTTOM,
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          ]}
-          style={{ marginBottom: '2.5em' }}
-        >
-          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 1/Mother</h4>
-
-          <TextInput
-            label="Parent 1/Mother - First Middle Last"
-            name="partnerA_parentA_Name"
-            value={partnerA_parentA_Name}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-          />
-
-          <TextInput
-            label="Parent 1/Mother - Maiden Name/Surname at Birth or Adoption"
-            name="partnerA_parentA_Surname"
-            value={partnerA_parentA_Surname}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-            optionalDescription={
-              "This should be your parent's last name at the time of their birth or adoption."
-            }
-          />
-        </div>
-
-        <div
-          css={[
-            MARRIAGE_INTENTION_FORM_STYLING,
-            TWO_AND_HALF_MARGINBOTTOM,
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          ]}
-          style={{ marginBottom: '2.5em' }}
-        >
-          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 2/Father</h4>
-
-          <TextInput
-            label="Parent 2/Father - First Middle Last"
-            name="partnerA_parentB_Name"
-            value={partnerA_parentB_Name}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-          />
-
-          <TextInput
-            label="Parent 2/Father - Maiden Name/Surname at Birth or Adoption"
-            name="partnerA_parentB_Surname"
-            value={partnerA_parentB_Surname}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-            optionalDescription={
-              "This should be your parent's last name at the time of their birth or adoption."
-            }
-          />
-        </div>
-      </div>
-    );
-  }
-
-  dateOfBirth() {
-    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
-    const {
-      partnerA_dob,
-      partnerA_age,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <h2 css={SECTION_HEADING_STYLING} style={{ marginBottom: '1.5rem' }}>
-            Date of Birth
-          </h2>
-          <MemorableDateInput
-            hideLengend={true}
-            legend={`Person ${partnerLabel} Date of Birth`}
-            initialDate={partnerA_dob || undefined}
-            componentId="dob"
-            onlyAllowPast={true}
-            handleDate={this.handleBirthDateChange}
-          />
-        </div>
-
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <TextInput
-            label="Age"
-            name="partnerA_age"
-            value={partnerA_age}
-            onChange={this.handleChange}
-            maxLength={2}
-            disabled={true}
-            disableLabelNoWrap={true}
-            optionalDescription={
-              'Your age will be automatically calculated based on your date of birth.'
-            }
-          />
-        </div>
-      </div>
-    );
-  }
-
-  nameFields() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_firstName,
-      partnerA_lastName,
-      partnerA_middleName,
-      partnerA_surName,
-      partnerA_occupation,
-      partnerA_suffix,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
-        <TextInput
-          label="First Name"
-          name="partnerA_firstName"
-          value={partnerA_firstName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-
-        <TextInput
-          label="Middle Name"
-          name="partnerA_middleName"
-          value={partnerA_middleName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            'This is your current middle name if you have one. You may not list a new middle name.'
-          }
-          maxLength={50}
-        />
-
-        <TextInput
-          label="Last Name"
-          name="partnerA_lastName"
-          value={partnerA_lastName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <TextInput
-            label="Last Name / SURNAME to be used after marriage"
-            name="partnerA_surName"
-            value={partnerA_surName}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            optionalDescription={
-              "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
-            }
-            maxLength={50}
-          />
-        </div>
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <SelectDropdown
-            label="Suffix"
-            // hideBlankOption
-            options={SUFFIX_OPTIONS}
-            name={'partnerA_suffix'}
-            value={partnerA_suffix}
-            onChange={this.handleResidenceStateChange}
-          />
-        </div>
-
-        <TextInput
-          label="Occupation"
-          name="partnerA_occupation"
-          value={partnerA_occupation}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
 }
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 4e241ddfc..97e14bd0d 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -5,48 +5,30 @@ import { jsx } from '@emotion/core';
 import { ChangeEvent, Component, MouseEvent } from 'react';
 import { observer } from 'mobx-react';
 
-import {
-  TextInput,
-  MemorableDateInput,
-  RadioGroup,
-  SelectDropdown,
-} from '@cityofboston/react-fleet';
-
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 import QuestionComponent from '../../common/question-components/QuestionComponent';
 import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import {
-  SECTION_HEADING_STYLING,
-  SECTION_WRAPPER_STYLING,
-  NAME_FIELDS_CONTAINER_STYLING,
-  NAME_FIELDS_BASIC_CONTAINER_STYLING,
-  HEADER_SPACING_STYLING,
-  RADIOGROUP_CONTAINER_STYLING,
-  HEADER_PADDING_TOP_STYLING,
-  OVERRIDE_SELECT_DISPLAY_STYLING,
-  MARRIAGE_INTENTION_FORM_STYLING,
-} from '../../common/question-components/styling';
-
-import {
-  ONE_AND_HALF_MARGINBOTTOM,
-  BOTTOM_SPACING_STYLING,
-  TWO_AND_HALF_MARGINBOTTOM,
-} from './styling';
+import { SECTION_HEADING_STYLING } from '../../common/question-components/styling';
 
 import {
-  // SEX_CHECKBOX,
-  BOOL_RADIOGROUP,
-  COUNTRIES,
-  PARTNERSHIP_TYPE_DISSOLVED,
   PARTNERSHIP_TYPE,
   MARRIAGE_COUNT,
-  US_STATES,
-  LAST_MARRIAGE_STATUS,
   BOSTON_NEIGHBORHOODS,
-  SUFFIX_OPTIONS,
 } from './inputData';
 
+import {
+  lastMarriageStatus,
+  nameFields,
+  dateOfBirth,
+  birthPlace,
+  residence,
+  bloodRelation,
+  parentsMarried,
+  parents,
+  partnershipType,
+} from './partnerFormUI';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
@@ -69,7 +51,6 @@ export default class PartnerForm extends Component<Props> {
       partnerB_surName,
       partnerB_dob,
       partnerB_age,
-      // partnerB_sex,
       partnerB_occupation,
       partnerB_residenceAddress,
       partnerB_residenceCountry,
@@ -135,7 +116,6 @@ export default class PartnerForm extends Component<Props> {
       partnerB_surName &&
       partnerB_dob &&
       partnerB_age &&
-      // partnerB_sex &&
       partnerB_bloodRelation &&
       bloodRelReq &&
       partnerB_parentsMarriedAtBirth &&
@@ -414,6 +394,33 @@ export default class PartnerForm extends Component<Props> {
     const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
     const {
       partnerB_marriageNumb,
+      partnerB_lastMarriageStatus,
+      partnerB_firstName,
+      partnerB_lastName,
+      partnerB_middleName,
+      partnerB_surName,
+      partnerB_occupation,
+      partnerB_suffix,
+      partnerB_dob,
+      partnerB_age,
+      partnerB_birthCountry,
+      partnerB_birthCity,
+      partnerB_birthState,
+      partnerB_residenceZip,
+      partnerB_residenceCity,
+      partnerB_residenceState,
+      partnerB_residenceAddress,
+      partnerB_residenceCountry,
+      partnerB_bloodRelation,
+      partnerB_bloodRelationDesc,
+      partnerB_parentsMarriedAtBirth,
+      partnerB_parentB_Surname,
+      partnerB_parentB_Name,
+      partnerB_parentA_Surname,
+      partnerB_parentA_Name,
+      partnerB_partnershipType,
+      partnerB_partnershipState,
+      partnerB_partnershipTypeDissolved,
     } = marriageIntentionCertificateRequest.requestInformation;
     const marriageNumb = MARRIAGE_COUNT.find(
       entry => entry.value === partnerB_marriageNumb
@@ -433,711 +440,85 @@ export default class PartnerForm extends Component<Props> {
             <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
           }
         >
-          {this.nameFields()}
-          {this.dateOfBirth()}
-          {this.birthPlace()}
-          {this.residence()}
+          {nameFields({
+            partnerFlag: partnerLabel,
+            handleChange: this.handleChange,
+            handleResidenceStateChange: this.handleResidenceStateChange,
+            firstName: partnerB_firstName,
+            lastName: partnerB_lastName,
+            middleName: partnerB_middleName,
+            surName: partnerB_surName,
+            occupation: partnerB_occupation,
+            suffix: partnerB_suffix,
+          })}
+          {dateOfBirth({
+            partnerDOB: partnerB_dob,
+            partnerAge: partnerB_age,
+            partnerFlag: partnerLabel,
+            handleChange: this.handleChange,
+            handleBirthDateChange: this.handleBirthDateChange,
+          })}
+          {birthPlace({
+            partnerFlag: partnerLabel,
+            birthCityStr: partnerB_birthCity,
+            birthCountryStr: partnerB_birthCountry,
+            birthStateStr: partnerB_birthState,
+            handleChange: this.handleChange,
+            handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
+            checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
+          })}
+          {residence({
+            partnerFlag: partnerLabel,
+            marriageNumb: partnerB_marriageNumb,
+            residenceZipStr: partnerB_residenceZip,
+            residenceCityStr: partnerB_residenceCity,
+            residenceStateStr: partnerB_residenceState,
+            residenceAddressStr: partnerB_residenceAddress,
+            residenceCountryStr: partnerB_residenceCountry,
+            handleChange: this.handleChange,
+            handleZipCodeChange: this.handleZipCodeChange,
+            replaceBosNeighborhoods: this.replaceBosNeighborhoods,
+            handleResidenceStateChange: this.handleResidenceStateChange,
+            handleResidenceCountryChange: this.handleResidenceCountryChange,
+          })}
 
           {marriageNumb &&
             marriageNumb.value !== MARRIAGE_COUNT[0].value &&
-            this.lastMarriageStatus()}
-
-          {this.partnershipType()}
-          {this.parents()}
-          {/* {this.sex()} */}
-          {this.parentsMarried()}
-          {this.bloodRelation()}
+            lastMarriageStatus({
+              partnerFlag: partnerLabel,
+              handleChange: this.handleChange,
+              lastMarriageStatus: partnerB_lastMarriageStatus,
+            })}
+
+          {partnershipType({
+            partnerFlag: partnerLabel,
+            partnershipType: partnerB_partnershipType,
+            partnershipState: partnerB_partnershipState,
+            partnershipTypeDissolved: partnerB_partnershipTypeDissolved,
+            handleChange: this.handleChange,
+          })}
+          {parents({
+            partnerFlag: partnerLabel,
+            parentA_Name: partnerB_parentA_Name,
+            parentA_Surname: partnerB_parentA_Surname,
+            parentB_Name: partnerB_parentB_Name,
+            parentB_Surname: partnerB_parentB_Surname,
+            handleChange: this.handleChange,
+          })}
+          {parentsMarried({
+            partnerFlag: partnerLabel,
+            parentsMarriedAtBirth: partnerB_parentsMarriedAtBirth,
+            handleChange: this.handleChange,
+          })}
+          {bloodRelation({
+            partnerFlag: partnerLabel,
+            bloodRelation: partnerB_bloodRelation,
+            bloodRelationDesc: partnerB_bloodRelationDesc,
+            handleBloodRelChange: this.handleBloodRelChange,
+            handleBloodRelDescChange: this.handleBloodRelDescChange,
+          })}
         </FieldsetComponent>
       </QuestionComponent>
     );
   }
-
-  // UI ELEMENTS
-  // -----------
-
-  lastMarriageStatus() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_lastMarriageStatus,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            HEADER_SPACING_STYLING,
-            BOTTOM_SPACING_STYLING,
-          ]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            If Applicable, Status of Last Marriage
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <RadioGroup
-              items={LAST_MARRIAGE_STATUS}
-              name="partnerB_lastMarriageStatus"
-              checkedValue={partnerB_lastMarriageStatus}
-              handleItemChange={this.handleChange}
-              groupLabel=""
-              hideLabel
-            />
-
-            <label className="notice">
-              If void, please provide clerk with evidence.
-            </label>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceState() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_residenceState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <div css={NAME_FIELDS_CONTAINER_STYLING}>
-          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Residence State"
-                  hideBlankOption
-                  options={US_STATES}
-                  name={'partnerB_residenceState'}
-                  value={partnerB_residenceState}
-                  onChange={this.handleResidenceStateChange}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceZip() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_residenceZip,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Residence Zip Code"
-          name="partnerB_residenceZip"
-          value={partnerB_residenceZip}
-          onChange={this.handleZipCodeChange}
-          disableLabelNoWrap={true}
-          maxLength={10}
-          minLength={5}
-        />
-      </div>
-    );
-  }
-
-  residence() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_residenceCountry,
-      partnerB_marriageNumb,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <h2 css={SECTION_HEADING_STYLING}>Residence</h2>
-        </div>
-
-        <div
-          css={[TWO_AND_HALF_MARGINBOTTOM, NAME_FIELDS_BASIC_CONTAINER_STYLING]}
-        >
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Select Country of Residence"
-                  // hideBlankOption
-                  options={COUNTRIES}
-                  name={'partnerB_residenceCountry'}
-                  value={partnerB_residenceCountry}
-                  onChange={this.handleResidenceCountryChange}
-                  disableLabelNoWrap={true}
-                />
-              </div>
-            </div>
-          </div>
-
-          {partnerB_residenceCountry === 'USA' && this.residenceState()}
-          {partnerB_residenceCountry && this.residenceCity()}
-          {partnerB_residenceCountry === 'USA' && this.residenceZip()}
-
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="This Marriage is your ..."
-                  // hideBlankOption
-                  options={MARRIAGE_COUNT}
-                  name={'partnerB_marriageNumb'}
-                  value={partnerB_marriageNumb}
-                  onChange={this.handleChange}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceCity() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_residenceAddress,
-      partnerB_residenceCity,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Residence City/Town"
-          name="partnerB_residenceCity"
-          value={partnerB_residenceCity}
-          onChange={this.handleChange}
-          onBlur={this.replaceBosNeighborhoods}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
-          }
-          maxLength={100}
-        />
-
-        <TextInput
-          label="Residence Address"
-          name="partnerB_residenceAddress"
-          value={partnerB_residenceAddress}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            'Please include your apartment number if that applies.'
-          }
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  partnershipType() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_partnershipType,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            HEADER_SPACING_STYLING,
-            BOTTOM_SPACING_STYLING,
-          ]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>Were you ever a member of a ...</h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <RadioGroup
-              items={PARTNERSHIP_TYPE}
-              name="partnerB_partnershipType"
-              checkedValue={partnerB_partnershipType}
-              handleItemChange={this.handleChange}
-              groupLabel=""
-              hideLabel
-            />
-          </div>
-        </div>
-
-        {partnerB_partnershipType &&
-          (partnerB_partnershipType === 'CIV' ||
-            partnerB_partnershipType === 'DOM') &&
-          this.dissolved()}
-      </div>
-    );
-  }
-
-  dissolved() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_partnershipTypeDissolved,
-      partnerB_partnershipState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div
-        css={[
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          HEADER_SPACING_STYLING,
-          BOTTOM_SPACING_STYLING,
-        ]}
-      >
-        <h3 css={SECTION_HEADING_STYLING}>
-          Civil Union Or Domestic Partnership: Dissolved
-        </h3>
-
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <RadioGroup
-            items={PARTNERSHIP_TYPE_DISSOLVED}
-            name="partnerB_partnershipTypeDissolved"
-            checkedValue={partnerB_partnershipTypeDissolved}
-            handleItemChange={this.handleChange}
-            groupLabel=""
-            hideLabel
-          />
-        </div>
-
-        <TextInput
-          label="Partnership State/Country"
-          name="partnerB_partnershipState"
-          value={partnerB_partnershipState}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  bloodRelation() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_bloodRelation,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            Related by blood or marriage to Person A
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <div css={ONE_AND_HALF_MARGINBOTTOM}>
-              <RadioGroup
-                items={BOOL_RADIOGROUP}
-                name="partnerB_bloodRelation"
-                groupLabel=""
-                checkedValue={partnerB_bloodRelation}
-                handleItemChange={this.handleBloodRelChange}
-                hideLabel
-              />
-            </div>
-          </div>
-        </div>
-
-        {partnerB_bloodRelation === '1' && this.bloodRelDesc()}
-      </div>
-    );
-  }
-
-  bloodRelDesc() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_bloodRelationDesc,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-        <TextInput
-          label="Blood Relation: If yes, how?"
-          name="partnerB_bloodRelationDesc"
-          value={partnerB_bloodRelationDesc}
-          onChange={this.handleBloodRelDescChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  parentsMarried() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_parentsMarriedAtBirth,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            Were your parents married at the time of your birth?
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <div css={ONE_AND_HALF_MARGINBOTTOM}>
-              <RadioGroup
-                items={BOOL_RADIOGROUP}
-                groupLabel=""
-                name="partnerB_parentsMarriedAtBirth"
-                checkedValue={partnerB_parentsMarriedAtBirth}
-                handleItemChange={this.handleChange}
-                hideLabel
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // sex() {
-  //   const { marriageIntentionCertificateRequest } = this.props;
-  //   const {
-  //     partnerB_sex,
-  //   } = marriageIntentionCertificateRequest.requestInformation;
-
-  //   return (
-  //     <div css={SECTION_WRAPPER_STYLING}>
-  //       <div
-  //         css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-  //       >
-  //         <h2 css={SECTION_HEADING_STYLING}>Sex</h2>
-
-  //         <div css={RADIOGROUP_CONTAINER_STYLING}>
-  //           <div css={ONE_AND_HALF_MARGINBOTTOM}>
-  //             <RadioGroup
-  //               items={SEX_CHECKBOX}
-  //               name="partnerB_sex"
-  //               groupLabel=""
-  //               checkedValue={partnerB_sex}
-  //               handleItemChange={this.handleChange}
-  //               hideLabel
-  //             />
-  //           </div>
-  //         </div>
-  //       </div>
-  //     </div>
-  //   );
-  // }
-
-  birthPlace() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_birthCountry,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>Birthplace</h2>
-
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <SelectDropdown
-              label="Birthplace Country"
-              // hideBlankOption
-              name={'partnerB_birthCountry'}
-              options={COUNTRIES}
-              value={partnerB_birthCountry}
-              onChange={this.handleBirthplaceCountryChange}
-              onBlur={this.checkBirthCityForNeighborhood}
-            />
-          </div>
-
-          {partnerB_birthCountry === 'USA' && this.birthStateZip()}
-          {partnerB_birthCountry && this.birthCity()}
-        </div>
-      </div>
-    );
-  }
-
-  birthCity() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_birthCity,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Birthplace City/Town"
-          name="partnerB_birthCity"
-          value={partnerB_birthCity}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          onBlur={this.checkBirthCityForNeighborhood}
-          optionalDescription={
-            'Please list the city/town where the hospital was located, not where your family was living.'
-          }
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  birthStateZip() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_birthState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_CONTAINER_STYLING}>
-          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Birthplace State/Province"
-                  hideBlankOption
-                  options={US_STATES}
-                  name={'partnerB_birthState'}
-                  value={partnerB_birthState}
-                  onChange={this.handleChange}
-                  onBlur={this.checkBirthCityForNeighborhood}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  parents() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_parentA_Name,
-      partnerB_parentA_Surname,
-      partnerB_parentB_Name,
-      partnerB_parentB_Surname,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={[HEADER_SPACING_STYLING, HEADER_PADDING_TOP_STYLING]}>
-          <h2 css={SECTION_HEADING_STYLING}>Parents</h2>
-        </div>
-        <div
-          css={[
-            MARRIAGE_INTENTION_FORM_STYLING,
-            TWO_AND_HALF_MARGINBOTTOM,
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          ]}
-          style={{ marginBottom: '2.5em' }}
-        >
-          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 1/Mother</h4>
-
-          <TextInput
-            label="Parent 1/Mother - First Middle Last"
-            name="partnerB_parentA_Name"
-            value={partnerB_parentA_Name}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-          />
-
-          <TextInput
-            label="Parent 1/Mother - Maiden Name/Surname at Birth or Adoption"
-            name="partnerB_parentA_Surname"
-            value={partnerB_parentA_Surname}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-            optionalDescription={
-              "This should be your parent's last name at the time of their birth or adoption."
-            }
-          />
-        </div>
-
-        <div
-          css={[
-            MARRIAGE_INTENTION_FORM_STYLING,
-            TWO_AND_HALF_MARGINBOTTOM,
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          ]}
-          style={{ marginBottom: '2.5em' }}
-        >
-          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 2/Father</h4>
-
-          <TextInput
-            label="Parent 2/Father - First Middle Last"
-            name="partnerB_parentB_Name"
-            value={partnerB_parentB_Name}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-          />
-
-          <TextInput
-            label="Parent 2/Father - Maiden Name/Surname at Birth or Adoption"
-            name="partnerB_parentB_Surname"
-            value={partnerB_parentB_Surname}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-            optionalDescription={
-              "This should be your parent's last name at the time of their birth or adoption."
-            }
-          />
-        </div>
-      </div>
-    );
-  }
-
-  dateOfBirth() {
-    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
-    const {
-      partnerB_dob,
-      partnerB_age,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <h2 css={SECTION_HEADING_STYLING} style={{ marginBottom: '1.5rem' }}>
-            Date of Birth
-          </h2>
-          <MemorableDateInput
-            hideLengend={true}
-            legend={`Person ${partnerLabel} Date of Birth`}
-            initialDate={partnerB_dob || undefined}
-            componentId="dob"
-            onlyAllowPast={true}
-            handleDate={this.handleBirthDateChange}
-          />
-        </div>
-
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <TextInput
-            label="Age"
-            name="partnerB_age"
-            value={partnerB_age}
-            onChange={this.handleChange}
-            maxLength={2}
-            disableLabelNoWrap={true}
-            optionalDescription={
-              'Your age will be automatically calculated based on your date of birth.'
-            }
-            disabled={true}
-          />
-        </div>
-      </div>
-    );
-  }
-
-  nameFields() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_firstName,
-      partnerB_lastName,
-      partnerB_middleName,
-      partnerB_surName,
-      partnerB_occupation,
-      partnerB_suffix,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
-        <TextInput
-          label="First Name"
-          name="partnerB_firstName"
-          value={partnerB_firstName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-
-        <TextInput
-          label="Middle Name"
-          name="partnerB_middleName"
-          value={partnerB_middleName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            'This is your current middle name if you have one. You may not list a new middle name.'
-          }
-          maxLength={50}
-        />
-
-        <TextInput
-          label="Last Name"
-          name="partnerB_lastName"
-          value={partnerB_lastName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <TextInput
-            label="Last Name / SURNAME to be used after marriage"
-            name="partnerB_surName"
-            value={partnerB_surName}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            optionalDescription={
-              "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
-            }
-            maxLength={50}
-          />
-        </div>
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <SelectDropdown
-            label="Suffix"
-            // hideBlankOption
-            options={SUFFIX_OPTIONS}
-            name={'partnerB_suffix'}
-            value={partnerB_suffix}
-            onChange={this.handleResidenceStateChange}
-          />
-        </div>
-
-        <TextInput
-          label="Occupation"
-          name="partnerB_occupation"
-          value={partnerB_occupation}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
 }
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index b615be3a8..443378ad7 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -5,43 +5,514 @@ import {
   RadioGroup,
   TextInput,
   SelectDropdown,
-  // MemorableDateInput,
+  MemorableDateInput,
 } from '@cityofboston/react-fleet';
 
 import {
   SECTION_HEADING_STYLING,
   SECTION_WRAPPER_STYLING,
-  // NAME_FIELDS_CONTAINER_STYLING,
+  NAME_FIELDS_CONTAINER_STYLING,
   NAME_FIELDS_BASIC_CONTAINER_STYLING,
   HEADER_SPACING_STYLING,
   RADIOGROUP_CONTAINER_STYLING,
-  // HEADER_PADDING_TOP_STYLING,
   OVERRIDE_SELECT_DISPLAY_STYLING,
-  // MARRIAGE_INTENTION_FORM_STYLING,
+  HEADER_PADDING_TOP_STYLING,
+  MARRIAGE_INTENTION_FORM_STYLING,
 } from '../../common/question-components/styling';
 
 import {
   BOTTOM_SPACING_STYLING,
-  // ONE_AND_HALF_MARGINBOTTOM,
-  // TWO_AND_HALF_MARGINBOTTOM,
+  ONE_AND_HALF_MARGINBOTTOM,
+  TWO_AND_HALF_MARGINBOTTOM,
 } from './styling';
 
 import {
   SUFFIX_OPTIONS,
   LAST_MARRIAGE_STATUS,
-  // BOOL_RADIOGROUP,
-  // COUNTRIES,
-  // PARTNERSHIP_TYPE_DISSOLVED,
-  // PARTNERSHIP_TYPE,
-  // MARRIAGE_COUNT,
-  // US_STATES,
-  // BOSTON_NEIGHBORHOODS,
+  US_STATES,
+  COUNTRIES,
+  MARRIAGE_COUNT,
+  BOOL_RADIOGROUP,
+  PARTNERSHIP_TYPE_DISSOLVED,
+  PARTNERSHIP_TYPE,
 } from './inputData';
 
+export const nameFields = (data: {
+  partnerFlag: string;
+  handleChange: ((e: any) => void) | undefined;
+  handleResidenceStateChange: ((e: any) => void) | undefined;
+  firstName: string;
+  lastName: string;
+  middleName: string;
+  surName: string;
+  occupation: string;
+  suffix: string;
+}) => {
+  const {
+    partnerFlag,
+    firstName,
+    lastName,
+    middleName,
+    surName,
+    occupation,
+    suffix,
+    handleChange,
+    handleResidenceStateChange,
+  } = data;
+  return (
+    <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+      <TextInput
+        label="First Name"
+        name={`partner${partnerFlag}_firstName`}
+        value={firstName}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
+
+      <TextInput
+        label="Middle Name"
+        name={`partner${partnerFlag}_middleName`}
+        value={middleName}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        optionalDescription={
+          'This is your current middle name if you have one. You may not list a new middle name.'
+        }
+        maxLength={50}
+      />
+
+      <TextInput
+        label="Last Name"
+        name={`partner${partnerFlag}_lastName`}
+        value={lastName}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
+
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          OVERRIDE_SELECT_DISPLAY_STYLING,
+        ]}
+      >
+        <TextInput
+          label="Last Name / SURNAME to be used after marriage"
+          name={`partner${partnerFlag}_surName`}
+          value={surName}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
+          }
+          maxLength={50}
+        />
+      </div>
+
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          OVERRIDE_SELECT_DISPLAY_STYLING,
+        ]}
+      >
+        <SelectDropdown
+          label="Suffix"
+          options={SUFFIX_OPTIONS}
+          name={`partner${partnerFlag}_suffix`}
+          value={suffix}
+          onChange={handleResidenceStateChange}
+        />
+      </div>
+
+      <TextInput
+        label="Occupation"
+        name={`partner${partnerFlag}_occupation`}
+        value={occupation}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
+    </div>
+  );
+};
+
+export const dateOfBirth = (data: {
+  partnerDOB: Date | null | undefined;
+  partnerAge: string;
+  partnerFlag: string;
+  handleChange: ((e: any) => void) | undefined;
+  handleBirthDateChange: (newDate: Date | null) => void;
+}) => {
+  const {
+    partnerDOB,
+    partnerAge,
+    partnerFlag,
+    handleChange,
+    handleBirthDateChange,
+  } = data;
+
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+        <h2 css={SECTION_HEADING_STYLING} style={{ marginBottom: '1.5rem' }}>
+          Date of Birth
+        </h2>
+        <MemorableDateInput
+          hideLengend={true}
+          legend={`Person ${partnerFlag} Date of Birth`}
+          initialDate={partnerDOB || undefined}
+          componentId="dob"
+          onlyAllowPast={true}
+          handleDate={handleBirthDateChange}
+        />
+      </div>
+
+      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+        <TextInput
+          label="Age"
+          name={`partner${partnerFlag}_age`}
+          value={partnerAge}
+          onChange={handleChange}
+          maxLength={2}
+          disabled={true}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            'Your age will be automatically calculated based on your date of birth.'
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export const birthCity = (data: {
+  partnerFlag: string;
+  birthCity: string;
+  handleChange: ((e: any) => void) | undefined;
+  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    birthCity,
+    handleChange,
+    checkBirthCityForNeighborhood,
+  } = data;
+
+  return (
+    <div>
+      <TextInput
+        label="Birthplace City/Town"
+        name={`partner${partnerFlag}_birthCity`}
+        value={birthCity}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        onBlur={checkBirthCityForNeighborhood}
+        optionalDescription={
+          'Please list the city/town where the hospital was located, not where your family was living.'
+        }
+        maxLength={100}
+      />
+    </div>
+  );
+};
+
+export const birthStateZip = (data: {
+  partnerFlag: string;
+  birthStateStr: string;
+  handleChange: ((e: any) => void) | undefined;
+  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    birthStateStr,
+    handleChange,
+    checkBirthCityForNeighborhood,
+  } = data;
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={NAME_FIELDS_CONTAINER_STYLING}>
+        <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
+          <div className="fs-c m-b300">
+            <div className="sel">
+              <SelectDropdown
+                label="Birthplace State/Province"
+                hideBlankOption
+                options={US_STATES}
+                name={`partner${partnerFlag}_birthState`}
+                value={birthStateStr}
+                onChange={handleChange}
+                onBlur={checkBirthCityForNeighborhood}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const birthPlace = (data: {
+  partnerFlag: string;
+  birthCityStr: string;
+  birthCountryStr: string;
+  birthStateStr: string;
+  handleChange: ((e: any) => void) | undefined;
+  handleBirthplaceCountryChange: ((e: any) => void) | undefined;
+  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
+}) => {
+  const {
+    birthCountryStr,
+    birthCityStr,
+    birthStateStr,
+    partnerFlag,
+    handleChange,
+    handleBirthplaceCountryChange,
+    checkBirthCityForNeighborhood,
+  } = data;
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
+        <h2 css={SECTION_HEADING_STYLING}>Birthplace</h2>
+
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+          ]}
+        >
+          <SelectDropdown
+            label="Birthplace Country"
+            name={`partner${partnerFlag}_birthCountry`}
+            options={COUNTRIES}
+            value={birthCountryStr}
+            onChange={handleBirthplaceCountryChange}
+            onBlur={checkBirthCityForNeighborhood}
+          />
+        </div>
+
+        {birthCountryStr === 'USA' &&
+          birthStateZip({
+            partnerFlag,
+            birthStateStr: birthStateStr,
+            handleChange,
+            checkBirthCityForNeighborhood,
+          })}
+        {birthCountryStr &&
+          birthCity({
+            partnerFlag,
+            birthCity: birthCityStr,
+            handleChange,
+            checkBirthCityForNeighborhood,
+          })}
+      </div>
+    </div>
+  );
+};
+
+export const residenceZip = (data: {
+  partnerFlag: string;
+  residenceZipStr: string;
+  handleZipCodeChange: ((e: any) => void) | undefined;
+}) => {
+  const { partnerFlag, residenceZipStr, handleZipCodeChange } = data;
+
+  return (
+    <div>
+      <TextInput
+        label="Residence Zip Code"
+        name={`partner${partnerFlag}_residenceZip`}
+        value={residenceZipStr}
+        onChange={handleZipCodeChange}
+        disableLabelNoWrap={true}
+        maxLength={10}
+        minLength={5}
+      />
+    </div>
+  );
+};
+
+export const residenceState = (data: {
+  partnerFlag: string;
+  residenceStateStr: string;
+  handleResidenceStateChange: ((e: any) => void) | undefined;
+}) => {
+  const { partnerFlag, residenceStateStr, handleResidenceStateChange } = data;
+
+  return (
+    <div>
+      <div css={NAME_FIELDS_CONTAINER_STYLING}>
+        <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
+          <div className="fs-c m-b300">
+            <div className="sel">
+              <SelectDropdown
+                label="Residence State"
+                hideBlankOption
+                options={US_STATES}
+                name={`partner${partnerFlag}_residenceState`}
+                value={residenceStateStr}
+                onChange={handleResidenceStateChange}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const residenceCity = (data: {
+  partnerFlag: string;
+  residenceCityStr: string;
+  residenceAddressStr: string;
+  handleChange: ((e: any) => void) | undefined;
+  replaceBosNeighborhoods: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    residenceCityStr,
+    residenceAddressStr,
+    handleChange,
+    replaceBosNeighborhoods,
+  } = data;
+
+  return (
+    <div>
+      <TextInput
+        label="Residence City/Town"
+        name={`partner${partnerFlag}_residenceCity`}
+        value={residenceCityStr}
+        onChange={handleChange}
+        onBlur={replaceBosNeighborhoods}
+        disableLabelNoWrap={true}
+        optionalDescription={
+          "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
+        }
+        maxLength={100}
+      />
+
+      <TextInput
+        label="Residence Address"
+        name={`partner${partnerFlag}_residenceAddress`}
+        value={residenceAddressStr}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        optionalDescription={
+          'Please include your apartment number if that applies.'
+        }
+        maxLength={100}
+      />
+    </div>
+  );
+};
+
+export const residence = (data: {
+  partnerFlag: string;
+  marriageNumb: string;
+  residenceZipStr: string;
+  residenceCityStr: string;
+  residenceStateStr: string;
+  residenceAddressStr: string;
+  residenceCountryStr: string;
+  handleChange: ((e: any) => void) | undefined;
+  handleZipCodeChange: ((e: any) => void) | undefined;
+  replaceBosNeighborhoods: ((e: any) => void) | undefined;
+  handleResidenceStateChange: ((e: any) => void) | undefined;
+  handleResidenceCountryChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    marriageNumb,
+    residenceZipStr,
+    residenceCityStr,
+    residenceStateStr,
+    residenceAddressStr,
+    residenceCountryStr,
+    handleChange,
+    handleZipCodeChange,
+    replaceBosNeighborhoods,
+    handleResidenceStateChange,
+    handleResidenceCountryChange,
+  } = data;
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+        <h2 css={SECTION_HEADING_STYLING}>Residence</h2>
+      </div>
+
+      <div
+        css={[TWO_AND_HALF_MARGINBOTTOM, NAME_FIELDS_BASIC_CONTAINER_STYLING]}
+      >
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+          ]}
+        >
+          <div className="fs-c m-b300">
+            <div className="sel">
+              <SelectDropdown
+                label="Select Country of Residence"
+                options={COUNTRIES}
+                name={`partner${partnerFlag}_residenceCountry`}
+                value={residenceCountryStr}
+                onChange={handleResidenceCountryChange}
+                disableLabelNoWrap={true}
+              />
+            </div>
+          </div>
+        </div>
+
+        {residenceCountryStr === 'USA' &&
+          residenceState({
+            partnerFlag,
+            residenceStateStr,
+            handleResidenceStateChange,
+          })}
+        {residenceCountryStr &&
+          residenceCity({
+            partnerFlag,
+            residenceCityStr,
+            residenceAddressStr,
+            handleChange,
+            replaceBosNeighborhoods,
+          })}
+        {residenceCountryStr === 'USA' &&
+          residenceZip({
+            partnerFlag,
+            residenceZipStr,
+            handleZipCodeChange,
+          })}
+
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+          ]}
+        >
+          <div className="fs-c m-b300">
+            <div className="sel">
+              <SelectDropdown
+                label="This Marriage is your ..."
+                options={MARRIAGE_COUNT}
+                name={`partner${partnerFlag}_marriageNumb`}
+                value={marriageNumb}
+                onChange={handleChange}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const lastMarriageStatus = (data: {
+  partnerFlag: string;
   handleChange: ((e: any) => void) | undefined;
-  partnerA_lastMarriageStatus: string;
+  lastMarriageStatus: string;
 }) => {
+  const { partnerFlag, handleChange, lastMarriageStatus } = data;
   return (
     <div css={SECTION_WRAPPER_STYLING}>
       <div
@@ -58,9 +529,9 @@ export const lastMarriageStatus = (data: {
         <div css={RADIOGROUP_CONTAINER_STYLING}>
           <RadioGroup
             items={LAST_MARRIAGE_STATUS}
-            name="partnerA_lastMarriageStatus"
-            checkedValue={data.partnerA_lastMarriageStatus}
-            handleItemChange={data.handleChange}
+            name={`partner${partnerFlag}_lastMarriageStatus`}
+            checkedValue={lastMarriageStatus}
+            handleItemChange={handleChange}
             groupLabel=""
             hideLabel
           />
@@ -74,87 +545,231 @@ export const lastMarriageStatus = (data: {
   );
 };
 
-export const nameFields = (
-  handleChange: ((e: any) => void) | undefined,
-  handleResidenceStateChange: ((e: any) => void) | undefined,
-  partnerA_firstName: string,
-  partnerA_lastName: string,
-  partnerA_middleName: string,
-  partnerA_surName: string,
-  partnerA_occupation: string,
-  partnerA_suffix: string
-) => {
+export const bloodRelation = (data: {
+  partnerFlag: string;
+  bloodRelation: string;
+  bloodRelationDesc: string;
+  handleBloodRelChange: ((e: any) => void) | undefined;
+  handleBloodRelDescChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    bloodRelation,
+    bloodRelationDesc,
+    handleBloodRelChange,
+    handleBloodRelDescChange,
+  } = data;
   return (
-    <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
-      <TextInput
-        label="First Name"
-        name="partnerA_firstName"
-        value={partnerA_firstName}
-        onChange={handleChange}
-        disableLabelNoWrap={true}
-        maxLength={100}
-      />
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
+        <h2 css={SECTION_HEADING_STYLING}>
+          Related by blood or marriage to Person B
+        </h2>
 
-      <TextInput
-        label="Middle Name"
-        name="partnerA_middleName"
-        value={partnerA_middleName}
-        onChange={handleChange}
-        disableLabelNoWrap={true}
-        optionalDescription={
-          'This is your current middle name if you have one. You may not list a new middle name.'
-        }
-        maxLength={50}
-      />
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <div css={ONE_AND_HALF_MARGINBOTTOM}>
+            <RadioGroup
+              items={BOOL_RADIOGROUP}
+              name={`partner${partnerFlag}_bloodRelation`}
+              groupLabel=""
+              checkedValue={bloodRelation}
+              handleItemChange={handleBloodRelChange}
+              hideLabel
+            />
+          </div>
+        </div>
+      </div>
+
+      {bloodRelation === '1' &&
+        bloodRelDesc({
+          partnerFlag,
+          bloodRelationDesc,
+          handleBloodRelDescChange,
+        })}
+    </div>
+  );
+};
+
+export const bloodRelDesc = (data: {
+  partnerFlag: string;
+  bloodRelationDesc: string;
+  handleBloodRelDescChange: ((e: any) => void) | undefined;
+}) => {
+  const { partnerFlag, bloodRelationDesc, handleBloodRelDescChange } = data;
 
+  return (
+    <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
       <TextInput
-        label="Last Name"
-        name="partnerA_lastName"
-        value={partnerA_lastName}
-        onChange={handleChange}
+        label="Blood Relation: If yes, how?"
+        name={`partner${partnerFlag}_bloodRelationDesc`}
+        value={bloodRelationDesc}
+        onChange={handleBloodRelDescChange}
         disableLabelNoWrap={true}
         maxLength={100}
       />
+    </div>
+  );
+};
+
+export const parentsMarried = (data: {
+  partnerFlag: string;
+  parentsMarriedAtBirth: string;
+  handleChange: ((e: any) => void) | undefined;
+}) => {
+  const { partnerFlag, parentsMarriedAtBirth, handleChange } = data;
+
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
+        <h2 css={SECTION_HEADING_STYLING}>
+          Were your parents married at the time of your birth?
+        </h2>
 
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <div css={ONE_AND_HALF_MARGINBOTTOM}>
+            <RadioGroup
+              items={BOOL_RADIOGROUP}
+              groupLabel=""
+              name={`partner${partnerFlag}_parentsMarriedAtBirth`}
+              checkedValue={parentsMarriedAtBirth}
+              handleItemChange={handleChange}
+              hideLabel
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const parents = (data: {
+  partnerFlag: string;
+  parentA_Name: string;
+  parentA_Surname: string;
+  parentB_Name: string;
+  parentB_Surname: string;
+  handleChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    parentA_Name,
+    parentA_Surname,
+    parentB_Name,
+    parentB_Surname,
+    handleChange,
+  } = data;
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={[HEADER_SPACING_STYLING, HEADER_PADDING_TOP_STYLING]}>
+        <h2 css={SECTION_HEADING_STYLING}>Parents</h2>
+      </div>
       <div
         css={[
+          MARRIAGE_INTENTION_FORM_STYLING,
+          TWO_AND_HALF_MARGINBOTTOM,
           NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          OVERRIDE_SELECT_DISPLAY_STYLING,
         ]}
+        style={{ marginBottom: '2.5em' }}
       >
+        <h4 css={SECTION_HEADING_STYLING}>Name of Parent 1/Mother</h4>
+
         <TextInput
-          label="Last Name / SURNAME to be used after marriage"
-          name="partnerA_surName"
-          value={partnerA_surName}
+          label="Parent 1/Mother - First Middle Last"
+          name={`partner${partnerFlag}_parentA_Name`}
+          value={parentA_Name}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          maxLength={38}
+        />
+
+        <TextInput
+          label="Parent 1/Mother - Maiden Name/Surname at Birth or Adoption"
+          name={`partner${partnerFlag}_parentA_Surname`}
+          value={parentA_Surname}
           onChange={handleChange}
           disableLabelNoWrap={true}
+          maxLength={38}
           optionalDescription={
-            "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
+            "This should be your parent's last name at the time of their birth or adoption."
           }
-          maxLength={50}
         />
       </div>
 
       <div
         css={[
+          MARRIAGE_INTENTION_FORM_STYLING,
+          TWO_AND_HALF_MARGINBOTTOM,
           NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          OVERRIDE_SELECT_DISPLAY_STYLING,
         ]}
+        style={{ marginBottom: '2.5em' }}
       >
-        <SelectDropdown
-          label="Suffix"
-          // hideBlankOption
-          options={SUFFIX_OPTIONS}
-          name={'partnerA_suffix'}
-          value={partnerA_suffix}
-          onChange={handleResidenceStateChange}
+        <h4 css={SECTION_HEADING_STYLING}>Name of Parent 2/Father</h4>
+
+        <TextInput
+          label="Parent 2/Father - First Middle Last"
+          name={`partner${partnerFlag}_parentB_Name`}
+          value={parentB_Name}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          maxLength={38}
+        />
+
+        <TextInput
+          label="Parent 2/Father - Maiden Name/Surname at Birth or Adoption"
+          name={`partner${partnerFlag}_parentB_Surname`}
+          value={parentB_Surname}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          maxLength={38}
+          optionalDescription={
+            "This should be your parent's last name at the time of their birth or adoption."
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+const dissolved = (data: {
+  partnerFlag: string;
+  partnershipState: string;
+  partnershipTypeDissolved: string;
+  handleChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    partnershipTypeDissolved,
+    partnershipState,
+    handleChange,
+  } = data;
+
+  return (
+    <div
+      css={[
+        NAME_FIELDS_BASIC_CONTAINER_STYLING,
+        HEADER_SPACING_STYLING,
+        BOTTOM_SPACING_STYLING,
+      ]}
+    >
+      <h3 css={SECTION_HEADING_STYLING}>
+        Civil Union Or Domestic Partnership: Dissolved
+      </h3>
+
+      <div css={RADIOGROUP_CONTAINER_STYLING}>
+        <RadioGroup
+          items={PARTNERSHIP_TYPE_DISSOLVED}
+          name={`partner${partnerFlag}_partnershipTypeDissolved`}
+          checkedValue={partnershipTypeDissolved}
+          handleItemChange={handleChange}
+          groupLabel=""
+          hideLabel
         />
       </div>
 
       <TextInput
-        label="Occupation"
-        name="partnerA_occupation"
-        value={partnerA_occupation}
+        label="Partnership State/Country"
+        name={`partner${partnerFlag}_partnershipState`}
+        value={partnershipState}
         onChange={handleChange}
         disableLabelNoWrap={true}
         maxLength={100}
@@ -162,3 +777,53 @@ export const nameFields = (
     </div>
   );
 };
+
+export const partnershipType = (data: {
+  partnerFlag: string;
+  partnershipType: string;
+  partnershipState: string;
+  partnershipTypeDissolved: string;
+  handleChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    partnershipType,
+    partnershipState,
+    partnershipTypeDissolved,
+    handleChange,
+  } = data;
+
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          HEADER_SPACING_STYLING,
+          BOTTOM_SPACING_STYLING,
+        ]}
+      >
+        <h2 css={SECTION_HEADING_STYLING}>Were you ever a member of a ...</h2>
+
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <RadioGroup
+            items={PARTNERSHIP_TYPE}
+            name={`partner${partnerFlag}_partnershipType`}
+            checkedValue={partnershipType}
+            handleItemChange={handleChange}
+            groupLabel=""
+            hideLabel
+          />
+        </div>
+      </div>
+
+      {partnershipType &&
+        (partnershipType === 'CIV' || partnershipType === 'DOM') &&
+        dissolved({
+          partnerFlag,
+          partnershipState,
+          partnershipTypeDissolved,
+          handleChange,
+        })}
+    </div>
+  );
+};

From 93c19d7f69a8fc1862fe2bc0ad054c93fd885257 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 23 Jan 2024 14:22:53 -0500
Subject: [PATCH 03/28] DIG-3449: UI/UX Update Registry Marriage Intention -
 Getting Started

---
 .../common/question-components/styling.tsx    | 44 +++++++++
 .../marriageintention/forms/instructions.tsx  | 98 +++++++++++--------
 2 files changed, 100 insertions(+), 42 deletions(-)

diff --git a/services-js/registry-certs/client/common/question-components/styling.tsx b/services-js/registry-certs/client/common/question-components/styling.tsx
index e776b769a..198b6dcbe 100644
--- a/services-js/registry-certs/client/common/question-components/styling.tsx
+++ b/services-js/registry-certs/client/common/question-components/styling.tsx
@@ -295,3 +295,47 @@ export const OVERRIDE_SELECT_DISPLAY_STYLING = css({
 
 export const NOTE_BOX_CLASSNAME = 'm-v500 p-a300 br br-a200 br--r lh--300';
 export const SUPPORTING_TEXT_CLASSNAME = 'lh--400 t--s400 m-b500';
+
+export const MARRIAGEINTENTION = css({
+  h1: {
+    paddingBottom: '0.25rem',
+    marginBottom: '0',
+    textTransform: 'uppercase',
+    fontFamily: `${SANS} !important`,
+    fontWeight: 700,
+    fontSize: '2rem',
+    fontStyle: 'normal',
+    color: CHARLES_BLUE,
+  },
+
+  h2: {
+    paddingBottom: '0.25rem',
+    marginBottom: '0',
+    textTransform: 'uppercase',
+    borderBottom: THICK_BORDER_STYLE,
+    fontFamily: `${SANS} !important`,
+    fontWeight: 700,
+    fontSize: '1.5rem',
+    fontStyle: 'normal',
+    color: CHARLES_BLUE,
+  },
+
+  '.getting-started': {
+    fontSize: '1rem',
+    marginBottom: '1.5rem',
+
+    '.emphasis': {
+      fontStyle: 'bold',
+      fontWeight: 700,
+    },
+
+    ul: {
+      marginBottom: '1rem',
+
+      li: {
+        listStyle: 'initial',
+        margin: '0.25rem 0 0.25rem 1.75rem',
+      },
+    },
+  },
+});
diff --git a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
index 4006a4fd7..f8f0a6ad0 100644
--- a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
@@ -9,10 +9,7 @@ import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCe
 
 import QuestionComponent from '../../common/question-components/QuestionComponent';
 
-import {
-  SECTION_HEADING_STYLING,
-  MARRIAGE_INTENTION_INTRO_BODY_STYLING,
-} from '../../common/question-components/styling';
+import { MARRIAGEINTENTION } from '../../common/question-components/styling';
 
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
@@ -22,6 +19,60 @@ interface Props {
 
 @observer
 export default class Instructions extends Component<Props> {
+  private $instructionsV2 = () => {
+    return (
+      <div css={MARRIAGEINTENTION}>
+        <h1>Before You Get Started</h1>
+        <div className={`getting-started`}>
+          <p>
+            <span className={`emphasis`}>
+              The information you provide in this application will help us
+              complete the marriage intention form, which is a legal document
+              that is important for the marriage license.
+            </span>{' '}
+            During your appointment, we will review and finalize the information
+            you share here and make sure everything's set before it is printed
+            onto your marriage intention form.
+          </p>
+          <p>
+            It should take about <span className={`emphasis`}>15 minutes</span>{' '}
+            to finish this application if you have all the information below. We
+            recommend that you and your partner fill this out together.
+          </p>
+        </div>
+
+        <h2>What We Need From You and Your Partner</h2>
+        <div className={`getting-started`}>
+          <ul>
+            <li>Legal names and last names you'll use after marriage</li>
+            <li>Birthdates and birthplaces</li>
+            <li>Residential addresses</li>
+            <li>
+              If you've been married before, how many times and the status of
+              your last marriage
+            </li>
+            <li>
+              If you've been in a civil union or domestic partnership before,
+              its location and status
+            </li>
+            <li>
+              Parents' names (including their family names) and whether they
+              were married when you were born
+            </li>
+          </ul>
+        </div>
+
+        <h2>Documents That Might Be Helpful</h2>
+        <div className={`getting-started`}>
+          <ul>
+            <li>A government-issued ID</li>
+            <li>A birth certificate</li>
+          </ul>
+        </div>
+      </div>
+    );
+  };
+
   public static isComplete(): boolean {
     return true;
   }
@@ -34,44 +85,7 @@ export default class Instructions extends Component<Props> {
         allowProceed={Instructions.isComplete()}
         nextButtonText={'START'}
       >
-        <h1 css={SECTION_HEADING_STYLING}>How to get started</h1>
-        <div css={MARRIAGE_INTENTION_INTRO_BODY_STYLING}>
-          <p>
-            After completing this form, you’ll review and finalize your
-            paperwork with the Registry Department at your appointment. Both you
-            and your partner must come to this appointment. You will need to
-            provide us:
-          </p>
-          <ul>
-            <li>your social security numbers (if you have them)</li>
-            <li>your IDs, and</li>
-            <li>payment for a $50 application fee.</li>
-          </ul>
-          <p>
-            We accept cash, credit, or a money order made payable to the "City
-            of Boston".{' '}
-            <a href="https://www.boston.gov/departments/registry/how-get-married-boston">
-              Visit our website
-            </a>{' '}
-            for more information about marriage requirements.
-          </p>
-          <p>
-            After you finalize your paperwork at your appointment, we will issue
-            your marriage license and put in the mail three days later. It will
-            be sent to the address listed under Person A. Your license will
-            expire 60 days from the date of your appointment.
-          </p>
-
-          <p>Please Note:</p>
-          <ul>
-            <li>Both persons must be over age 18 and be free to marry.</li>
-            <li>
-              You must have a valid marriage license and be married in
-              Massachusetts by a person eligible to perform weddings in
-              Massachusetts.
-            </li>
-          </ul>
-        </div>
+        {this.$instructionsV2()}
       </QuestionComponent>
     );
   }

From 2d12cd51aeeb061febe47e85869cb06e6c245d24 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 23 Jan 2024 16:18:38 -0500
Subject: [PATCH 04/28] DIG-3256/3953: Fix Storybook For Marriage Intention
 Form

---
 .../registry-certs/.storybook/config.js       |    54 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 31714 ++++++++--------
 2 files changed, 15889 insertions(+), 15879 deletions(-)

diff --git a/services-js/registry-certs/.storybook/config.js b/services-js/registry-certs/.storybook/config.js
index 4264f9757..7a83167c7 100644
--- a/services-js/registry-certs/.storybook/config.js
+++ b/services-js/registry-certs/.storybook/config.js
@@ -1,59 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-// eslint-disable-next-line no-unused-vars
-import Head from 'next/head';
+import { configure, addDecorator, addParameters } from '@storybook/react';
 import { setConfig } from 'next/config';
-import { createRouter } from 'next/router';
-
-import HeadManager from 'next/dist/client/head-manager';
-import { addParameters, configure, addDecorator } from '@storybook/react';
-
 import { loadStories, storybookOptions } from '@cityofboston/storybook-common';
-
-import styleTags from '../client/common/utility/style-tags';
-
 import './addons';
 
-const headManager = new HeadManager();
-
-const router =
-  process.env.NODE_ENV === 'test' ? null : createRouter('/', null, null);
-
-class Wrapper extends React.Component {
-  getChildContext() {
-    return {
-      headManager: this.props.headManager,
-      router,
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        {/* no stylesheets because they come in preview-head.html */}
-        <Head>{styleTags({ noStylesheets: true })}</Head>
-
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-Wrapper.propTypes = {
-  headManager: PropTypes.any,
-  children: PropTypes.any,
-};
-
-Wrapper.childContextTypes = {
-  headManager: PropTypes.object,
-  router: PropTypes.object,
-};
-
 const clientStoriesContext = require.context(
   '../client',
   true,
-  /.stories\.(jsx?|tsx?)$/
+  /\.stories\.(jsx?|tsx?)$/
 );
+
 const serverStoriesContext = require.context(
   '../server',
   true,
@@ -71,12 +26,11 @@ addDecorator(story => {
   });
 
   if (window.parent) {
-    // eslint-disable-next-line no-underscore-dangle
     window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ =
       window.parent.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
   }
 
-  return <Wrapper headManager={headManager}>{story()}</Wrapper>;
+  return story();
 });
 
 configure(
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 54fafc864..e68d00722 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -1,7 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Birth/CheckoutPage confirmation 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -79,73 +145,7 @@ exports[`Storyshots Birth/CheckoutPage confirmation 1`] = `
   stroke: none;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -586,7 +586,7 @@ exports[`Storyshots Birth/CheckoutPage confirmation 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -633,31 +633,12 @@ exports[`Storyshots Birth/CheckoutPage confirmation 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/CheckoutPage no birth certificate request 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 38px;
-  }
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -670,14 +651,14 @@ exports[`Storyshots Birth/CheckoutPage no birth certificate request 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -722,8 +703,27 @@ exports[`Storyshots Birth/CheckoutPage no birth certificate request 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 38px;
+  }
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -929,7 +929,7 @@ exports[`Storyshots Birth/CheckoutPage no birth certificate request 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -976,90 +976,12 @@ exports[`Storyshots Birth/CheckoutPage no birth certificate request 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/CheckoutPage payment 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 38px;
-  }
-}
-
-.emotion-3 progress {
-  margin: 1rem 0 0.25rem;
-  width: 100%;
-  height: 1rem;
-  border: 2px solid #091f2f;
-  background-color: #fff;
-}
-
-.emotion-3 progress::-webkit-progress-bar {
-  background-color: #fff;
-}
-
-.emotion-3 progress::-webkit-progress-value {
-  -webkit-transition: width 0.5s;
-  transition: width 0.5s;
-  background-color: #288be4;
-}
-
-.emotion-3 progress::-moz-progress-bar {
-  background-color: #288be4;
-}
-
-.emotion-3 progress::-ms-fill {
-  background-color: #288be4;
-}
-
-.emotion-3 span {
-  font-style: italic;
-}
-
-.emotion-4 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-4.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
-}
-
-.emotion-4.secondary em {
-  font-size: 1rem;
-}
-
-.emotion-7 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-6 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -1072,14 +994,14 @@ exports[`Storyshots Birth/CheckoutPage payment 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -1124,8 +1046,86 @@ exports[`Storyshots Birth/CheckoutPage payment 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 38px;
+  }
+}
+
+.emotion-3 progress {
+  margin: 1rem 0 0.25rem;
+  width: 100%;
+  height: 1rem;
+  border: 2px solid #091f2f;
+  background-color: #fff;
+}
+
+.emotion-3 progress::-webkit-progress-bar {
+  background-color: #fff;
+}
+
+.emotion-3 progress::-webkit-progress-value {
+  -webkit-transition: width 0.5s;
+  transition: width 0.5s;
+  background-color: #288be4;
+}
+
+.emotion-3 progress::-moz-progress-bar {
+  background-color: #288be4;
+}
+
+.emotion-3 progress::-ms-fill {
+  background-color: #288be4;
+}
+
+.emotion-3 span {
+  font-style: italic;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-7 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-6 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -1599,7 +1599,7 @@ exports[`Storyshots Birth/CheckoutPage payment 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -1646,12 +1646,78 @@ exports[`Storyshots Birth/CheckoutPage payment 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/CheckoutPage review 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -1763,73 +1829,7 @@ exports[`Storyshots Birth/CheckoutPage review 1`] = `
   font-size: 80%;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -2451,7 +2451,7 @@ exports[`Storyshots Birth/CheckoutPage review 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -2498,31 +2498,12 @@ exports[`Storyshots Birth/CheckoutPage review 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/CheckoutPage server-side render 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 38px;
-  }
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -2535,14 +2516,14 @@ exports[`Storyshots Birth/CheckoutPage server-side render 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -2587,8 +2568,27 @@ exports[`Storyshots Birth/CheckoutPage server-side render 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 38px;
+  }
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -2776,7 +2776,7 @@ exports[`Storyshots Birth/CheckoutPage server-side render 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -2823,12 +2823,78 @@ exports[`Storyshots Birth/CheckoutPage server-side render 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/CheckoutPage shipping 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -2906,73 +2972,7 @@ exports[`Storyshots Birth/CheckoutPage shipping 1`] = `
   padding: 0;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -3943,7 +3943,7 @@ exports[`Storyshots Birth/CheckoutPage shipping 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -3990,8 +3990,8 @@ exports[`Storyshots Birth/CheckoutPage shipping 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/Question Components/BornInBoston initial question 1`] = `
@@ -4239,193 +4239,191 @@ exports[`Storyshots Birth/Question Components/BornInBoston initial question 1`]
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="bornInBoston"
+        >
+          Were 
+          they
+           born in Boston?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="bornInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="bornInBoston"
-          >
-            Were 
-            they
-             born in Boston?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="bornInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className="  emotion-2"
         >
-          <label
-            className="  emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      
-    </div>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -4676,346 +4674,344 @@ exports[`Storyshots Birth/Question Components/BornInBoston may not have record 1
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-18"
   >
-    <div
-      className="emotion-18"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="bornInBoston"
+        >
+          Were 
+          they
+           born in Boston?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="bornInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="bornInBoston"
-          >
-            Were 
-            they
-             born in Boston?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="bornInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <fieldset
-        className=" emotion-8"
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <fieldset
+      className=" emotion-8"
+    >
+      <legend>
+        <h3
+          className="emotion-0"
+          id="parentsLivedInBoston"
+        >
+          Did 
+          their
+           parents live in Boston at the time of 
+          their
+           birth?
+        </h3>
+      </legend>
+      <div
+        aria-labelledby="parentsLivedInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h3
-            className="emotion-0"
-            id="parentsLivedInBoston"
-          >
-            Did 
-            their
-             parents live in Boston at the time of 
-            their
-             birth?
-          </h3>
-        </legend>
-        <div
-          aria-labelledby="parentsLivedInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
         }
+      }
+    >
+      <h2
+        className="h3 tt-u"
       >
-        <h2
-          className="h3 tt-u"
-        >
-          We might not have their record
-        </h2>
-        <p>
-          We only have records for people born in the City of Boston, or people whose parents were married and living in Boston at the time of the birth.
-        </p>
-        <p>
-          You can still place this order, and we’ll do our best to help you out.
-        </p>
-      </div>
+        We might not have their record
+      </h2>
+      <p>
+        We only have records for people born in the City of Boston, or people whose parents were married and living in Boston at the time of the birth.
+      </p>
+      <p>
+        You can still place this order, and we’ll do our best to help you out.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-20"
+  >
     <div
-      className="g g--mr emotion-20"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-19"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-19"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -5266,326 +5262,324 @@ exports[`Storyshots Birth/Question Components/BornInBoston secondary question 1`
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-18"
   >
-    <div
-      className="emotion-18"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="bornInBoston"
+        >
+          Were 
+          they
+           born in Boston?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="bornInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="bornInBoston"
-          >
-            Were 
-            they
-             born in Boston?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="bornInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <fieldset
-        className=" emotion-8"
-      >
-        <legend>
-          <h3
-            className="emotion-0"
-            id="parentsLivedInBoston"
-          >
-            Did 
-            their
-             parents live in Boston at the time of 
-            their
-             birth?
-          </h3>
-        </legend>
-        <div
-          aria-labelledby="parentsLivedInBoston"
-          className="emotion-7"
-          role="radiogroup"
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className="  emotion-2"
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+              <line
+                x2="22.629"
+                y1="22.629"
               />
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <fieldset
+      className=" emotion-8"
+    >
+      <legend>
+        <h3
+          className="emotion-0"
+          id="parentsLivedInBoston"
+        >
+          Did 
+          their
+           parents live in Boston at the time of 
+          their
+           birth?
+        </h3>
+      </legend>
+      <div
+        aria-labelledby="parentsLivedInBoston"
+        className="emotion-7"
+        role="radiogroup"
+      >
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
-            />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-20"
+  >
     <div
-      className="g g--mr emotion-20"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-19"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-19"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -5836,348 +5830,346 @@ exports[`Storyshots Birth/Question Components/BornInBoston will not have record
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-18"
   >
-    <div
-      className="emotion-18"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="bornInBoston"
+        >
+          Were 
+          they
+           born in Boston?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="bornInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="bornInBoston"
-          >
-            Were 
-            they
-             born in Boston?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="bornInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="bornInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
             />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <fieldset
-        className=" emotion-8"
-      >
-        <legend>
-          <h3
-            className="emotion-0"
-            id="parentsLivedInBoston"
-          >
-            Did 
-            their
-             parents live in Boston at the time of 
-            their
-             birth?
-          </h3>
-        </legend>
-        <div
-          aria-labelledby="parentsLivedInBoston"
-          className="emotion-7"
-          role="radiogroup"
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="parentsLivedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
-        }
-      >
-        <h2
-          className="h3 tt-u"
-        >
-          Sorry, we don’t have their record
-        </h2>
-        <p>
-          We only have records for people born in the City of Boston, or people whose parents were married and living in Boston at the time of the birth.
-        </p>
-        <p>
-          Please contact the town, city, state, or country where
-           
-          they
-           were born to find the record.
-        </p>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="bornInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
       </div>
-    </div>
-    <div
-      className="g g--mr emotion-20"
+    </fieldset>
+    <fieldset
+      className=" emotion-8"
     >
+      <legend>
+        <h3
+          className="emotion-0"
+          id="parentsLivedInBoston"
+        >
+          Did 
+          their
+           parents live in Boston at the time of 
+          their
+           birth?
+        </h3>
+      </legend>
       <div
-        className="t--info g--6 m-b500"
+        aria-labelledby="parentsLivedInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <button
-          className="lnk emotion-19"
-          onClick={[Function]}
-          type="button"
+        <label
+          className=" inactive emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
+            >
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
+              />
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
+            >
+              <line
+                x2="22.629"
+                y2="22.629"
+              />
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="parentsLivedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
+        }
+      }
+    >
+      <h2
+        className="h3 tt-u"
+      >
+        Sorry, we don’t have their record
+      </h2>
+      <p>
+        We only have records for people born in the City of Boston, or people whose parents were married and living in Boston at the time of the birth.
+      </p>
+      <p>
+        Please contact the town, city, state, or country where
+         
+        they
+         were born to find the record.
+      </p>
+    </div>
+  </div>
+  <div
+    className="g g--mr emotion-20"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    >
+      <button
+        className="lnk emotion-19"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          onClick={[Function]}
-          type="button"
-        >
-          Start over
-        </button>
-      </div>
+        Start over
+      </button>
     </div>
   </div>
 </div>
@@ -6249,102 +6241,100 @@ exports[`Storyshots Birth/Question Components/ClientInstructions default 1`] = `
   padding-left: 0 !important;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-1"
   >
     <div
-      className="emotion-1"
+      className="m-t500"
     >
+      <h2
+        className="emotion-0"
+      >
+        You must complete this process in person or by mail
+      </h2>
       <div
-        className="m-t500"
+        className="lh--400"
       >
-        <h2
-          className="emotion-0"
-        >
-          You must complete this process in person or by mail
-        </h2>
-        <div
-          className="lh--400"
-        >
-          <p>
-            If you are an attorney making a request for a client, you need these items to get a record:
-          </p>
-          <ol>
-            <li>
-              A letter on letterhead stating you legally represent the person for whom you are requesting a record
-            </li>
-            <li>
-              A photocopy of your ID (state-issued ID, driver’s license, or government-issued ID), and
-            </li>
-            <li>
-              A copy of your BAR card (must be in good standing and not expired)
-            </li>
-          </ol>
-          <p>
-            You must complete this process in person at Boston City Hall or by mail. In person, the cost per request is $12. We take cash, credit or debit cards, checks, or money orders. By mail, the cost per request is $14. We accept checks or money orders payable to the City of Boston.
-          </p>
-          <p>
-            For more information, you can email us at
-             
-            <a
-              href="mailto:birth@boston.gov"
-              onClick={[Function]}
-            >
-              birth
-              @boston.gov
-            </a>
-            .
-          </p>
-          <p>
-            <strong
-              className="t--sans tt-u"
-            >
-              Please note:
-            </strong>
-             If you are a legal representative and making a mail request, we will only return the record to your address.
-          </p>
-        </div>
+        <p>
+          If you are an attorney making a request for a client, you need these items to get a record:
+        </p>
+        <ol>
+          <li>
+            A letter on letterhead stating you legally represent the person for whom you are requesting a record
+          </li>
+          <li>
+            A photocopy of your ID (state-issued ID, driver’s license, or government-issued ID), and
+          </li>
+          <li>
+            A copy of your BAR card (must be in good standing and not expired)
+          </li>
+        </ol>
+        <p>
+          You must complete this process in person at Boston City Hall or by mail. In person, the cost per request is $12. We take cash, credit or debit cards, checks, or money orders. By mail, the cost per request is $14. We accept checks or money orders payable to the City of Boston.
+        </p>
+        <p>
+          For more information, you can email us at
+           
+          <a
+            href="mailto:birth@boston.gov"
+            onClick={[Function]}
+          >
+            birth
+            @boston.gov
+          </a>
+          .
+        </p>
+        <p>
+          <strong
+            className="t--sans tt-u"
+          >
+            Please note:
+          </strong>
+           If you are a legal representative and making a mail request, we will only return the record to your address.
+        </p>
       </div>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-3"
+  >
     <div
-      className="g g--mr emotion-3"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-2"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-2"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
-      />
+           
+          Back
+        </span>
+      </button>
     </div>
+    <div
+      className="g--6 ta-r m-b500"
+    />
   </div>
 </div>
 `;
@@ -6588,132 +6578,130 @@ exports[`Storyshots Birth/Question Components/ForWhom default 1`] = `
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-7"
   >
-    <div
-      className="emotion-7"
+    <fieldset
+      className=" emotion-6"
     >
-      <fieldset
-        className=" emotion-6"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="forSelf"
+        >
+          Whose birth certificate are you ordering?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="forSelf"
+        className="emotion-5"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="forSelf"
-          >
-            Whose birth certificate are you ordering?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="forSelf"
-          className="emotion-5"
-          role="radiogroup"
+        <label
+          className="  emotion-2"
         >
-          <label
-            className="  emotion-2"
+          <svg
+            aria-hidden="true"
+            className="forWhom heavier emotion-1"
+            focusable="false"
+            viewBox="-26 -4 100 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="forWhom heavier emotion-1"
-              focusable="false"
-              viewBox="-26 -4 100 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="true"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Mine
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="true"
+          />
+          <span>
+            Mine
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="forOther heavier emotion-1"
+            focusable="false"
+            viewBox="-2 -4 140 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="forOther heavier emotion-1"
-              focusable="false"
-              viewBox="-2 -4 140 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-              <path
-                d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
-                transform="translate(-1.669 -29.65)"
-              />
-              <line
-                strokeWidth="4"
-                transform="translate(55.514 68.46)"
-                x2="15.928"
-              />
-              <path
-                d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
-                fill="currentColor"
-                transform="translate(-3.812 -26.73)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="false"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Someone else’s
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+            <path
+              d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
+              transform="translate(-1.669 -29.65)"
+            />
+            <line
+              strokeWidth="4"
+              transform="translate(55.514 68.46)"
+              x2="15.928"
+            />
+            <path
+              d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
+              fill="currentColor"
+              transform="translate(-3.812 -26.73)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="false"
+          />
+          <span>
+            Someone else’s
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-8"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    />
     <div
-      className="g g--mr emotion-8"
+      className="g--6 ta-r m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
-      />
-      <div
-        className="g--6 ta-r m-b500"
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -7039,496 +7027,494 @@ exports[`Storyshots Birth/Question Components/ForWhom someone else’s 1`] = `
 }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-22"
   >
-    <div
-      className="emotion-22"
+    <fieldset
+      className=" emotion-6"
     >
-      <fieldset
-        className=" emotion-6"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="forSelf"
+        >
+          Whose birth certificate are you ordering?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="forSelf"
+        className="emotion-5"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="forSelf"
-          >
-            Whose birth certificate are you ordering?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="forSelf"
-          className="emotion-5"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="forWhom heavier emotion-1"
+            focusable="false"
+            viewBox="-26 -4 100 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="forWhom heavier emotion-1"
-              focusable="false"
-              viewBox="-26 -4 100 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="true"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Mine
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="forOther heavier emotion-1"
-              focusable="false"
-              viewBox="-2 -4 140 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-              <path
-                d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
-                transform="translate(-1.669 -29.65)"
-              />
-              <line
-                strokeWidth="4"
-                transform="translate(55.514 68.46)"
-                x2="15.928"
-              />
-              <path
-                d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
-                fill="currentColor"
-                transform="translate(-3.812 -26.73)"
-              />
-            </svg>
-            <input
-              checked={true}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="false"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
             />
-            <span>
-              Someone else’s
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <fieldset
-        className=" emotion-6"
-      >
-        <legend>
-          <h3
-            className="emotion-0"
-            id="howRelated"
-          >
-            I’m ordering the birth certificate of my…
-          </h3>
-        </legend>
-        <div
-          aria-labelledby="howRelated"
-          className="birth emotion-20"
-          role="radiogroup"
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="true"
+          />
+          <span>
+            Mine
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
         >
-          <label
-            className="  emotion-2"
+          <svg
+            aria-hidden="true"
+            className="forOther heavier emotion-1"
+            focusable="false"
+            viewBox="-2 -4 140 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="spouse emotion-1"
-              focusable="false"
-              viewBox="-1.5 -2 96 86"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="27.216"
-                cy="27.216"
-                rx="27.216"
-                ry="27.216"
-                transform="translate(2.704 23.465)"
-              />
-              <ellipse
-                cx="27.216"
-                cy="27.216"
-                rx="27.216"
-                ry="27.216"
-                transform="translate(34.457 23.465)"
-              />
-              <path
-                d="M47.471,81.511a30.308,30.308,0,1,1,6.019-4.449m-5.583-3.576a24.325,24.325,0,1,0-15.7,5.757,23.634,23.634,0,0,0,9.6-2.006"
-                fill="none"
-                transform="translate(-1.5 -4.398)"
-              />
-              <path
-                d="M52.889,28.138a30.771,30.771,0,1,1-6.8,5.147m6.106,2.966a24.273,24.273,0,1,0,15.527-5.67,24.048,24.048,0,0,0-9.683,2.006"
-                fill="none"
-                transform="translate(-6.045 -4.411)"
-              />
-              <path
-                d="M47.187,9.089,40.993,1.5h-12.3L22.5,9.089l7.764,12.3h9.159Z"
-                transform="translate(-4.181 -1.5)"
-              />
-              <path
-                d="M84.587,9.089,78.393,1.5h-12.3L59.9,9.089l7.764,12.3h9.159Z"
-                transform="translate(-8.957 -1.5)"
-              />
-              <line
-                transform="translate(18.319 7.589)"
-                x2="24.687"
-              />
-              <line
-                transform="translate(50.943 7.589)"
-                x2="24.687"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="howRelated"
-              onChange={[Function]}
-              type="radio"
-              value="spouse"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Spouse
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+            <path
+              d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
+              transform="translate(-1.669 -29.65)"
+            />
+            <line
+              strokeWidth="4"
+              transform="translate(55.514 68.46)"
+              x2="15.928"
+            />
+            <path
+              d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
+              fill="currentColor"
+              transform="translate(-3.812 -26.73)"
+            />
+          </svg>
+          <input
+            checked={true}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="false"
+          />
+          <span>
+            Someone else’s
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <fieldset
+      className=" emotion-6"
+    >
+      <legend>
+        <h3
+          className="emotion-0"
+          id="howRelated"
+        >
+          I’m ordering the birth certificate of my…
+        </h3>
+      </legend>
+      <div
+        aria-labelledby="howRelated"
+        className="birth emotion-20"
+        role="radiogroup"
+      >
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="spouse emotion-1"
+            focusable="false"
+            viewBox="-1.5 -2 96 86"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="child emotion-1"
-              focusable="false"
-              viewBox="-26 -3 89 89"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="27.216"
+              cy="27.216"
+              rx="27.216"
+              ry="27.216"
+              transform="translate(2.704 23.465)"
+            />
+            <ellipse
+              cx="27.216"
+              cy="27.216"
+              rx="27.216"
+              ry="27.216"
+              transform="translate(34.457 23.465)"
+            />
+            <path
+              d="M47.471,81.511a30.308,30.308,0,1,1,6.019-4.449m-5.583-3.576a24.325,24.325,0,1,0-15.7,5.757,23.634,23.634,0,0,0,9.6-2.006"
+              fill="none"
+              transform="translate(-1.5 -4.398)"
+            />
+            <path
+              d="M52.889,28.138a30.771,30.771,0,1,1-6.8,5.147m6.106,2.966a24.273,24.273,0,1,0,15.527-5.67,24.048,24.048,0,0,0-9.683,2.006"
+              fill="none"
+              transform="translate(-6.045 -4.411)"
+            />
+            <path
+              d="M47.187,9.089,40.993,1.5h-12.3L22.5,9.089l7.764,12.3h9.159Z"
+              transform="translate(-4.181 -1.5)"
+            />
+            <path
+              d="M84.587,9.089,78.393,1.5h-12.3L59.9,9.089l7.764,12.3h9.159Z"
+              transform="translate(-8.957 -1.5)"
+            />
+            <line
+              transform="translate(18.319 7.589)"
+              x2="24.687"
+            />
+            <line
+              transform="translate(50.943 7.589)"
+              x2="24.687"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="howRelated"
+            onChange={[Function]}
+            type="radio"
+            value="spouse"
+          />
+          <span>
+            Spouse
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="child emotion-1"
+            focusable="false"
+            viewBox="-26 -3 89 89"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M32.963,24.006a12.082,12.082,0,1,1-16.4-11.253V5.862A4.374,4.374,0,0,1,20.925,1.5a4.283,4.283,0,0,1,3.053,1.308,4.283,4.283,0,0,1,1.308,3.053v6.891A12.018,12.018,0,0,1,32.963,24.006Z"
+              transform="translate(-2.432 -1.5)"
+            />
+            <rect
+              height="8.374"
+              transform="translate(4.623 19.976)"
+              width="27.565"
+            />
+            <g
+              transform="translate(9.247 21.197)"
             >
-              <path
-                d="M32.963,24.006a12.082,12.082,0,1,1-16.4-11.253V5.862A4.374,4.374,0,0,1,20.925,1.5a4.283,4.283,0,0,1,3.053,1.308,4.283,4.283,0,0,1,1.308,3.053v6.891A12.018,12.018,0,0,1,32.963,24.006Z"
-                transform="translate(-2.432 -1.5)"
+              <line
+                y2="5.408"
+              />
+              <line
+                transform="translate(6.193)"
+                y2="5.408"
+              />
+              <line
+                transform="translate(12.3)"
+                y2="5.408"
+              />
+              <line
+                transform="translate(18.406)"
+                y2="5.408"
               />
-              <rect
-                height="8.374"
-                transform="translate(4.623 19.976)"
-                width="27.565"
+            </g>
+            <g
+              transform="translate(0 28.176)"
+            >
+              <path
+                d="M31.072,89.1H8.827A7.315,7.315,0,0,1,1.5,81.778V41.127A7.315,7.315,0,0,1,8.827,33.8H31.072A7.315,7.315,0,0,1,38.4,41.127v40.65A7.261,7.261,0,0,1,31.072,89.1Z"
+                transform="translate(-1.5 -33.8)"
               />
               <g
-                transform="translate(9.247 21.197)"
+                transform="translate(0 11.689)"
               >
                 <line
-                  y2="5.408"
+                  x2="8.81"
                 />
                 <line
-                  transform="translate(6.193)"
-                  y2="5.408"
+                  transform="translate(0 11.253)"
+                  x2="8.81"
                 />
                 <line
-                  transform="translate(12.3)"
-                  y2="5.408"
+                  transform="translate(0 22.593)"
+                  x2="8.81"
                 />
                 <line
-                  transform="translate(18.406)"
-                  y2="5.408"
-                />
-              </g>
-              <g
-                transform="translate(0 28.176)"
-              >
-                <path
-                  d="M31.072,89.1H8.827A7.315,7.315,0,0,1,1.5,81.778V41.127A7.315,7.315,0,0,1,8.827,33.8H31.072A7.315,7.315,0,0,1,38.4,41.127v40.65A7.261,7.261,0,0,1,31.072,89.1Z"
-                  transform="translate(-1.5 -33.8)"
+                  transform="translate(0 33.933)"
+                  x2="8.81"
                 />
-                <g
-                  transform="translate(0 11.689)"
-                >
-                  <line
-                    x2="8.81"
-                  />
-                  <line
-                    transform="translate(0 11.253)"
-                    x2="8.81"
-                  />
-                  <line
-                    transform="translate(0 22.593)"
-                    x2="8.81"
-                  />
-                  <line
-                    transform="translate(0 33.933)"
-                    x2="8.81"
-                  />
-                </g>
               </g>
-              <path
-                d="M1.5,52c4.536,0,4.536,2.879,9.072,2.879S15.108,52,19.644,52s4.536,2.879,9.072,2.879S33.165,52,37.7,52"
-                transform="translate(-1.5 -8)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="howRelated"
-              onChange={[Function]}
-              type="radio"
-              value="child"
+            </g>
+            <path
+              d="M1.5,52c4.536,0,4.536,2.879,9.072,2.879S15.108,52,19.644,52s4.536,2.879,9.072,2.879S33.165,52,37.7,52"
+              transform="translate(-1.5 -8)"
             />
-            <span>
-              Child
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+          </svg>
+          <input
+            checked={false}
+            name="howRelated"
+            onChange={[Function]}
+            type="radio"
+            value="child"
+          />
+          <span>
+            Child
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="heavier emotion-1"
+            focusable="false"
+            viewBox="-8 -6 100 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="heavier emotion-1"
-              focusable="false"
-              viewBox="-8 -6 100 100"
-              xmlns="http://www.w3.org/2000/svg"
+            <path
+              d="M39.755,38.7H17.344L1.5,50.687V91.965H55.494V51.208Z"
+              transform="translate(-1.5 0.076)"
+            />
+            <ellipse
+              cx="14.385"
+              cy="14.385"
+              rx="14.385"
+              ry="14.385"
+              transform="translate(12.196 0)"
+            />
+            <path
+              d="M71.156,51.8H54.583L42.7,60.764v30.75H82.935V61.077Z"
+              transform="translate(0.245 0.631)"
+            />
+            <ellipse
+              cx="10.736"
+              cy="10.736"
+              rx="10.736"
+              ry="10.736"
+              transform="translate(52.014 23.453)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="howRelated"
+            onChange={[Function]}
+            type="radio"
+            value="parent"
+          />
+          <span>
+            Parent
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="heavier emotion-1"
+            focusable="false"
+            viewBox="-3 -2 102 102"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M97.428,99.889l-.206-62.853L49.31,1.9,1.5,37.036V99.889"
+              transform="translate(-1.5 -1.9)"
+            />
+            <rect
+              height="19.68"
+              transform="translate(0 78.309)"
+              width="95.928"
+            />
+            <g
+              transform="translate(63.884 35.136)"
             >
-              <path
-                d="M39.755,38.7H17.344L1.5,50.687V91.965H55.494V51.208Z"
-                transform="translate(-1.5 0.076)"
-              />
               <ellipse
-                cx="14.385"
-                cy="14.385"
-                rx="14.385"
-                ry="14.385"
-                transform="translate(12.196 0)"
+                cx="8.243"
+                cy="8.243"
+                rx="8.243"
+                ry="8.243"
+                transform="translate(7.831)"
               />
               <path
-                d="M71.156,51.8H54.583L42.7,60.764v30.75H82.935V61.077Z"
-                transform="translate(0.245 0.631)"
+                d="M95.545,64.9V98.179H63.5L63.6,64.9l8.861-6.7H86.581Z"
+                transform="translate(-63.5 -35.326)"
               />
+            </g>
+            <g
+              transform="translate(31.942 43.173)"
+            >
               <ellipse
-                cx="10.736"
-                cy="10.736"
-                rx="10.736"
-                ry="10.736"
-                transform="translate(52.014 23.453)"
+                cx="8.243"
+                cy="8.243"
+                rx="8.243"
+                ry="8.243"
+                transform="translate(7.728 0)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="howRelated"
-              onChange={[Function]}
-              type="radio"
-              value="parent"
-            />
-            <span>
-              Parent
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="heavier emotion-1"
-              focusable="false"
-              viewBox="-3 -2 102 102"
-              xmlns="http://www.w3.org/2000/svg"
-            >
               <path
-                d="M97.428,99.889l-.206-62.853L49.31,1.9,1.5,37.036V99.889"
-                transform="translate(-1.5 -1.9)"
+                d="M64.442,72.8V97.942H32.5V72.8L41.464,66H55.58Z"
+                transform="translate(-32.5 -43.126)"
               />
-              <rect
-                height="19.68"
-                transform="translate(0 78.309)"
-                width="95.928"
-              />
-              <g
-                transform="translate(63.884 35.136)"
-              >
-                <ellipse
-                  cx="8.243"
-                  cy="8.243"
-                  rx="8.243"
-                  ry="8.243"
-                  transform="translate(7.831)"
-                />
-                <path
-                  d="M95.545,64.9V98.179H63.5L63.6,64.9l8.861-6.7H86.581Z"
-                  transform="translate(-63.5 -35.326)"
-                />
-              </g>
-              <g
-                transform="translate(31.942 43.173)"
-              >
-                <ellipse
-                  cx="8.243"
-                  cy="8.243"
-                  rx="8.243"
-                  ry="8.243"
-                  transform="translate(7.728 0)"
-                />
-                <path
-                  d="M64.442,72.8V97.942H32.5V72.8L41.464,66H55.58Z"
-                  transform="translate(-32.5 -43.126)"
-                />
-              </g>
-              <g
-                transform="translate(0 35.136)"
-              >
-                <ellipse
-                  cx="8.243"
-                  cy="8.243"
-                  rx="8.243"
-                  ry="8.243"
-                  transform="translate(7.728)"
-                />
-                <path
-                  d="M33.442,64.9V98.179H1.5V64.9l8.964-6.7H24.58Z"
-                  transform="translate(-1.5 -35.326)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="howRelated"
-              onChange={[Function]}
-              type="radio"
-              value="familyMember"
-            />
-            <span>
-              Family member
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="heavier emotion-1"
-              focusable="false"
-              viewBox="-7 -7 100 100"
-              xmlns="http://www.w3.org/2000/svg"
+            </g>
+            <g
+              transform="translate(0 35.136)"
             >
-              <path
-                d="M126.139,47.785A13.785,13.785,0,1,1,112.355,34a13.785,13.785,0,0,1,13.785,13.785Z"
-                transform="translate(-88.158 -34)"
-              />
-              <path
-                d="M137.7,79.12v41.522H89.31V78.648l14.122-12.1H123.67Z"
-                transform="translate(-89.31 -29.952)"
-              />
-              <path
-                d="M126.139,47.785A13.785,13.785,0,1,1,112.355,34a13.785,13.785,0,0,1,13.785,13.785Z"
-                transform="translate(-49.776 -34)"
+              <ellipse
+                cx="8.243"
+                cy="8.243"
+                rx="8.243"
+                ry="8.243"
+                transform="translate(7.728)"
               />
               <path
-                d="M137.7,79.12v41.522H89.31V78.648l14.122-12.1H123.67Z"
-                transform="translate(-50.928 -29.952)"
+                d="M33.442,64.9V98.179H1.5V64.9l8.964-6.7H24.58Z"
+                transform="translate(-1.5 -35.326)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="howRelated"
-              onChange={[Function]}
-              type="radio"
-              value="friend"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="howRelated"
+            onChange={[Function]}
+            type="radio"
+            value="familyMember"
+          />
+          <span>
+            Family member
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="heavier emotion-1"
+            focusable="false"
+            viewBox="-7 -7 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M126.139,47.785A13.785,13.785,0,1,1,112.355,34a13.785,13.785,0,0,1,13.785,13.785Z"
+              transform="translate(-88.158 -34)"
             />
-            <span>
-              Friend
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            <path
+              d="M137.7,79.12v41.522H89.31V78.648l14.122-12.1H123.67Z"
+              transform="translate(-89.31 -29.952)"
+            />
+            <path
+              d="M126.139,47.785A13.785,13.785,0,1,1,112.355,34a13.785,13.785,0,0,1,13.785,13.785Z"
+              transform="translate(-49.776 -34)"
+            />
+            <path
+              d="M137.7,79.12v41.522H89.31V78.648l14.122-12.1H123.67Z"
+              transform="translate(-50.928 -29.952)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="howRelated"
+            onChange={[Function]}
+            type="radio"
+            value="friend"
+          />
+          <span>
+            Friend
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="emotion-1"
+            focusable="false"
+            viewBox="-2 -12 93 93"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="emotion-1"
-              focusable="false"
-              viewBox="-2 -12 93 93"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                height="64.203"
-                transform="translate(0 14.306)"
-                width="88.279"
-              />
-              <path
-                d="M3.5,17.9H89.25L82.079,43.459H10.025Z"
-                transform="translate(-1.913 -3.594)"
-              />
-              <rect
-                height="16.312"
-                transform="translate(19.54 30.269)"
-                width="6.63"
-              />
-              <rect
-                height="16.312"
-                transform="translate(60.626 30.269)"
-                width="6.63"
-              />
-              <path
-                d="M70.21,1.5V15.806H62.184V8.653H36.713v7.153H28.6V1.5Z"
-                transform="translate(-5.309 -1.5)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="howRelated"
-              onChange={[Function]}
-              type="radio"
-              value="client"
+            <rect
+              height="64.203"
+              transform="translate(0 14.306)"
+              width="88.279"
             />
-            <span>
-              Client
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+            <path
+              d="M3.5,17.9H89.25L82.079,43.459H10.025Z"
+              transform="translate(-1.913 -3.594)"
+            />
+            <rect
+              height="16.312"
+              transform="translate(19.54 30.269)"
+              width="6.63"
+            />
+            <rect
+              height="16.312"
+              transform="translate(60.626 30.269)"
+              width="6.63"
+            />
+            <path
+              d="M70.21,1.5V15.806H62.184V8.653H36.713v7.153H28.6V1.5Z"
+              transform="translate(-5.309 -1.5)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="howRelated"
+            onChange={[Function]}
+            type="radio"
+            value="client"
+          />
+          <span>
+            Client
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-23"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    />
     <div
-      className="g g--mr emotion-23"
+      className="g--6 ta-r m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
-      />
-      <div
-        className="g--6 ta-r m-b500"
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -7826,400 +7812,398 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
   color: #091f2f;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-17"
   >
-    <div
-      className="emotion-17"
+    <fieldset
+      className=" emotion-7"
     >
+      <legend>
+        <h2
+          className="emotion-0"
+        >
+          What were 
+          your
+           parents’ names at the time of 
+          your
+           birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        Please use the names 
+        your
+         parents used at the time of 
+        your
+         birth. If only one parent is listed on 
+        your
+         record, you only need to include that name.
+      </p>
       <fieldset
-        className=" emotion-7"
+        className="emotion-3"
       >
         <legend>
-          <h2
-            className="emotion-0"
-          >
-            What were 
-            your
-             parents’ names at the time of 
-            your
-             birth?
-          </h2>
+          <h3
+            className="secondary emotion-0"
+          >
+            Parent 1 
+            <em>
+              (Example: Mother)
+            </em>
+          </h3>
         </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
-        >
-          Please use the names 
-          your
-           parents used at the time of 
-          your
-           birth. If only one parent is listed on 
-          your
-           record, you only need to include that name.
-        </p>
-        <fieldset
-          className="emotion-3"
+        <div
+          className="emotion-2"
         >
-          <legend>
-            <h3
-              className="secondary emotion-0"
-            >
-              Parent 1 
-              <em>
-                (Example: Mother)
-              </em>
-            </h3>
-          </legend>
-          <div
-            className="emotion-2"
-          >
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-2048906072"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  First Name
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-2048906072"
-                name="parent1FirstName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
-              >
-                 
-              </div>
-            </div>
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-5381"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  Last / Maiden Name
-                </span>
-                <wbr />
-                <span
-                  style={
-                    Object {
-                      "whiteSpace": "nowrap",
-                    }
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-2048906072"
+              style={Object {}}
+            >
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  (if applicable)
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-5381"
-                name="parent1LastName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
+                }
               >
-                 
-              </div>
+                First Name
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-2048906072"
+              name="parent1FirstName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
             </div>
           </div>
-        </fieldset>
-        <fieldset
-          className="emotion-3"
-        >
-          <legend>
-            <h3
-              className="secondary emotion-0"
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-5381"
+              style={Object {}}
             >
-              Parent 2
-            </h3>
-          </legend>
-          <div
-            className="emotion-2"
-          >
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-2048906072"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  First Name
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-2048906072"
-                name="parent2FirstName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
-              >
-                 
-              </div>
-            </div>
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-5381"
-                style={Object {}}
+                }
               >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  Last / Maiden Name
-                </span>
-                <wbr />
-                <span
-                  style={
-                    Object {
-                      "whiteSpace": "nowrap",
-                    }
+                Last / Maiden Name
+              </span>
+              <wbr />
+              <span
+                style={
+                  Object {
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  (if applicable)
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-5381"
-                name="parent2LastName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
+                }
               >
-                 
-              </div>
+                (if applicable)
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-5381"
+              name="parent1LastName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
             </div>
           </div>
-        </fieldset>
+        </div>
       </fieldset>
       <fieldset
-        className=" emotion-7"
+        className="emotion-3"
       >
         <legend>
-          <h2
-            className="emotion-0"
-          >
-            Were 
-            your
-             parents married at the time of 
-            your
-             birth?
-          </h2>
+          <h3
+            className="secondary emotion-0"
+          >
+            Parent 2
+          </h3>
         </legend>
         <div
-          aria-labelledby="parentsMarried"
-          className="emotion-15"
-          role="radiogroup"
+          className="emotion-2"
         >
-          <label
-            className="  emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-2048906072"
+              style={Object {}}
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
+                  }
+                }
               >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
+                First Name
+              </span>
+            </label>
             <input
-              checked={false}
-              name="parentsMarried"
+              aria-label=""
+              className="txt-f  "
+              id="input-2048906072"
+              name="parent2FirstName"
               onChange={[Function]}
-              type="radio"
-              value="unknown"
+              type="text"
+              value=""
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(19.107 19.107)"
+               
+            </div>
+          </div>
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-5381"
+              style={Object {}}
+            >
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
+                  }
+                }
               >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
+                Last / Maiden Name
+              </span>
+              <wbr />
+              <span
+                style={
+                  Object {
+                    "whiteSpace": "nowrap",
+                  }
+                }
+              >
+                (if applicable)
+              </span>
+            </label>
             <input
-              checked={false}
-              name="parentsMarried"
+              aria-label=""
+              className="txt-f  "
+              id="input-5381"
+              name="parent2LastName"
               onChange={[Function]}
-              type="radio"
-              value="no"
+              type="text"
+              value=""
             />
-            <span>
-              No
-            </span>
-          </label>
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
+            </div>
+          </div>
         </div>
       </fieldset>
-    </div>
-    <div
-      className="g g--mr emotion-19"
+    </fieldset>
+    <fieldset
+      className=" emotion-7"
     >
+      <legend>
+        <h2
+          className="emotion-0"
+        >
+          Were 
+          your
+           parents married at the time of 
+          your
+           birth?
+        </h2>
+      </legend>
       <div
-        className="t--info g--6 m-b500"
+        aria-labelledby="parentsMarried"
+        className="emotion-15"
+        role="radiogroup"
       >
-        <button
-          className="lnk emotion-18"
-          onClick={[Function]}
-          type="button"
+        <label
+          className="  emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="  emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
+            >
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
+              />
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
+            >
+              <line
+                x2="22.629"
+                y2="22.629"
+              />
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-19"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    >
+      <button
+        className="lnk emotion-18"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Review request
-        </button>
-      </div>
+        Review request
+      </button>
     </div>
   </div>
 </div>
@@ -8517,428 +8501,426 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
   color: #091f2f;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-17"
   >
-    <div
-      className="emotion-17"
+    <fieldset
+      className=" emotion-7"
     >
+      <legend>
+        <h2
+          className="emotion-0"
+        >
+          What were 
+          their
+           parents’ names at the time of 
+          the
+           birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        Please use the names 
+        their
+         parents used at the time of 
+        the
+         birth. If only one parent is listed on 
+        the
+         record, you only need to include that name.
+      </p>
       <fieldset
-        className=" emotion-7"
+        className="emotion-3"
       >
         <legend>
-          <h2
-            className="emotion-0"
-          >
-            What were 
-            their
-             parents’ names at the time of 
-            the
-             birth?
-          </h2>
+          <h3
+            className="secondary emotion-0"
+          >
+            Parent 1 
+            <em>
+              (Example: Mother)
+            </em>
+          </h3>
         </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
-        >
-          Please use the names 
-          their
-           parents used at the time of 
-          the
-           birth. If only one parent is listed on 
-          the
-           record, you only need to include that name.
-        </p>
-        <fieldset
-          className="emotion-3"
+        <div
+          className="emotion-2"
         >
-          <legend>
-            <h3
-              className="secondary emotion-0"
-            >
-              Parent 1 
-              <em>
-                (Example: Mother)
-              </em>
-            </h3>
-          </legend>
-          <div
-            className="emotion-2"
-          >
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-2048906072"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  First Name
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-2048906072"
-                name="parent1FirstName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
-              >
-                 
-              </div>
-            </div>
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-5381"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  Last / Maiden Name
-                </span>
-                <wbr />
-                <span
-                  style={
-                    Object {
-                      "whiteSpace": "nowrap",
-                    }
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-2048906072"
+              style={Object {}}
+            >
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  (if applicable)
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-5381"
-                name="parent1LastName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
+                }
               >
-                 
-              </div>
+                First Name
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-2048906072"
+              name="parent1FirstName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
             </div>
           </div>
-        </fieldset>
-        <fieldset
-          className="emotion-3"
-        >
-          <legend>
-            <h3
-              className="secondary emotion-0"
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-5381"
+              style={Object {}}
             >
-              Parent 2
-            </h3>
-          </legend>
-          <div
-            className="emotion-2"
-          >
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-2048906072"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  First Name
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-2048906072"
-                name="parent2FirstName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
-              >
-                 
-              </div>
-            </div>
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-5381"
-                style={Object {}}
+                }
               >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  Last / Maiden Name
-                </span>
-                <wbr />
-                <span
-                  style={
-                    Object {
-                      "whiteSpace": "nowrap",
-                    }
+                Last / Maiden Name
+              </span>
+              <wbr />
+              <span
+                style={
+                  Object {
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  (if applicable)
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-5381"
-                name="parent2LastName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
+                }
               >
-                 
-              </div>
+                (if applicable)
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-5381"
+              name="parent1LastName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
             </div>
           </div>
-        </fieldset>
+        </div>
       </fieldset>
       <fieldset
-        className=" emotion-7"
+        className="emotion-3"
       >
         <legend>
-          <h2
-            className="emotion-0"
-          >
-            Were 
-            Stacy’s
-             parents married at the time of 
-            their
-             birth?
-          </h2>
+          <h3
+            className="secondary emotion-0"
+          >
+            Parent 2
+          </h3>
         </legend>
         <div
-          aria-labelledby="parentsMarried"
-          className="emotion-15"
-          role="radiogroup"
+          className="emotion-2"
         >
-          <label
-            className=" inactive emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-2048906072"
+              style={Object {}}
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
+                  }
+                }
               >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
+                First Name
+              </span>
+            </label>
             <input
-              checked={false}
-              name="parentsMarried"
+              aria-label=""
+              className="txt-f  "
+              id="input-2048906072"
+              name="parent2FirstName"
               onChange={[Function]}
-              type="radio"
-              value="unknown"
+              type="text"
+              value=""
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="selected  emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="parentsMarried"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
+               
+            </div>
+          </div>
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-5381"
+              style={Object {}}
+            >
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
+                  }
+                }
+              >
+                Last / Maiden Name
+              </span>
+              <wbr />
+              <span
+                style={
+                  Object {
+                    "whiteSpace": "nowrap",
+                  }
+                }
+              >
+                (if applicable)
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-5381"
+              name="parent2LastName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
+            </div>
+          </div>
         </div>
       </fieldset>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
-        }
-      >
+    </fieldset>
+    <fieldset
+      className=" emotion-7"
+    >
+      <legend>
         <h2
-          className="h3 tt-u"
+          className="emotion-0"
         >
-          Record may have an access restriction
+          Were 
+          Stacy’s
+           parents married at the time of 
+          their
+           birth?
         </h2>
-        <p>
-          If their parents weren’t married at the time of the birth, the record is restricted and can only be requested by the people listed on the record.
-        </p>
-        <p>
-          <strong>
-            If you are listed on the record, you will need to provide a valid form of identification (
-            <i>
-              e.g.
-            </i>
-             driver’s license, state ID, military ID, or passport) to get a copy.
-          </strong>
-           
-          If you are not listed on the record, you will not be able to get a copy. Your request will be canceled and your card will not be charged.
-        </p>
+      </legend>
+      <div
+        aria-labelledby="parentsMarried"
+        className="emotion-15"
+        role="radiogroup"
+      >
+        <label
+          className=" inactive emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
+            >
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
+              />
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="selected  emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
+            >
+              <line
+                x2="22.629"
+                y2="22.629"
+              />
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
       </div>
+    </fieldset>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
+        }
+      }
+    >
+      <h2
+        className="h3 tt-u"
+      >
+        Record may have an access restriction
+      </h2>
+      <p>
+        If their parents weren’t married at the time of the birth, the record is restricted and can only be requested by the people listed on the record.
+      </p>
+      <p>
+        <strong>
+          If you are listed on the record, you will need to provide a valid form of identification (
+          <i>
+            e.g.
+          </i>
+           driver’s license, state ID, military ID, or passport) to get a copy.
+        </strong>
+         
+        If you are not listed on the record, you will not be able to get a copy. Your request will be canceled and your card will not be charged.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-19"
+  >
     <div
-      className="g g--mr emotion-19"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-18"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-18"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next
-        </button>
-      </div>
+        Next
+      </button>
     </div>
   </div>
 </div>
@@ -9236,426 +9218,424 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
   color: #091f2f;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-17"
   >
-    <div
-      className="emotion-17"
+    <fieldset
+      className=" emotion-7"
     >
+      <legend>
+        <h2
+          className="emotion-0"
+        >
+          What were 
+          your
+           parents’ names at the time of 
+          your
+           birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        Please use the names 
+        your
+         parents used at the time of 
+        your
+         birth. If only one parent is listed on 
+        your
+         record, you only need to include that name.
+      </p>
       <fieldset
-        className=" emotion-7"
+        className="emotion-3"
       >
         <legend>
-          <h2
-            className="emotion-0"
-          >
-            What were 
-            your
-             parents’ names at the time of 
-            your
-             birth?
-          </h2>
+          <h3
+            className="secondary emotion-0"
+          >
+            Parent 1 
+            <em>
+              (Example: Mother)
+            </em>
+          </h3>
         </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
-        >
-          Please use the names 
-          your
-           parents used at the time of 
-          your
-           birth. If only one parent is listed on 
-          your
-           record, you only need to include that name.
-        </p>
-        <fieldset
-          className="emotion-3"
+        <div
+          className="emotion-2"
         >
-          <legend>
-            <h3
-              className="secondary emotion-0"
-            >
-              Parent 1 
-              <em>
-                (Example: Mother)
-              </em>
-            </h3>
-          </legend>
-          <div
-            className="emotion-2"
-          >
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-2048906072"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  First Name
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-2048906072"
-                name="parent1FirstName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
-              >
-                 
-              </div>
-            </div>
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-5381"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  Last / Maiden Name
-                </span>
-                <wbr />
-                <span
-                  style={
-                    Object {
-                      "whiteSpace": "nowrap",
-                    }
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-2048906072"
+              style={Object {}}
+            >
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  (if applicable)
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-5381"
-                name="parent1LastName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
+                }
               >
-                 
-              </div>
+                First Name
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-2048906072"
+              name="parent1FirstName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
             </div>
           </div>
-        </fieldset>
-        <fieldset
-          className="emotion-3"
-        >
-          <legend>
-            <h3
-              className="secondary emotion-0"
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-5381"
+              style={Object {}}
             >
-              Parent 2
-            </h3>
-          </legend>
-          <div
-            className="emotion-2"
-          >
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-2048906072"
-                style={Object {}}
-              >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  First Name
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-2048906072"
-                name="parent2FirstName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
-              >
-                 
-              </div>
-            </div>
-            <div>
-              <label
-                className="txt-l "
-                htmlFor="input-5381"
-                style={Object {}}
+                }
               >
-                <span
-                  style={
-                    Object {
-                      "marginRight": "0.5em",
-                      "whiteSpace": "nowrap",
-                    }
-                  }
-                >
-                  Last / Maiden Name
-                </span>
-                <wbr />
-                <span
-                  style={
-                    Object {
-                      "whiteSpace": "nowrap",
-                    }
+                Last / Maiden Name
+              </span>
+              <wbr />
+              <span
+                style={
+                  Object {
+                    "whiteSpace": "nowrap",
                   }
-                >
-                  (if applicable)
-                </span>
-              </label>
-              <input
-                aria-label=""
-                className="txt-f  "
-                id="input-5381"
-                name="parent2LastName"
-                onChange={[Function]}
-                type="text"
-                value=""
-              />
-              <div
-                className="t--subinfo t--err m-b100 m-t100"
+                }
               >
-                 
-              </div>
+                (if applicable)
+              </span>
+            </label>
+            <input
+              aria-label=""
+              className="txt-f  "
+              id="input-5381"
+              name="parent1LastName"
+              onChange={[Function]}
+              type="text"
+              value=""
+            />
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
             </div>
           </div>
-        </fieldset>
+        </div>
       </fieldset>
       <fieldset
-        className=" emotion-7"
+        className="emotion-3"
       >
         <legend>
-          <h2
-            className="emotion-0"
-          >
-            Were 
-            your
-             parents married at the time of 
-            your
-             birth?
-          </h2>
+          <h3
+            className="secondary emotion-0"
+          >
+            Parent 2
+          </h3>
         </legend>
         <div
-          aria-labelledby="parentsMarried"
-          className="emotion-15"
-          role="radiogroup"
+          className="emotion-2"
         >
-          <label
-            className=" inactive emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-2048906072"
+              style={Object {}}
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
+                  }
+                }
               >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
+                First Name
+              </span>
+            </label>
             <input
-              checked={false}
-              name="parentsMarried"
+              aria-label=""
+              className="txt-f  "
+              id="input-2048906072"
+              name="parent2FirstName"
               onChange={[Function]}
-              type="radio"
-              value="unknown"
+              type="text"
+              value=""
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="selected  emotion-10"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-9"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(19.107 19.107)"
+               
+            </div>
+          </div>
+          <div>
+            <label
+              className="txt-l "
+              htmlFor="input-5381"
+              style={Object {}}
+            >
+              <span
+                style={
+                  Object {
+                    "marginRight": "0.5em",
+                    "whiteSpace": "nowrap",
+                  }
+                }
               >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
+                Last / Maiden Name
+              </span>
+              <wbr />
+              <span
+                style={
+                  Object {
+                    "whiteSpace": "nowrap",
+                  }
+                }
+              >
+                (if applicable)
+              </span>
+            </label>
             <input
-              checked={true}
-              name="parentsMarried"
+              aria-label=""
+              className="txt-f  "
+              id="input-5381"
+              name="parent2LastName"
               onChange={[Function]}
-              type="radio"
-              value="no"
+              type="text"
+              value=""
             />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
-        }
-      >
+            <div
+              className="t--subinfo t--err m-b100 m-t100"
+            >
+               
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </fieldset>
+    <fieldset
+      className=" emotion-7"
+    >
+      <legend>
         <h2
-          className="h3 tt-u"
+          className="emotion-0"
         >
-          Record may have an access restriction
+          Were 
+          your
+           parents married at the time of 
+          your
+           birth?
         </h2>
-        <p>
-          If your parents weren’t married at the time of your birth, your record may have an access restriction.
-        </p>
-        <p>
-          <strong>
-            You will need to provide a valid form of identification (
-            <i>
-              e.g.
-            </i>
-            driver’s license, state ID, military ID, or passport) later in this process.
-          </strong>
-        </p>
+      </legend>
+      <div
+        aria-labelledby="parentsMarried"
+        className="emotion-15"
+        role="radiogroup"
+      >
+        <label
+          className=" inactive emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
+            >
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
+              />
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="selected  emotion-10"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-9"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
+            >
+              <line
+                x2="22.629"
+                y2="22.629"
+              />
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="parentsMarried"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
       </div>
+    </fieldset>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
+        }
+      }
+    >
+      <h2
+        className="h3 tt-u"
+      >
+        Record may have an access restriction
+      </h2>
+      <p>
+        If your parents weren’t married at the time of your birth, your record may have an access restriction.
+      </p>
+      <p>
+        <strong>
+          You will need to provide a valid form of identification (
+          <i>
+            e.g.
+          </i>
+          driver’s license, state ID, military ID, or passport) later in this process.
+        </strong>
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-19"
+  >
     <div
-      className="g g--mr emotion-19"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-18"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-18"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next
-        </button>
-      </div>
+        Next
+      </button>
     </div>
   </div>
 </div>
@@ -9838,341 +9818,339 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
   font-weight: bold;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-7"
   >
-    <div
-      className="emotion-7"
+    <fieldset
+      className=" emotion-2"
     >
-      <fieldset
-        className=" emotion-2"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What was 
-            their
-             name at birth?
-          </h2>
-        </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
+      <legend>
+        <h2
+          className="emotion-0"
         >
-          If 
-          they
-           changed 
-          their
-           
-          name at some point, please use the name 
-          they
-           
-          were given at birth. If 
-          they
-           were adopted, use
-           
-          their
-           post-adoption name. Please note, we do not need 
+          What was 
           their
-           middle name to process your request.
-        </p>
-        <div
-          className="emotion-1"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2048906072"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
-                }
-              >
-                First Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2048906072"
-              name="firstName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
-            >
-               
-            </div>
-          </div>
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-1103291528"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+           name at birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        If 
+        they
+         changed 
+        their
+         
+        name at some point, please use the name 
+        they
+         
+        were given at birth. If 
+        they
+         were adopted, use
+         
+        their
+         post-adoption name. Please note, we do not need 
+        their
+         middle name to process your request.
+      </p>
+      <div
+        className="emotion-1"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2048906072"
+            style={Object {}}
+          >
+            <span
+              style={
+                Object {
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Last Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-1103291528"
-              name="lastName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              First Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f  "
+            id="input-2048906072"
+            name="firstName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-        <div
-          className="m-t700"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2099238988"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-1103291528"
+            style={Object {}}
+          >
+            <span
+              style={
+                Object {
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Alternative spelling
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2099238988"
-              name="altSpelling"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Last Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f  "
+            id="input-1103291528"
+            name="lastName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-      </fieldset>
+      </div>
       <div
-        className="m-v700"
+        className="m-t700"
       >
-        <fieldset
-          className="emotion-5"
-        >
-          <div>
-            <legend
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2099238988"
+            style={Object {}}
+          >
+            <span
               style={
                 Object {
-                  "width": "100%",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
-              >
-                When were 
-                they
-                 born?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-4"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value="5"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-day"
-                >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value="12"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-year"
-                >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-year"
-                  max={2024}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value="1990"
-                />
-              </div>
-            </div>
-            
-          </div>
-        </fieldset>
-      </div>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
-        }
-      >
-        <h2
-          className="h3 tt-u"
-        >
-          Birth Certificate is Being Processed
-        </h2>
-        <p>
-          Birth information takes up to two weeks to arrive from a hospital to the City of Boston. Please submit an order after
-           
-          <span
-            className="emotion-6"
-          >
-            5/12/1990
-          </span>
-          . We apologize for the inconvenience. If you have any questions or concerns, please
-           
-          <a
-            href="https://www.boston.gov/still-have-questions-registry"
-            target="_blank"
+              Alternative spelling
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f  "
+            id="input-2099238988"
+            name="altSpelling"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
           >
-            contact us online
-          </a>
-          , by phone at 617-635-4175, or visit City Hall in person Monday Friday, from 9 a.m. - 4 p.m.
-        </p>
+             
+          </div>
+        </div>
       </div>
-    </div>
+    </fieldset>
     <div
-      className="g g--mr emotion-9"
+      className="m-v700"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <fieldset
+        className="emotion-5"
       >
-        <button
-          className="lnk emotion-8"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
+        <div>
+          <legend
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "width": "100%",
               }
             }
           >
-            <span
-              aria-hidden="true"
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "fontStyle": "normal",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              ←
-            </span>
-             
-            Back
-          </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
-      >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] = `
-.emotion-6 fieldset + fieldset {
-  margin-top: 2rem;
-}
-
-@media screen and (min-width:480px) {
+              When were 
+              they
+               born?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-4"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f"
+                id="dob-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value="5"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-day"
+              >
+                Day
+              </label>
+              <input
+                className="txt-f"
+                id="dob-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value="12"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-year"
+              >
+                Year
+              </label>
+              <input
+                className="txt-f"
+                id="dob-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value="1990"
+              />
+            </div>
+          </div>
+          
+        </div>
+      </fieldset>
+    </div>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
+        }
+      }
+    >
+      <h2
+        className="h3 tt-u"
+      >
+        Birth Certificate is Being Processed
+      </h2>
+      <p>
+        Birth information takes up to two weeks to arrive from a hospital to the City of Boston. Please submit an order after
+         
+        <span
+          className="emotion-6"
+        >
+          5/12/1990
+        </span>
+        . We apologize for the inconvenience. If you have any questions or concerns, please
+         
+        <a
+          href="https://www.boston.gov/still-have-questions-registry"
+          target="_blank"
+        >
+          contact us online
+        </a>
+        , by phone at 617-635-4175, or visit City Hall in person Monday Friday, from 9 a.m. - 4 p.m.
+      </p>
+    </div>
+  </div>
+  <div
+    className="g g--mr emotion-9"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    >
+      <button
+        className="lnk emotion-8"
+        onClick={[Function]}
+        type="button"
+      >
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
+        >
+          <span
+            aria-hidden="true"
+            style={
+              Object {
+                "fontStyle": "normal",
+              }
+            }
+          >
+            ←
+          </span>
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        Next question
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] = `
+.emotion-6 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
   .emotion-6 fieldset + fieldset {
     margin-top: 4rem;
   }
@@ -10340,297 +10318,295 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
   cursor: not-allowed;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-6"
   >
-    <div
-      className="emotion-6"
+    <fieldset
+      className=" emotion-2"
     >
-      <fieldset
-        className=" emotion-2"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What was 
-            their
-             name at birth?
-          </h2>
-        </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
+      <legend>
+        <h2
+          className="emotion-0"
         >
-          If 
-          they
-           changed 
+          What was 
           their
-           
-          name at some point, please use the name 
-          they
-           
-          were given at birth. If 
-          they
-           were adopted, use
-           
-          their
-           post-adoption name. Please note, we do not need 
-          their
-           middle name to process your request.
-        </p>
-        <div
-          className="emotion-1"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2048906072"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+           name at birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        If 
+        they
+         changed 
+        their
+         
+        name at some point, please use the name 
+        they
+         
+        were given at birth. If 
+        they
+         were adopted, use
+         
+        their
+         post-adoption name. Please note, we do not need 
+        their
+         middle name to process your request.
+      </p>
+      <div
+        className="emotion-1"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2048906072"
+            style={Object {}}
+          >
+            <span
+              style={
+                Object {
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                First Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2048906072"
-              name="firstName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              First Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f  "
+            id="input-2048906072"
+            name="firstName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-1103291528"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+        </div>
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-1103291528"
+            style={Object {}}
+          >
+            <span
+              style={
+                Object {
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Last Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-1103291528"
-              name="lastName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Last Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f  "
+            id="input-1103291528"
+            name="lastName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-        <div
-          className="m-t700"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2099238988"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+      </div>
+      <div
+        className="m-t700"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2099238988"
+            style={Object {}}
+          >
+            <span
+              style={
+                Object {
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Alternative spelling
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2099238988"
-              name="altSpelling"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Alternative spelling
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f  "
+            id="input-2099238988"
+            name="altSpelling"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-      </fieldset>
-      <div
-        className="m-v700"
+      </div>
+    </fieldset>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-5"
       >
-        <fieldset
-          className="emotion-5"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
+              When were 
+              they
+               born?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-4"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-month"
               >
-                When were 
-                they
-                 born?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-4"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-day"
-                >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-year"
-                >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-year"
-                  max={2024}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+                Month
+              </label>
+              <input
+                className="txt-f"
+                id="dob-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-day"
+              >
+                Day
+              </label>
+              <input
+                className="txt-f"
+                id="dob-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value=""
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-year"
+              >
+                Year
+              </label>
+              <input
+                className="txt-f"
+                id="dob-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
-        </fieldset>
-      </div>
+        </div>
+      </fieldset>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-8"
+  >
     <div
-      className="g g--mr emotion-8"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-7"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-7"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -10801,476 +10777,540 @@ exports[`Storyshots Birth/Question Components/VerifyIdentification default 1`] =
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-18"
   >
-    <div
-      className="emotion-18"
+    <h2
+      className="emotion-0"
     >
-      <h2
-        className="emotion-0"
-      >
-        Verify your identity
-      </h2>
-      <p
-        className="lh--400 t--s400 m-b500"
+      Verify your identity
+    </h2>
+    <p
+      className="lh--400 t--s400 m-b500"
+    >
+      Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
+    </p>
+    <p
+      className="lh--400 t--s400 m-b500"
+    >
+      <em>
+        Please note
+      </em>
+      : You must be
+       
+      a person or parent
+       listed on the record to get a copy of the certificate. If you are not listed on the record, you will not be able to get a copy. We will cancel your request and will not charge your card. Contact
+       
+      <a
+        href="mailto:birth@boston.gov"
+        onClick={[Function]}
       >
-        Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
-      </p>
-      <p
-        className="lh--400 t--s400 m-b500"
+        birth
+        @boston.gov
+      </a>
+       
+      with questions.
+    </p>
+    <h3
+      className="secondary m-t700 emotion-0"
+      style={
+        Object {
+          "borderBottom": 0,
+        }
+      }
+    >
+      Upload ID images
+    </h3>
+    <h3>
+      We accept the following forms of ID:
+    </h3>
+    <ul
+      className="lh--300"
+    >
+      <li>
+        Driver’s License
+      </li>
+      <li>
+        State ID
+      </li>
+      <li>
+        Passport
+      </li>
+      <li>
+        Military ID
+      </li>
+    </ul>
+    <div
+      className="g"
+    >
+      <div
+        className="g--6 m-v500"
       >
-        <em>
-          Please note
-        </em>
-        : You must be
-         
-        a person or parent
-         listed on the record to get a copy of the certificate. If you are not listed on the record, you will not be able to get a copy. We will cancel your request and will not charge your card. Contact
-         
-        <a
-          href="mailto:birth@boston.gov"
-          onClick={[Function]}
-        >
-          birth
-          @boston.gov
-        </a>
-         
-        with questions.
-      </p>
-      <h3
-        className="secondary m-t700 emotion-0"
-        style={
-          Object {
-            "borderBottom": 0,
-          }
-        }
-      >
-        Upload ID images
-      </h3>
-      <h3>
-        We accept the following forms of ID:
-      </h3>
-      <ul
-        className="lh--300"
-      >
-        <li>
-          Driver’s License
-        </li>
-        <li>
-          State ID
-        </li>
-        <li>
-          Passport
-        </li>
-        <li>
-          Military ID
-        </li>
-      </ul>
-      <div
-        className="g"
-      >
-        <div
-          className="g--6 m-v500"
+        <div
+          className="br br-a200 emotion-6"
         >
           <div
-            className="br br-a200 emotion-6"
+            className="emotion-4"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDragEnter={[Function]}
+            onDragLeave={[Function]}
+            onDragOver={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
           >
-            <div
-              className="emotion-4"
-              onBlur={[Function]}
+            <input
+              accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
+              autoComplete="off"
+              multiple={false}
+              onChange={[Function]}
               onClick={[Function]}
-              onDragEnter={[Function]}
-              onDragLeave={[Function]}
-              onDragOver={[Function]}
-              onDragStart={[Function]}
-              onDrop={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              tabIndex={0}
+              style={
+                Object {
+                  "display": "none",
+                }
+              }
+              tabIndex={-1}
+              type="file"
+            />
+            <div
+              className="emotion-3"
             >
-              <input
-                accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-                autoComplete="off"
-                multiple={false}
-                onChange={[Function]}
-                onClick={[Function]}
+              <div
                 style={
                   Object {
-                    "display": "none",
+                    "visibility": "visible",
                   }
                 }
-                tabIndex={-1}
-                type="file"
-              />
-              <div
-                className="emotion-3"
               >
                 <div
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
-                  }
+                  className="id emotion-2"
                 >
-                  <div
-                    className="id emotion-2"
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 181 134"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      viewBox="0 0 181 134"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <path
+                      d="M2 2h176v130H2z"
+                      fill="#fff"
+                    />
+                    <g
+                      fill="currentColor"
                     >
                       <path
-                        d="M2 2h176v130H2z"
-                        fill="#fff"
+                        d="M181 134H0V0h181zM4 130h172V4H4z"
                       />
-                      <g
-                        fill="currentColor"
-                      >
-                        <path
-                          d="M181 134H0V0h181zM4 130h172V4H4z"
-                        />
-                        <path
-                          d="M95 30h63v4H95z"
-                        />
-                        <path
-                          d="M95 48h63v4H95z"
-                        />
-                        <path
-                          d="M95 66h63v4H95z"
-                        />
-                        <path
-                          d="M95 83h63v4H95z"
-                        />
-                        <path
-                          d="M95 101h63v4H95z"
-                        />
-                      </g>
-                      <g
-                        fill="#fff"
-                        stroke="currentColor"
-                        strokeWidth="3"
-                      >
-                        <path
-                          d="M25 32h51v71H25z"
-                        />
-                        <path
-                          d="M57 70H44l-10 7v25h33V77z"
-                        />
-                        <ellipse
-                          cx="9"
-                          cy="9"
-                          rx="9"
-                          ry="9"
-                          transform="translate(41 46)"
-                        />
-                      </g>
-                    </svg>
-                  </div>
+                      <path
+                        d="M95 30h63v4H95z"
+                      />
+                      <path
+                        d="M95 48h63v4H95z"
+                      />
+                      <path
+                        d="M95 66h63v4H95z"
+                      />
+                      <path
+                        d="M95 83h63v4H95z"
+                      />
+                      <path
+                        d="M95 101h63v4H95z"
+                      />
+                    </g>
+                    <g
+                      fill="#fff"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                    >
+                      <path
+                        d="M25 32h51v71H25z"
+                      />
+                      <path
+                        d="M57 70H44l-10 7v25h33V77z"
+                      />
+                      <ellipse
+                        cx="9"
+                        cy="9"
+                        rx="9"
+                        ry="9"
+                        transform="translate(41 46)"
+                      />
+                    </g>
+                  </svg>
                 </div>
               </div>
             </div>
-            <div
-              className="br br-t200"
+          </div>
+          <div
+            className="br br-t200"
+            style={
+              Object {
+                "position": "relative",
+              }
+            }
+          >
+            <button
+              className="btn btn--w btn--b  emotion-5"
+              onClick={[Function]}
               style={
                 Object {
-                  "position": "relative",
+                  "width": "100%",
                 }
               }
+              type="button"
             >
-              <button
-                className="btn btn--w btn--b  emotion-5"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": "100%",
-                  }
-                }
-                type="button"
-              >
-                Upload front of ID
-              </button>
-            </div>
+              Upload front of ID
+            </button>
           </div>
         </div>
+      </div>
+      <div
+        className="g--6 m-v500"
+      >
         <div
-          className="g--6 m-v500"
+          className="br br-a200 emotion-6"
         >
           <div
-            className="br br-a200 emotion-6"
+            className="emotion-4"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDragEnter={[Function]}
+            onDragLeave={[Function]}
+            onDragOver={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
           >
-            <div
-              className="emotion-4"
-              onBlur={[Function]}
+            <input
+              accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
+              autoComplete="off"
+              multiple={false}
+              onChange={[Function]}
               onClick={[Function]}
-              onDragEnter={[Function]}
-              onDragLeave={[Function]}
-              onDragOver={[Function]}
-              onDragStart={[Function]}
-              onDrop={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              tabIndex={0}
+              style={
+                Object {
+                  "display": "none",
+                }
+              }
+              tabIndex={-1}
+              type="file"
+            />
+            <div
+              className="emotion-3"
             >
-              <input
-                accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-                autoComplete="off"
-                multiple={false}
-                onChange={[Function]}
-                onClick={[Function]}
+              <div
                 style={
                   Object {
-                    "display": "none",
+                    "visibility": "visible",
                   }
                 }
-                tabIndex={-1}
-                type="file"
-              />
-              <div
-                className="emotion-3"
               >
                 <div
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
-                  }
+                  className="id emotion-2"
                 >
-                  <div
-                    className="id emotion-2"
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 181 134"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      viewBox="0 0 181 134"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <path
+                      d="M2 2h176v130H2z"
+                      fill="#fff"
+                    />
+                    <g
+                      fill="currentColor"
                     >
                       <path
-                        d="M2 2h176v130H2z"
-                        fill="#fff"
+                        d="M181 134H0V0h181zM4 130h172V4H4z"
                       />
-                      <g
-                        fill="currentColor"
-                      >
-                        <path
-                          d="M181 134H0V0h181zM4 130h172V4H4z"
-                        />
-                        <path
-                          d="M2 21h176v25H2z"
-                        />
-                        <path
-                          d="M16 69h5v41h-5z"
-                        />
-                        <path
-                          d="M51 69h5v41h-5z"
-                        />
-                        <path
-                          d="M70 69h5v41h-5z"
-                        />
-                        <path
-                          d="M38 69h5v41h-5z"
-                        />
-                        <path
-                          d="M23 69h2v41h-2z"
-                        />
-                        <path
-                          d="M28 69h2v41h-2z"
-                        />
-                        <path
-                          d="M45 69h2v41h-2z"
-                        />
-                        <path
-                          d="M65 69h2v41h-2z"
-                        />
-                        <path
-                          d="M58 69h2v41h-2z"
-                        />
-                        <path
-                          d="M36 69h2v41h-2z"
-                        />
-                      </g>
-                      <g
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="3"
-                      >
-                        <path
-                          d="M93 71h70"
-                        />
-                        <path
-                          d="M93 83h70"
-                        />
-                        <path
-                          d="M93 94h70"
-                        />
-                        <path
-                          d="M93 105h70"
-                        />
-                      </g>
-                    </svg>
-                  </div>
+                      <path
+                        d="M2 21h176v25H2z"
+                      />
+                      <path
+                        d="M16 69h5v41h-5z"
+                      />
+                      <path
+                        d="M51 69h5v41h-5z"
+                      />
+                      <path
+                        d="M70 69h5v41h-5z"
+                      />
+                      <path
+                        d="M38 69h5v41h-5z"
+                      />
+                      <path
+                        d="M23 69h2v41h-2z"
+                      />
+                      <path
+                        d="M28 69h2v41h-2z"
+                      />
+                      <path
+                        d="M45 69h2v41h-2z"
+                      />
+                      <path
+                        d="M65 69h2v41h-2z"
+                      />
+                      <path
+                        d="M58 69h2v41h-2z"
+                      />
+                      <path
+                        d="M36 69h2v41h-2z"
+                      />
+                    </g>
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                    >
+                      <path
+                        d="M93 71h70"
+                      />
+                      <path
+                        d="M93 83h70"
+                      />
+                      <path
+                        d="M93 94h70"
+                      />
+                      <path
+                        d="M93 105h70"
+                      />
+                    </g>
+                  </svg>
                 </div>
               </div>
             </div>
-            <div
-              className="br br-t200"
+          </div>
+          <div
+            className="br br-t200"
+            style={
+              Object {
+                "position": "relative",
+              }
+            }
+          >
+            <button
+              className="btn btn--w btn--b  emotion-5"
+              onClick={[Function]}
               style={
                 Object {
-                  "position": "relative",
+                  "width": "100%",
                 }
               }
+              type="button"
             >
-              <button
-                className="btn btn--w btn--b  emotion-5"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": "100%",
-                  }
-                }
-                type="button"
-              >
-                Upload back of ID
-              </button>
-            </div>
+              Upload back of ID
+            </button>
           </div>
         </div>
       </div>
-      <fieldset
-        className=" emotion-16"
+    </div>
+    <fieldset
+      className=" emotion-16"
+    >
+      <legend>
+        <h3
+          className="secondary m-t700 emotion-0"
+          style={
+            Object {
+              "borderBottom": 0,
+            }
+          }
+        >
+          Have you had a legal name change or do you have court guardianship?
+        </h3>
+      </legend>
+      <div
+        onClick={[Function]}
       >
-        <legend>
-          <h3
-            className="secondary m-t700 emotion-0"
+        <div
+          className="m-b300"
+        >
+          <input
+            accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
+            className="emotion-13"
+            id="uploadSupportingDocuments"
+            multiple={true}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            type="file"
+          />
+          <label
+            className="btn btn--sm btn--200 emotion-14"
+            htmlFor="uploadSupportingDocuments"
+            onClick={[Function]}
             style={
               Object {
-                "borderBottom": 0,
+                "fontWeight": "bold",
+                "whiteSpace": "nowrap",
               }
             }
           >
-            Have you had a legal name change or do you have court guardianship?
-          </h3>
-        </legend>
-        <div
-          onClick={[Function]}
-        >
+            Upload Supporting Documents
+          </label>
           <div
-            className="m-b300"
+            className="t--subinfo m-v200"
           >
-            <input
-              accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-              className="emotion-13"
-              id="uploadSupportingDocuments"
-              multiple={true}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="file"
-            />
-            <label
-              className="btn btn--sm btn--200 emotion-14"
-              htmlFor="uploadSupportingDocuments"
-              onClick={[Function]}
-              style={
-                Object {
-                  "fontWeight": "bold",
-                  "whiteSpace": "nowrap",
-                }
-              }
-            >
-              Upload Supporting Documents
-            </label>
-            <div
-              className="t--subinfo m-v200"
-            >
-              Files should be PDF format, and under 10MB each.
-            </div>
-            <ul
-              className="t--s400 emotion-15"
-            />
+            Files should be PDF format, and under 10MB each.
           </div>
+          <ul
+            className="t--s400 emotion-15"
+          />
         </div>
-      </fieldset>
-      <h2
-        className="secondary m-t700 emotion-0"
-      >
-        No ID?
-      </h2>
-      <p
-        className="m-b700 lh--400 t--s400 m-b500"
+      </div>
+    </fieldset>
+    <h2
+      className="secondary m-t700 emotion-0"
+    >
+      No ID?
+    </h2>
+    <p
+      className="m-b700 lh--400 t--s400 m-b500"
+    >
+      We can help explain your options.
+       
+      <a
+        href="mailto:birth@boston.gov?subject=Birth%20Certificate%20Support%20Request%3A%20No%20ID"
+        onClick={[Function]}
+        onMouseUp={[Function]}
       >
-        We can help explain your options.
-         
-        <a
-          href="mailto:birth@boston.gov?subject=Birth%20Certificate%20Support%20Request%3A%20No%20ID"
-          onClick={[Function]}
-          onMouseUp={[Function]}
+        Request help 
+        <span
+          aria-hidden="true"
         >
-          Request help 
-          <span
-            aria-hidden="true"
-          >
-            →
-          </span>
-        </a>
-      </p>
-    </div>
+          →
+        </span>
+      </a>
+    </p>
+  </div>
+  <div
+    className="g g--mr emotion-20"
+  >
     <div
-      className="g g--mr emotion-20"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-19"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-19"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Review request
-        </button>
-      </div>
+        Review request
+      </button>
     </div>
   </div>
 </div>
 `;
 
 exports[`Storyshots Birth/QuestionsFlowPage 1. Who is this for? 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -11557,74 +11597,8 @@ exports[`Storyshots Birth/QuestionsFlowPage 1. Who is this for? 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
-    className="mn--full-ie"
+<div
+    className="mn--full-ie"
   >
     <div
       className="mn mn--full "
@@ -11967,7 +11941,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 1. Who is this for? 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -12014,12 +11988,78 @@ exports[`Storyshots Birth/QuestionsFlowPage 1. Who is this for? 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/QuestionsFlowPage 1a. Client instructions 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -12133,73 +12173,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 1a. Client instructions 1`] = `
   padding-left: 0 !important;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -12512,7 +12486,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 1a. Client instructions 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -12559,12 +12533,78 @@ exports[`Storyshots Birth/QuestionsFlowPage 1a. Client instructions 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/QuestionsFlowPage 2. Born in Boston? 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -12857,73 +12897,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 2. Born in Boston? 1`] = `
   stroke: none;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -13328,7 +13302,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 2. Born in Boston? 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -13375,12 +13349,78 @@ exports[`Storyshots Birth/QuestionsFlowPage 2. Born in Boston? 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/QuestionsFlowPage 3. Personal information 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -13601,73 +13641,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 3. Personal information 1`] = `
   cursor: not-allowed;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -14176,7 +14150,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 3. Personal information 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -14223,12 +14197,78 @@ exports[`Storyshots Birth/QuestionsFlowPage 3. Personal information 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/QuestionsFlowPage 4. Parental information 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -14568,73 +14608,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 4. Parental information 1`] = `
   color: #091f2f;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -15246,7 +15220,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 4. Parental information 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -15293,12 +15267,78 @@ exports[`Storyshots Birth/QuestionsFlowPage 4. Parental information 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/QuestionsFlowPage 5. Identity verification 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -15511,73 +15551,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 5. Identity verification 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -16258,7 +16232,7 @@ exports[`Storyshots Birth/QuestionsFlowPage 5. Identity verification 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -16305,12 +16279,78 @@ exports[`Storyshots Birth/QuestionsFlowPage 5. Identity verification 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Birth/ReviewRequestPage default page 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -16532,73 +16572,7 @@ exports[`Storyshots Birth/ReviewRequestPage default page 1`] = `
   padding-right: 3rem;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -17150,7 +17124,7 @@ exports[`Storyshots Birth/ReviewRequestPage default page 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -17197,21 +17171,12 @@ exports[`Storyshots Birth/ReviewRequestPage default page 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/CheckoutPage server-side render 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -17224,14 +17189,14 @@ exports[`Storyshots Common Components/Checkout/CheckoutPage server-side render 1
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -17276,8 +17241,17 @@ exports[`Storyshots Common Components/Checkout/CheckoutPage server-side render 1
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -17455,7 +17429,7 @@ exports[`Storyshots Common Components/Checkout/CheckoutPage server-side render 1
         />
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -17502,12 +17476,78 @@ exports[`Storyshots Common Components/Checkout/CheckoutPage server-side render 1
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/OrderConfirmationContent birth 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -17585,73 +17625,7 @@ exports[`Storyshots Common Components/Checkout/OrderConfirmationContent birth 1`
   stroke: none;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -18092,7 +18066,7 @@ exports[`Storyshots Common Components/Checkout/OrderConfirmationContent birth 1`
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -18139,12 +18113,78 @@ exports[`Storyshots Common Components/Checkout/OrderConfirmationContent birth 1`
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/OrderConfirmationContent marriage 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -18222,73 +18262,7 @@ exports[`Storyshots Common Components/Checkout/OrderConfirmationContent marriage
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -18704,7 +18678,7 @@ exports[`Storyshots Common Components/Checkout/OrderConfirmationContent marriage
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -18751,38 +18725,12 @@ exports[`Storyshots Common Components/Checkout/OrderConfirmationContent marriage
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent Stripe error 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-5 {
-  padding-top: 0;
-  max-width: 500px;
-  top: 15%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -18795,14 +18743,14 @@ exports[`Storyshots Common Components/Checkout/PaymentContent Stripe error 1`] =
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -18847,8 +18795,34 @@ exports[`Storyshots Common Components/Checkout/PaymentContent Stripe error 1`] =
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-5 {
+  padding-top: 0;
+  max-width: 500px;
+  top: 15%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -19797,7 +19771,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent Stripe error 1`] =
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -19844,30 +19818,12 @@ exports[`Storyshots Common Components/Checkout/PaymentContent Stripe error 1`] =
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent ZIP code error 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -19880,14 +19836,14 @@ exports[`Storyshots Common Components/Checkout/PaymentContent ZIP code error 1`]
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -19932,8 +19888,26 @@ exports[`Storyshots Common Components/Checkout/PaymentContent ZIP code error 1`]
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -20841,7 +20815,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent ZIP code error 1`]
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -20888,12 +20862,78 @@ exports[`Storyshots Common Components/Checkout/PaymentContent ZIP code error 1`]
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent birth certificate 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -20971,73 +21011,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent birth certificate
   padding: 0;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -21990,7 +21964,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent birth certificate
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -22037,30 +22011,12 @@ exports[`Storyshots Common Components/Checkout/PaymentContent birth certificate
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent credit card error 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -22073,14 +22029,14 @@ exports[`Storyshots Common Components/Checkout/PaymentContent credit card error
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -22125,8 +22081,26 @@ exports[`Storyshots Common Components/Checkout/PaymentContent credit card error
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -22559,7 +22533,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent credit card error
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -22606,30 +22580,12 @@ exports[`Storyshots Common Components/Checkout/PaymentContent credit card error
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent default 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -22642,14 +22598,14 @@ exports[`Storyshots Common Components/Checkout/PaymentContent default 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -22694,8 +22650,26 @@ exports[`Storyshots Common Components/Checkout/PaymentContent default 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -23124,7 +23098,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent default 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -23171,30 +23145,12 @@ exports[`Storyshots Common Components/Checkout/PaymentContent default 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent existing billing 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -23207,14 +23163,14 @@ exports[`Storyshots Common Components/Checkout/PaymentContent existing billing 1
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -23259,8 +23215,26 @@ exports[`Storyshots Common Components/Checkout/PaymentContent existing billing 1
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -24168,7 +24142,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent existing billing 1
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -24215,12 +24189,78 @@ exports[`Storyshots Common Components/Checkout/PaymentContent existing billing 1
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/PaymentContent marriage certificate 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -24298,73 +24338,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent marriage certifica
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -25317,7 +25291,7 @@ exports[`Storyshots Common Components/Checkout/PaymentContent marriage certifica
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -25364,12 +25338,78 @@ exports[`Storyshots Common Components/Checkout/PaymentContent marriage certifica
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent birth certificate 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -25481,73 +25521,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent birth certificate 1
   font-size: 80%;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -26169,7 +26143,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent birth certificate 1
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -26216,64 +26190,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent birth certificate 1
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent cart has pending certs 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -26286,14 +26208,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent cart has pending ce
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -26338,8 +26260,60 @@ exports[`Storyshots Common Components/Checkout/ReviewContent cart has pending ce
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -26991,7 +26965,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent cart has pending ce
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -27038,64 +27012,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent cart has pending ce
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent default 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -27108,14 +27030,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent default 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -27160,8 +27082,60 @@ exports[`Storyshots Common Components/Checkout/ReviewContent default 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -27786,7 +27760,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent default 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -27833,64 +27807,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent default 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent empty cart 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -27903,14 +27825,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent empty cart 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -27955,8 +27877,60 @@ exports[`Storyshots Common Components/Checkout/ReviewContent empty cart 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -28581,7 +28555,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent empty cart 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -28628,64 +28602,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent empty cart 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent invalid order 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -28698,14 +28620,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent invalid order 1`] =
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -28750,8 +28672,60 @@ exports[`Storyshots Common Components/Checkout/ReviewContent invalid order 1`] =
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -29347,7 +29321,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent invalid order 1`] =
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -29394,12 +29368,78 @@ exports[`Storyshots Common Components/Checkout/ReviewContent invalid order 1`] =
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent marriage certificate 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -29511,73 +29551,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent marriage certificat
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -30193,7 +30167,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent marriage certificat
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -30240,72 +30214,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent marriage certificat
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent payment error 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-.emotion-13 {
-  padding-top: 0;
-  max-width: 500px;
-  top: 15%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -30318,14 +30232,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent payment error 1`] =
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -30370,8 +30284,68 @@ exports[`Storyshots Common Components/Checkout/ReviewContent payment error 1`] =
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+.emotion-13 {
+  padding-top: 0;
+  max-width: 500px;
+  top: 15%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -31031,7 +31005,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent payment error 1`] =
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -31078,72 +31052,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent payment error 1`] =
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent submission error 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-.emotion-13 {
-  padding-top: 0;
-  max-width: 500px;
-  top: 15%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -31156,14 +31070,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submission error 1`
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -31208,8 +31122,68 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submission error 1`
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+.emotion-13 {
+  padding-top: 0;
+  max-width: 500px;
+  top: 15%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -31875,7 +31849,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submission error 1`
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -31922,72 +31896,12 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submission error 1`
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ReviewContent submitting 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-.emotion-12:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-5 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-7 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-11 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-10 {
-  font-size: 80%;
-}
-
-.emotion-13 {
-  padding-top: 0;
-  max-width: 500px;
-  top: 15%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -32000,14 +31914,14 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submitting 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -32052,8 +31966,68 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submitting 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+.emotion-12:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-5 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-7 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-11 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-10 {
+  font-size: 80%;
+}
+
+.emotion-13 {
+  padding-top: 0;
+  max-width: 500px;
+  top: 15%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -32700,7 +32674,7 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submitting 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -32747,12 +32721,78 @@ exports[`Storyshots Common Components/Checkout/ReviewContent submitting 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ShippingContent birth certificate 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -32830,73 +32870,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent birth certificate
   padding: 0;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -33867,7 +33841,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent birth certificate
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -33914,30 +33888,12 @@ exports[`Storyshots Common Components/Checkout/ShippingContent birth certificate
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ShippingContent default 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -33950,14 +33906,14 @@ exports[`Storyshots Common Components/Checkout/ShippingContent default 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -34002,8 +33958,26 @@ exports[`Storyshots Common Components/Checkout/ShippingContent default 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -34929,7 +34903,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent default 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -34976,30 +34950,12 @@ exports[`Storyshots Common Components/Checkout/ShippingContent default 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ShippingContent email error 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -35012,14 +34968,14 @@ exports[`Storyshots Common Components/Checkout/ShippingContent email error 1`] =
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -35064,8 +35020,26 @@ exports[`Storyshots Common Components/Checkout/ShippingContent email error 1`] =
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -35991,7 +35965,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent email error 1`] =
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -36038,30 +36012,12 @@ exports[`Storyshots Common Components/Checkout/ShippingContent email error 1`] =
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ShippingContent existing address 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-4 {
-  background-color: #f3f3f3;
-  margin-top: 0 !important;
-}
-
-.emotion-3 {
-  padding: 0;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -36074,14 +36030,14 @@ exports[`Storyshots Common Components/Checkout/ShippingContent existing address
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -36126,8 +36082,26 @@ exports[`Storyshots Common Components/Checkout/ShippingContent existing address
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-4 {
+  background-color: #f3f3f3;
+  margin-top: 0 !important;
+}
+
+.emotion-3 {
+  padding: 0;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -37053,7 +37027,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent existing address
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -37100,12 +37074,78 @@ exports[`Storyshots Common Components/Checkout/ShippingContent existing address
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/Checkout/ShippingContent marriage certificate 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -37183,73 +37223,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent marriage certific
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -38220,7 +38194,7 @@ exports[`Storyshots Common Components/Checkout/ShippingContent marriage certific
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -38267,8 +38241,8 @@ exports[`Storyshots Common Components/Checkout/ShippingContent marriage certific
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Common Components/CostSummary default credit card 1`] = `
@@ -38321,322 +38295,318 @@ exports[`Storyshots Common Components/CostSummary default credit card 1`] = `
   padding-right: 3rem;
 }
 
-<div>
-  <div
-    className="emotion-10"
-  >
-    <table
-      className="t--info ta-r"
-      style={
-        Object {
-          "float": "right",
-        }
+<div
+  className="emotion-10"
+>
+  <table
+    className="t--info ta-r"
+    style={
+      Object {
+        "float": "right",
       }
+    }
+  >
+    <caption
+      className="emotion-0"
     >
-      <caption
-        className="emotion-0"
-      >
-        Cost Summary
-      </caption>
-      <thead
-        className="emotion-0"
-      >
-        <tr>
-          <th
-            scope="col"
-          >
-            Item
-          </th>
-          <th
-            scope="col"
-          >
-            Amount
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            5
+      Cost Summary
+    </caption>
+    <thead
+      className="emotion-0"
+    >
+      <tr>
+        <th
+          scope="col"
+        >
+          Item
+        </th>
+        <th
+          scope="col"
+        >
+          Amount
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          5
+           
+          certificates
+           ×
+           
+          $14.00
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          70.00
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div>
+            <div
+              className="sel sel--thin emotion-5"
+            >
+              <div
+                className="sel-c  emotion-4"
+              >
+                <select
+                  aria-label="Payment type"
+                  className="sel-f emotion-3"
+                  id="serviceFeeTypeSelect"
+                  onChange={[Function]}
+                  value="CREDIT"
+                >
+                  <option
+                    value="CREDIT"
+                  >
+                    Credit card
+                  </option>
+                  <option
+                    value="DEBIT"
+                  >
+                    Debit card
+                  </option>
+                </select>
+              </div>
+            </div>
              
-            certificates
-             ×
+            service fee
              
-            $14.00
-          </td>
-          <td
-            className="emotion-2"
+            <a
+              aria-label="About the service fee"
+              href="#service-fee"
+            >
+              *
+            </a>
+          </div>
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          1.76
+        </td>
+      </tr>
+      <tr>
+        <td>
+          U.S. shipping included
+        </td>
+        <td
+          className="emotion-2"
+        >
+          <i>
+            $0.00
+          </i>
+        </td>
+      </tr>
+      <tr>
+        <td
+          className="sh-title emotion-9"
+        >
+          <span
+            className="emotion-8"
           >
-            $
-            70.00
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div>
+            Total
+          </span>
+        </td>
+        <td
+          className="cost-cell cost br br-t100 p-v200"
+        >
+          $
+          71.76
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
+exports[`Storyshots Common Components/CostSummary default debit card 1`] = `
+.emotion-10:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-2 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-9 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-8 {
+  font-size: 80%;
+}
+
+.emotion-5 {
+  line-height: 1;
+  display: inline-block;
+}
+
+.emotion-4:after {
+  width: 2rem;
+}
+
+.emotion-3 {
+  height: 2rem;
+  line-height: initial;
+  padding-right: 3rem;
+}
+
+<div
+  className="emotion-10"
+>
+  <table
+    className="t--info ta-r"
+    style={
+      Object {
+        "float": "right",
+      }
+    }
+  >
+    <caption
+      className="emotion-0"
+    >
+      Cost Summary
+    </caption>
+    <thead
+      className="emotion-0"
+    >
+      <tr>
+        <th
+          scope="col"
+        >
+          Item
+        </th>
+        <th
+          scope="col"
+        >
+          Amount
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          5
+           
+          certificates
+           ×
+           
+          $14.00
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          70.00
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div>
+            <div
+              className="sel sel--thin emotion-5"
+            >
               <div
-                className="sel sel--thin emotion-5"
+                className="sel-c  emotion-4"
               >
-                <div
-                  className="sel-c  emotion-4"
+                <select
+                  aria-label="Payment type"
+                  className="sel-f emotion-3"
+                  id="serviceFeeTypeSelect"
+                  onChange={[Function]}
+                  value="DEBIT"
                 >
-                  <select
-                    aria-label="Payment type"
-                    className="sel-f emotion-3"
-                    id="serviceFeeTypeSelect"
-                    onChange={[Function]}
+                  <option
                     value="CREDIT"
                   >
-                    <option
-                      value="CREDIT"
-                    >
-                      Credit card
-                    </option>
-                    <option
-                      value="DEBIT"
-                    >
-                      Debit card
-                    </option>
-                  </select>
-                </div>
+                    Credit card
+                  </option>
+                  <option
+                    value="DEBIT"
+                  >
+                    Debit card
+                  </option>
+                </select>
               </div>
-               
-              service fee
-               
-              <a
-                aria-label="About the service fee"
-                href="#service-fee"
-              >
-                *
-              </a>
             </div>
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            1.76
-          </td>
-        </tr>
-        <tr>
-          <td>
-            U.S. shipping included
-          </td>
-          <td
-            className="emotion-2"
-          >
-            <i>
-              $0.00
-            </i>
-          </td>
-        </tr>
-        <tr>
-          <td
-            className="sh-title emotion-9"
-          >
-            <span
-              className="emotion-8"
+             
+            service fee
+             
+            <a
+              aria-label="About the service fee"
+              href="#service-fee"
             >
-              Total
-            </span>
-          </td>
-          <td
-            className="cost-cell cost br br-t100 p-v200"
+              *
+            </a>
+          </div>
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          1.32
+        </td>
+      </tr>
+      <tr>
+        <td>
+          U.S. shipping included
+        </td>
+        <td
+          className="emotion-2"
+        >
+          <i>
+            $0.00
+          </i>
+        </td>
+      </tr>
+      <tr>
+        <td
+          className="sh-title emotion-9"
+        >
+          <span
+            className="emotion-8"
           >
-            $
-            71.76
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            Total
+          </span>
+        </td>
+        <td
+          className="cost-cell cost br br-t100 p-v200"
+        >
+          $
+          71.32
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;
 
-exports[`Storyshots Common Components/CostSummary default debit card 1`] = `
-.emotion-10:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-0 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-2 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-9 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-8 {
-  font-size: 80%;
-}
-
-.emotion-5 {
-  line-height: 1;
-  display: inline-block;
-}
-
-.emotion-4:after {
-  width: 2rem;
-}
-
-.emotion-3 {
-  height: 2rem;
-  line-height: initial;
-  padding-right: 3rem;
-}
-
-<div>
-  <div
-    className="emotion-10"
-  >
-    <table
-      className="t--info ta-r"
-      style={
-        Object {
-          "float": "right",
-        }
-      }
-    >
-      <caption
-        className="emotion-0"
-      >
-        Cost Summary
-      </caption>
-      <thead
-        className="emotion-0"
-      >
-        <tr>
-          <th
-            scope="col"
-          >
-            Item
-          </th>
-          <th
-            scope="col"
-          >
-            Amount
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            5
-             
-            certificates
-             ×
-             
-            $14.00
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            70.00
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div>
-              <div
-                className="sel sel--thin emotion-5"
-              >
-                <div
-                  className="sel-c  emotion-4"
-                >
-                  <select
-                    aria-label="Payment type"
-                    className="sel-f emotion-3"
-                    id="serviceFeeTypeSelect"
-                    onChange={[Function]}
-                    value="DEBIT"
-                  >
-                    <option
-                      value="CREDIT"
-                    >
-                      Credit card
-                    </option>
-                    <option
-                      value="DEBIT"
-                    >
-                      Debit card
-                    </option>
-                  </select>
-                </div>
-              </div>
-               
-              service fee
-               
-              <a
-                aria-label="About the service fee"
-                href="#service-fee"
-              >
-                *
-              </a>
-            </div>
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            1.32
-          </td>
-        </tr>
-        <tr>
-          <td>
-            U.S. shipping included
-          </td>
-          <td
-            className="emotion-2"
-          >
-            <i>
-              $0.00
-            </i>
-          </td>
-        </tr>
-        <tr>
-          <td
-            className="sh-title emotion-9"
-          >
-            <span
-              className="emotion-8"
-            >
-              Total
-            </span>
-          </td>
-          <td
-            className="cost-cell cost br br-t100 p-v200"
-          >
-            $
-            71.32
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Common Components/CostSummary only credit card 1`] = `
-.emotion-7:after {
+exports[`Storyshots Common Components/CostSummary only credit card 1`] = `
+.emotion-7:after {
   content: '';
   display: table;
   clear: both;
@@ -38670,106 +38640,104 @@ exports[`Storyshots Common Components/CostSummary only credit card 1`] = `
   font-size: 80%;
 }
 
-<div>
-  <div
-    className="emotion-7"
-  >
-    <table
-      className="t--info ta-r"
-      style={
-        Object {
-          "float": "right",
-        }
+<div
+  className="emotion-7"
+>
+  <table
+    className="t--info ta-r"
+    style={
+      Object {
+        "float": "right",
       }
+    }
+  >
+    <caption
+      className="emotion-0"
     >
-      <caption
-        className="emotion-0"
-      >
-        Cost Summary
-      </caption>
-      <thead
-        className="emotion-0"
-      >
-        <tr>
-          <th
-            scope="col"
-          >
-            Item
-          </th>
-          <th
-            scope="col"
-          >
-            Amount
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            5
-             
-            certificates
-             ×
-             
-            $14.00
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            70.00
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span>
-              Credit card service fee 
-              <a
-                href="#service-fee"
-              >
-                *
-              </a>
-            </span>
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            1.76
-          </td>
-        </tr>
-        <tr>
-          <td>
-            U.S. shipping included
-          </td>
-          <td
-            className="emotion-2"
-          >
-            <i>
-              $0.00
-            </i>
-          </td>
-        </tr>
-        <tr>
-          <td
-            className="sh-title emotion-6"
-          >
-            <span
-              className="emotion-5"
+      Cost Summary
+    </caption>
+    <thead
+      className="emotion-0"
+    >
+      <tr>
+        <th
+          scope="col"
+        >
+          Item
+        </th>
+        <th
+          scope="col"
+        >
+          Amount
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          5
+           
+          certificates
+           ×
+           
+          $14.00
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          70.00
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span>
+            Credit card service fee 
+            <a
+              href="#service-fee"
             >
-              Total
-            </span>
-          </td>
-          <td
-            className="cost-cell cost br br-t100 p-v200"
+              *
+            </a>
+          </span>
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          1.76
+        </td>
+      </tr>
+      <tr>
+        <td>
+          U.S. shipping included
+        </td>
+        <td
+          className="emotion-2"
+        >
+          <i>
+            $0.00
+          </i>
+        </td>
+      </tr>
+      <tr>
+        <td
+          className="sh-title emotion-6"
+        >
+          <span
+            className="emotion-5"
           >
-            $
-            71.76
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            Total
+          </span>
+        </td>
+        <td
+          className="cost-cell cost br br-t100 p-v200"
+        >
+          $
+          71.76
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;
 
@@ -38808,106 +38776,104 @@ exports[`Storyshots Common Components/CostSummary only debit card 1`] = `
   font-size: 80%;
 }
 
-<div>
-  <div
-    className="emotion-7"
-  >
-    <table
-      className="t--info ta-r"
-      style={
-        Object {
-          "float": "right",
-        }
+<div
+  className="emotion-7"
+>
+  <table
+    className="t--info ta-r"
+    style={
+      Object {
+        "float": "right",
       }
+    }
+  >
+    <caption
+      className="emotion-0"
     >
-      <caption
-        className="emotion-0"
-      >
-        Cost Summary
-      </caption>
-      <thead
-        className="emotion-0"
-      >
-        <tr>
-          <th
-            scope="col"
-          >
-            Item
-          </th>
-          <th
-            scope="col"
-          >
-            Amount
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            5
-             
-            certificates
-             ×
-             
-            $14.00
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            70.00
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <span>
-              Debit card service fee 
-              <a
-                href="#service-fee"
-              >
-                *
-              </a>
-            </span>
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            1.32
-          </td>
-        </tr>
-        <tr>
-          <td>
-            U.S. shipping included
-          </td>
-          <td
-            className="emotion-2"
-          >
-            <i>
-              $0.00
-            </i>
-          </td>
-        </tr>
-        <tr>
-          <td
-            className="sh-title emotion-6"
-          >
-            <span
-              className="emotion-5"
+      Cost Summary
+    </caption>
+    <thead
+      className="emotion-0"
+    >
+      <tr>
+        <th
+          scope="col"
+        >
+          Item
+        </th>
+        <th
+          scope="col"
+        >
+          Amount
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          5
+           
+          certificates
+           ×
+           
+          $14.00
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          70.00
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span>
+            Debit card service fee 
+            <a
+              href="#service-fee"
             >
-              Total
-            </span>
-          </td>
-          <td
-            className="cost-cell cost br br-t100 p-v200"
+              *
+            </a>
+          </span>
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          1.32
+        </td>
+      </tr>
+      <tr>
+        <td>
+          U.S. shipping included
+        </td>
+        <td
+          className="emotion-2"
+        >
+          <i>
+            $0.00
+          </i>
+        </td>
+      </tr>
+      <tr>
+        <td
+          className="sh-title emotion-6"
+        >
+          <span
+            className="emotion-5"
           >
-            $
-            71.32
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            Total
+          </span>
+        </td>
+        <td
+          className="cost-cell cost br br-t100 p-v200"
+        >
+          $
+          71.32
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;
 
@@ -38961,146 +38927,144 @@ exports[`Storyshots Common Components/CostSummary with research fee 1`] = `
   padding-right: 3rem;
 }
 
-<div>
-  <div
-    className="emotion-11"
-  >
-    <table
-      className="t--info ta-r"
-      style={
-        Object {
-          "float": "right",
-        }
+<div
+  className="emotion-11"
+>
+  <table
+    className="t--info ta-r"
+    style={
+      Object {
+        "float": "right",
       }
+    }
+  >
+    <caption
+      className="emotion-0"
     >
-      <caption
-        className="emotion-0"
-      >
-        Cost Summary
-      </caption>
-      <thead
-        className="emotion-0"
-      >
-        <tr>
-          <th
-            scope="col"
-          >
-            Item
-          </th>
-          <th
-            scope="col"
-          >
-            Amount
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            1
-             
-            certificate
-             ×
-             
-            $14.00
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            14.00
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Research fee
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            10.00
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div>
+      Cost Summary
+    </caption>
+    <thead
+      className="emotion-0"
+    >
+      <tr>
+        <th
+          scope="col"
+        >
+          Item
+        </th>
+        <th
+          scope="col"
+        >
+          Amount
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          1
+           
+          certificate
+           ×
+           
+          $14.00
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          14.00
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Research fee
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          10.00
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <div>
+            <div
+              className="sel sel--thin emotion-6"
+            >
               <div
-                className="sel sel--thin emotion-6"
+                className="sel-c  emotion-5"
               >
-                <div
-                  className="sel-c  emotion-5"
+                <select
+                  aria-label="Payment type"
+                  className="sel-f emotion-4"
+                  id="serviceFeeTypeSelect"
+                  onChange={[Function]}
+                  value="DEBIT"
                 >
-                  <select
-                    aria-label="Payment type"
-                    className="sel-f emotion-4"
-                    id="serviceFeeTypeSelect"
-                    onChange={[Function]}
+                  <option
+                    value="CREDIT"
+                  >
+                    Credit card
+                  </option>
+                  <option
                     value="DEBIT"
                   >
-                    <option
-                      value="CREDIT"
-                    >
-                      Credit card
-                    </option>
-                    <option
-                      value="DEBIT"
-                    >
-                      Debit card
-                    </option>
-                  </select>
-                </div>
+                    Debit card
+                  </option>
+                </select>
               </div>
-               
-              service fee
-               
-              <a
-                aria-label="About the service fee"
-                href="#service-fee"
-              >
-                *
-              </a>
             </div>
-          </td>
-          <td
-            className="emotion-2"
-          >
-            $
-            0.62
-          </td>
-        </tr>
-        <tr>
-          <td>
-            U.S. shipping included
-          </td>
-          <td
-            className="emotion-2"
-          >
-            <i>
-              $0.00
-            </i>
-          </td>
-        </tr>
-        <tr>
-          <td
-            className="sh-title emotion-10"
-          >
-            <span
-              className="emotion-9"
+             
+            service fee
+             
+            <a
+              aria-label="About the service fee"
+              href="#service-fee"
             >
-              Total
-            </span>
-          </td>
-          <td
-            className="cost-cell cost br br-t100 p-v200"
+              *
+            </a>
+          </div>
+        </td>
+        <td
+          className="emotion-2"
+        >
+          $
+          0.62
+        </td>
+      </tr>
+      <tr>
+        <td>
+          U.S. shipping included
+        </td>
+        <td
+          className="emotion-2"
+        >
+          <i>
+            $0.00
+          </i>
+        </td>
+      </tr>
+      <tr>
+        <td
+          className="sh-title emotion-10"
+        >
+          <span
+            className="emotion-9"
           >
-            $
-            24.62
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            Total
+          </span>
+        </td>
+        <td
+          className="cost-cell cost br br-t100 p-v200"
+        >
+          $
+          24.62
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;
 
@@ -39187,131 +39151,129 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className=" emotion-2"
   >
     <div
-      className=" emotion-2"
+      className="date-component"
     >
       <div
-        className="date-component"
+        aria-label="date 1"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 1"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date1month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date1year"
-              max={2024}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date1month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date1year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
       <div
-        className="to"
+        className="t--err"
       >
-        to
+         
       </div>
+    </div>
+    <div
+      className="to"
+    >
+      to
+    </div>
+    <div
+      className="date-component"
+    >
       <div
-        className="date-component"
+        aria-label="date 2"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 2"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date2month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date2year"
-              max={2024}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date2month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date2year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
+      <div
+        className="t--err"
+      >
+         
+      </div>
     </div>
   </div>
 </div>
@@ -39400,131 +39362,129 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className=" emotion-2"
   >
     <div
-      className=" emotion-2"
+      className="date-component"
     >
       <div
-        className="date-component"
+        aria-label="date 1"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 1"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date1month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date1year"
-              max={2024}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date1month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date1year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
       <div
-        className="to"
+        className="t--err"
       >
-        to
+         
       </div>
+    </div>
+    <div
+      className="to"
+    >
+      to
+    </div>
+    <div
+      className="date-component"
+    >
       <div
-        className="date-component"
+        aria-label="date 2"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 2"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date2month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date2year"
-              max={2024}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date2month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date2year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
+      <div
+        className="t--err"
+      >
+         
+      </div>
     </div>
   </div>
 </div>
@@ -39613,180 +39573,16 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
-  >
-    <div
-      className=" emotion-2"
-    >
-      <div
-        className="date-component"
-      >
-        <div
-          aria-label="date 1"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date1month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date1year"
-              max={2024}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          className="t--err"
-        >
-           
-        </div>
-      </div>
-      <div
-        className="to"
-      >
-        to
-      </div>
-      <div
-        className="date-component"
-      >
-        <div
-          aria-label="date 2"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date2month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date2year"
-              max={2024}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          className="t--err"
-        >
-           
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.emotion-0 > div {
-  -webkit-flex: 0 0 30%;
-  -ms-flex: 0 0 30%;
-  flex: 0 0 30%;
-}
-
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 65%;
-  -ms-flex: 0 0 65%;
-  flex: 0 0 65%;
-}
-
-.emotion-0 input {
-  -moz-appearance: textfield;
-}
-
-.emotion-0 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-.emotion-0 input::-ms-clear {
-  display: none;
-}
-
-<div>
+  }
+>
   <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
-    }
+    className=" emotion-2"
   >
     <div
       className="date-component"
@@ -39842,55 +39638,11 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`]
          
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Common Components/DateRangePicker/DateComponent with values 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.emotion-0 > div {
-  -webkit-flex: 0 0 30%;
-  -ms-flex: 0 0 30%;
-  flex: 0 0 30%;
-}
-
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 65%;
-  -ms-flex: 0 0 65%;
-  flex: 0 0 65%;
-}
-
-.emotion-0 input {
-  -moz-appearance: textfield;
-}
-
-.emotion-0 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-.emotion-0 input::-ms-clear {
-  display: none;
-}
-
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
-    }
-  >
+    <div
+      className="to"
+    >
+      to
+    </div>
     <div
       className="date-component"
     >
@@ -39949,45 +39701,217 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent with values
 </div>
 `;
 
-exports[`Storyshots Common Components/Fee Disclosures ServiceFeeDisclosure component 1`] = `
-<div>
+exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 > div {
+  -webkit-flex: 0 0 30%;
+  -ms-flex: 0 0 30%;
+  flex: 0 0 30%;
+}
+
+.emotion-0 > div:last-of-type {
+  -webkit-flex: 0 0 65%;
+  -ms-flex: 0 0 65%;
+  flex: 0 0 65%;
+}
+
+.emotion-0 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-0 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-0 input::-ms-clear {
+  display: none;
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
   <div
-    className="b--g m-t700"
+    className="date-component"
   >
     <div
-      className="b-c b-c--smv t--subinfo"
-      id="service-fee"
+      aria-label="date 1"
+      className="emotion-0"
+      role="group"
     >
-      * 
-      You will be charged an extra service fee of no more than 
-      $0.25
-       
-      plus 
-      2.15%
-      . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
-       
-      <a
-        href="https://www.boston.gov/common-questions-about-online-payments"
-      >
-        card service fees
-      </a>
-       at the City of Boston.
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date1month"
+        >
+          Month
+        </label>
+        <input
+          className="txt-f "
+          id="date1month"
+          max="12"
+          min="1"
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="MM"
+          type="number"
+          value=""
+        />
+      </div>
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date1year"
+        >
+          Year
+        </label>
+        <input
+          className="year-field txt-f "
+          id="date1year"
+          max={2024}
+          min={1870}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="YYYY"
+          type="number"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      className="t--err"
+    >
+       
     </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Common Components/Fee Disclosures researchFeeDisclosure text string 1`] = `
-<div>
-  <p>
-    If you are requesting a certificate that is dated before 1870, there is an additional $10 research fee.
-  </p>
+exports[`Storyshots Common Components/DateRangePicker/DateComponent with values 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-0 > div {
+  -webkit-flex: 0 0 30%;
+  -ms-flex: 0 0 30%;
+  flex: 0 0 30%;
+}
+
+.emotion-0 > div:last-of-type {
+  -webkit-flex: 0 0 65%;
+  -ms-flex: 0 0 65%;
+  flex: 0 0 65%;
+}
+
+.emotion-0 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-0 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-0 input::-ms-clear {
+  display: none;
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="date-component"
+  >
+    <div
+      aria-label="date 2"
+      className="emotion-0"
+      role="group"
+    >
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date2month"
+        >
+          Month
+        </label>
+        <input
+          className="txt-f "
+          id="date2month"
+          max="12"
+          min="1"
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="MM"
+          type="number"
+          value=""
+        />
+      </div>
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date2year"
+        >
+          Year
+        </label>
+        <input
+          className="year-field txt-f "
+          id="date2year"
+          max={2024}
+          min={1870}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="YYYY"
+          type="number"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      className="t--err"
+    >
+       
+    </div>
+  </div>
 </div>
 `;
 
-exports[`Storyshots Common Components/Fee Disclosures serviceFeeDisclosure text string 1`] = `
-<div>
-  <p>
+exports[`Storyshots Common Components/Fee Disclosures ServiceFeeDisclosure component 1`] = `
+<div
+  className="b--g m-t700"
+>
+  <div
+    className="b-c b-c--smv t--subinfo"
+    id="service-fee"
+  >
+    * 
     You will be charged an extra service fee of no more than 
     $0.25
      
@@ -40001,10 +39925,34 @@ exports[`Storyshots Common Components/Fee Disclosures serviceFeeDisclosure text
       card service fees
     </a>
      at the City of Boston.
-  </p>
+  </div>
 </div>
 `;
 
+exports[`Storyshots Common Components/Fee Disclosures researchFeeDisclosure text string 1`] = `
+<p>
+  If you are requesting a certificate that is dated before 1870, there is an additional $10 research fee.
+</p>
+`;
+
+exports[`Storyshots Common Components/Fee Disclosures serviceFeeDisclosure text string 1`] = `
+<p>
+  You will be charged an extra service fee of no more than 
+  $0.25
+   
+  plus 
+  2.15%
+  . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
+   
+  <a
+    href="https://www.boston.gov/common-questions-about-online-payments"
+  >
+    card service fees
+  </a>
+   at the City of Boston.
+</p>
+`;
+
 exports[`Storyshots Common Components/Nav default 1`] = `
 .emotion-2 {
   display: -webkit-box;
@@ -40051,29 +39999,27 @@ exports[`Storyshots Common Components/Nav default 1`] = `
   top: 12px;
 }
 
-<div>
-  <nav
-    aria-label="Shopping cart"
-    className="nv-s nv-s--sticky"
+<nav
+  aria-label="Shopping cart"
+  className="nv-s nv-s--sticky"
+>
+  <div
+    className="nv-s-l emotion-2"
   >
-    <div
-      className="nv-s-l emotion-2"
+    <a
+      className="nv-s-l-b emotion-1"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="nv-s-l-b emotion-1"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
+      View Cart 
+      <span
+        className="emotion-0"
       >
-        View Cart 
-        <span
-          className="emotion-0"
-        >
-          0
-        </span>
-      </a>
-    </div>
-  </nav>
-</div>
+        0
+      </span>
+    </a>
+  </div>
+</nav>
 `;
 
 exports[`Storyshots Common Components/Order Details OrderDetails: birth 1`] = `
@@ -40120,50 +40066,48 @@ exports[`Storyshots Common Components/Order Details OrderDetails: birth 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    className="p-v300 br b--w br-b100 emotion-4"
+  >
+    <div
+      className="t--sans p-a300"
+      style={
+        Object {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      <span
+        aria-label="Quantity"
+      >
+        4
+      </span>
+       ×
+    </div>
     <div
-      className="p-v300 br b--w br-b100 emotion-4"
+      className="emotion-3"
     >
       <div
-        className="t--sans p-a300"
-        style={
-          Object {
-            "fontWeight": "bold",
-          }
-        }
+        className="t--sans m-v100 emotion-1"
       >
         <span
-          aria-label="Quantity"
+          className="emotion-0"
         >
-          4
+          <span>
+            Carol
+             
+            Danvers
+          </span>
+          <wbr />
+          <span>
+            (Certified paper copy)
+          </span>
         </span>
-         ×
       </div>
       <div
-        className="emotion-3"
+        className="emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-1"
-        >
-          <span
-            className="emotion-0"
-          >
-            <span>
-              Carol
-               
-              Danvers
-            </span>
-            <wbr />
-            <span>
-              (Certified paper copy)
-            </span>
-          </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          Born: 3/5/1968
-        </div>
+        Born: 3/5/1968
       </div>
     </div>
   </div>
@@ -40214,148 +40158,146 @@ exports[`Storyshots Common Components/Order Details OrderDetails: death 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    className="p-v300 br b--w  emotion-4"
+  >
+    <div
+      className="t--sans p-a300"
+      style={
+        Object {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      <span
+        aria-label="Quantity"
+      >
+        1
+      </span>
+       ×
+    </div>
     <div
-      className="p-v300 br b--w  emotion-4"
+      className="emotion-3"
     >
       <div
-        className="t--sans p-a300"
-        style={
-          Object {
-            "fontWeight": "bold",
-          }
-        }
+        className="t--sans m-v100 emotion-1"
       >
         <span
-          aria-label="Quantity"
+          className="emotion-0"
         >
-          1
+          <span>
+            BRUCE
+             
+            BANNER
+          </span>
         </span>
-         ×
       </div>
       <div
-        className="emotion-3"
+        className="emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-1"
-        >
-          <span
-            className="emotion-0"
-          >
-            <span>
-              BRUCE
-               
-              BANNER
-            </span>
-          </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          Died: 3/4/2016 — Age: 53
-        </div>
+        Died: 3/4/2016 — Age: 53
       </div>
     </div>
+  </div>
+  <div
+    className="p-v300 br b--w br-t100 emotion-4"
+  >
+    <div
+      className="t--sans p-a300"
+      style={
+        Object {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      <span
+        aria-label="Quantity"
+      >
+        3
+      </span>
+       ×
+    </div>
     <div
-      className="p-v300 br b--w br-t100 emotion-4"
+      className="emotion-3"
     >
       <div
-        className="t--sans p-a300"
-        style={
-          Object {
-            "fontWeight": "bold",
-          }
-        }
+        className="t--sans m-v100 emotion-1"
       >
         <span
-          aria-label="Quantity"
+          className="emotion-0"
         >
-          3
+          <span>
+            JAMES
+             
+            HOWLETT (LOGAN)
+          </span>
         </span>
-         ×
-      </div>
-      <div
-        className="emotion-3"
-      >
-        <div
-          className="t--sans m-v100 emotion-1"
+        <span
+          style={
+            Object {
+              "color": "#091f2f",
+            }
+          }
         >
+           — 
           <span
-            className="emotion-0"
-          >
-            <span>
-              JAMES
-               
-              HOWLETT (LOGAN)
-            </span>
-          </span>
-          <span
+            className="t--sans tt-u"
             style={
               Object {
-                "color": "#091f2f",
+                "fontStyle": "normal",
+                "fontWeight": "bold",
               }
             }
           >
-             — 
-            <span
-              className="t--sans tt-u"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                  "fontWeight": "bold",
-                }
-              }
-            >
-              pending
-            </span>
+            pending
           </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          Died: 4/15/2014 — Age: 44 yrs. 2 mos. 10 dys
-        </div>
+        </span>
+      </div>
+      <div
+        className="emotion-2"
+      >
+        Died: 4/15/2014 — Age: 44 yrs. 2 mos. 10 dys
       </div>
     </div>
+  </div>
+  <div
+    className="p-v300 br b--w br-a100 emotion-4"
+  >
+    <div
+      className="t--sans p-a300"
+      style={
+        Object {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      <span
+        aria-label="Quantity"
+      >
+        1
+      </span>
+       ×
+    </div>
     <div
-      className="p-v300 br b--w br-a100 emotion-4"
+      className="emotion-3"
     >
       <div
-        className="t--sans p-a300"
-        style={
-          Object {
-            "fontWeight": "bold",
-          }
-        }
+        className="t--sans m-v100 emotion-1"
       >
         <span
-          aria-label="Quantity"
+          className="emotion-0"
         >
-          1
+          <span>
+            MONKEY
+             
+            JOE
+          </span>
         </span>
-         ×
       </div>
       <div
-        className="emotion-3"
+        className="emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-1"
-        >
-          <span
-            className="emotion-0"
-          >
-            <span>
-              MONKEY
-               
-              JOE
-            </span>
-          </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          Died: 2004 — Age: 6
-        </div>
+        Died: 2004 — Age: 6
       </div>
     </div>
   </div>
@@ -40406,48 +40348,46 @@ exports[`Storyshots Common Components/Order Details OrderDetails: marriage 1`] =
 }
 
 <div>
-  <div>
+  <div
+    className="p-v300 br b--w br-b100 emotion-4"
+  >
+    <div
+      className="t--sans p-a300"
+      style={
+        Object {
+          "fontWeight": "bold",
+        }
+      }
+    >
+      <span
+        aria-label="Quantity"
+      >
+        1
+      </span>
+       ×
+    </div>
     <div
-      className="p-v300 br b--w br-b100 emotion-4"
+      className="emotion-3"
     >
       <div
-        className="t--sans p-a300"
-        style={
-          Object {
-            "fontWeight": "bold",
-          }
-        }
+        className="t--sans m-v100 emotion-1"
       >
         <span
-          aria-label="Quantity"
+          className="emotion-0"
         >
-          1
+          <span>
+            Laurel Johnson (Laurel Smith) & Terry Johnson (Terry Doe)
+          </span>
+          <wbr />
+          <span>
+            (Certified paper copy)
+          </span>
         </span>
-         ×
       </div>
       <div
-        className="emotion-3"
+        className="emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-1"
-        >
-          <span
-            className="emotion-0"
-          >
-            <span>
-              Laurel Johnson (Laurel Smith) & Terry Johnson (Terry Doe)
-            </span>
-            <wbr />
-            <span>
-              (Certified paper copy)
-            </span>
-          </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          
-        </div>
+        
       </div>
     </div>
   </div>
@@ -40520,130 +40460,128 @@ exports[`Storyshots Common Components/Order Details OrderDetailsDropdown: birth
   font-style: italic;
 }
 
-<div>
-  <div
-    className="dr dr--open emotion-8"
+<div
+  className="dr dr--open emotion-8"
+>
+  <button
+    aria-expanded={true}
+    className="dr-h emotion-1"
+    onClick={[Function]}
+    type="button"
   >
-    <button
-      aria-expanded={true}
-      className="dr-h emotion-1"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="p-a300"
     >
       <div
-        className="p-a300"
+        aria-hidden="true"
+        className="dr-ic"
       >
-        <div
-          aria-hidden="true"
-          className="dr-ic"
-        >
-          <svg
-            focusable="false"
-            viewBox="-2 8.5 18 25"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              className="dr-i emotion-0"
-              d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
-            />
-          </svg>
-        </div>
-        <h2
-          className="stp"
-        >
-          Order details
-        </h2>
-        <div
-          className="t--info"
+        <svg
+          focusable="false"
+          viewBox="-2 8.5 18 25"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          4
-           
-          items
-           ×
-           
-          $14.00
-           = $
-          56.00
-           
-          + service fee*
-        </div>
+          <path
+            className="dr-i emotion-0"
+            d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
+          />
+        </svg>
       </div>
-    </button>
-    <div
-      role="region"
-    >
+      <h2
+        className="stp"
+      >
+        Order details
+      </h2>
       <div
-        className="dr-c emotion-7"
+        className="t--info"
       >
-        <div>
+        4
+         
+        items
+         ×
+         
+        $14.00
+         = $
+        56.00
+         
+        + service fee*
+      </div>
+    </div>
+  </button>
+  <div
+    role="region"
+  >
+    <div
+      className="dr-c emotion-7"
+    >
+      <div>
+        <div
+          className="p-v300 br b--w br-b100 emotion-6"
+        >
+          <div
+            className="t--sans p-a300"
+            style={
+              Object {
+                "fontWeight": "bold",
+              }
+            }
+          >
+            <span
+              aria-label="Quantity"
+            >
+              4
+            </span>
+             ×
+          </div>
           <div
-            className="p-v300 br b--w br-b100 emotion-6"
+            className="emotion-5"
           >
             <div
-              className="t--sans p-a300"
-              style={
-                Object {
-                  "fontWeight": "bold",
-                }
-              }
+              className="t--sans m-v100 emotion-3"
             >
               <span
-                aria-label="Quantity"
+                className="emotion-2"
               >
-                4
+                <span>
+                  Carol
+                   
+                  Danvers
+                </span>
+                <wbr />
+                <span>
+                  (Certified paper copy)
+                </span>
               </span>
-               ×
             </div>
             <div
-              className="emotion-5"
+              className="emotion-4"
             >
-              <div
-                className="t--sans m-v100 emotion-3"
-              >
-                <span
-                  className="emotion-2"
-                >
-                  <span>
-                    Carol
-                     
-                    Danvers
-                  </span>
-                  <wbr />
-                  <span>
-                    (Certified paper copy)
-                  </span>
-                </span>
-              </div>
-              <div
-                className="emotion-4"
-              >
-                Born: 3/5/1968
-              </div>
+              Born: 3/5/1968
             </div>
           </div>
         </div>
-        <div
-          className="t--subinfo p-a300"
+      </div>
+      <div
+        className="t--subinfo p-a300"
+      >
+        * 
+        You will be charged an extra service fee of no more than 
+        $0.25
+         
+        plus 
+        2.15%
+        . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
+         
+        <a
+          href="https://www.boston.gov/common-questions-about-online-payments"
         >
-          * 
-          You will be charged an extra service fee of no more than 
-          $0.25
-           
-          plus 
-          2.15%
-          . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
-           
-          <a
-            href="https://www.boston.gov/common-questions-about-online-payments"
-          >
-            card service fees
-          </a>
-           at the City of Boston.
-        </div>
-        <div
-          className="ta-c t--subinfo b--g"
-        />
+          card service fees
+        </a>
+         at the City of Boston.
       </div>
+      <div
+        className="ta-c t--subinfo b--g"
+      />
     </div>
   </div>
 </div>
@@ -40659,59 +40597,57 @@ exports[`Storyshots Common Components/Order Details OrderDetailsDropdown: death
   padding: 0;
 }
 
-<div>
-  <div
-    className="dr  emotion-2"
+<div
+  className="dr  emotion-2"
+>
+  <button
+    aria-expanded={false}
+    className="dr-h emotion-1"
+    onClick={[Function]}
+    type="button"
   >
-    <button
-      aria-expanded={false}
-      className="dr-h emotion-1"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="p-a300"
     >
       <div
-        className="p-a300"
+        aria-hidden="true"
+        className="dr-ic"
       >
-        <div
-          aria-hidden="true"
-          className="dr-ic"
-        >
-          <svg
-            focusable="false"
-            viewBox="-2 8.5 18 25"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              className="dr-i emotion-0"
-              d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
-            />
-          </svg>
-        </div>
-        <h2
-          className="stp"
-        >
-          Order details
-        </h2>
-        <div
-          className="t--info"
+        <svg
+          focusable="false"
+          viewBox="-2 8.5 18 25"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          5
-           
-          items
-           ×
-           
-          $14.00
-           = $
-          70.00
-           
-          + service fee*
-        </div>
+          <path
+            className="dr-i emotion-0"
+            d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
+          />
+        </svg>
       </div>
-    </button>
-    <div
-      role="region"
-    />
-  </div>
+      <h2
+        className="stp"
+      >
+        Order details
+      </h2>
+      <div
+        className="t--info"
+      >
+        5
+         
+        items
+         ×
+         
+        $14.00
+         = $
+        70.00
+         
+        + service fee*
+      </div>
+    </div>
+  </button>
+  <div
+    role="region"
+  />
 </div>
 `;
 
@@ -40781,241 +40717,239 @@ exports[`Storyshots Common Components/Order Details OrderDetailsDropdown: death
   font-style: italic;
 }
 
-<div>
-  <div
-    className="dr dr--open emotion-18"
+<div
+  className="dr dr--open emotion-18"
+>
+  <button
+    aria-expanded={true}
+    className="dr-h emotion-1"
+    onClick={[Function]}
+    type="button"
   >
-    <button
-      aria-expanded={true}
-      className="dr-h emotion-1"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="p-a300"
     >
       <div
-        className="p-a300"
+        aria-hidden="true"
+        className="dr-ic"
       >
-        <div
-          aria-hidden="true"
-          className="dr-ic"
-        >
-          <svg
-            focusable="false"
-            viewBox="-2 8.5 18 25"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              className="dr-i emotion-0"
-              d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
-            />
-          </svg>
-        </div>
-        <h2
-          className="stp"
-        >
-          Order details
-        </h2>
-        <div
-          className="t--info"
+        <svg
+          focusable="false"
+          viewBox="-2 8.5 18 25"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          5
-           
-          items
-           ×
-           
-          $14.00
-           = $
-          70.00
-           
-          + service fee*
-        </div>
+          <path
+            className="dr-i emotion-0"
+            d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
+          />
+        </svg>
       </div>
-    </button>
-    <div
-      role="region"
-    >
+      <h2
+        className="stp"
+      >
+        Order details
+      </h2>
       <div
-        className="dr-c emotion-17"
+        className="t--info"
       >
-        <div>
+        5
+         
+        items
+         ×
+         
+        $14.00
+         = $
+        70.00
+         
+        + service fee*
+      </div>
+    </div>
+  </button>
+  <div
+    role="region"
+  >
+    <div
+      className="dr-c emotion-17"
+    >
+      <div>
+        <div
+          className="p-v300 br b--w  emotion-6"
+        >
+          <div
+            className="t--sans p-a300"
+            style={
+              Object {
+                "fontWeight": "bold",
+              }
+            }
+          >
+            <span
+              aria-label="Quantity"
+            >
+              1
+            </span>
+             ×
+          </div>
           <div
-            className="p-v300 br b--w  emotion-6"
+            className="emotion-5"
           >
             <div
-              className="t--sans p-a300"
-              style={
-                Object {
-                  "fontWeight": "bold",
-                }
-              }
+              className="t--sans m-v100 emotion-3"
             >
               <span
-                aria-label="Quantity"
+                className="emotion-2"
               >
-                1
+                <span>
+                  BRUCE
+                   
+                  BANNER
+                </span>
               </span>
-               ×
             </div>
             <div
-              className="emotion-5"
+              className="emotion-4"
             >
-              <div
-                className="t--sans m-v100 emotion-3"
-              >
-                <span
-                  className="emotion-2"
-                >
-                  <span>
-                    BRUCE
-                     
-                    BANNER
-                  </span>
-                </span>
-              </div>
-              <div
-                className="emotion-4"
-              >
-                Died: 3/4/2016 — Age: 53
-              </div>
+              Died: 3/4/2016 — Age: 53
             </div>
           </div>
+        </div>
+        <div
+          className="p-v300 br b--w br-t100 emotion-6"
+        >
+          <div
+            className="t--sans p-a300"
+            style={
+              Object {
+                "fontWeight": "bold",
+              }
+            }
+          >
+            <span
+              aria-label="Quantity"
+            >
+              3
+            </span>
+             ×
+          </div>
           <div
-            className="p-v300 br b--w br-t100 emotion-6"
+            className="emotion-5"
           >
             <div
-              className="t--sans p-a300"
-              style={
-                Object {
-                  "fontWeight": "bold",
-                }
-              }
+              className="t--sans m-v100 emotion-3"
             >
               <span
-                aria-label="Quantity"
+                className="emotion-2"
               >
-                3
+                <span>
+                  JAMES
+                   
+                  HOWLETT (LOGAN)
+                </span>
               </span>
-               ×
-            </div>
-            <div
-              className="emotion-5"
-            >
-              <div
-                className="t--sans m-v100 emotion-3"
+              <span
+                style={
+                  Object {
+                    "color": "#091f2f",
+                  }
+                }
               >
+                 — 
                 <span
-                  className="emotion-2"
-                >
-                  <span>
-                    JAMES
-                     
-                    HOWLETT (LOGAN)
-                  </span>
-                </span>
-                <span
+                  className="t--sans tt-u"
                   style={
                     Object {
-                      "color": "#091f2f",
+                      "fontStyle": "normal",
+                      "fontWeight": "bold",
                     }
                   }
                 >
-                   — 
-                  <span
-                    className="t--sans tt-u"
-                    style={
-                      Object {
-                        "fontStyle": "normal",
-                        "fontWeight": "bold",
-                      }
-                    }
-                  >
-                    pending
-                  </span>
+                  pending
                 </span>
-              </div>
-              <div
-                className="emotion-4"
-              >
-                Died: 4/15/2014 — Age: 44 yrs. 2 mos. 10 dys
-              </div>
+              </span>
+            </div>
+            <div
+              className="emotion-4"
+            >
+              Died: 4/15/2014 — Age: 44 yrs. 2 mos. 10 dys
             </div>
           </div>
+        </div>
+        <div
+          className="p-v300 br b--w br-a100 emotion-6"
+        >
+          <div
+            className="t--sans p-a300"
+            style={
+              Object {
+                "fontWeight": "bold",
+              }
+            }
+          >
+            <span
+              aria-label="Quantity"
+            >
+              1
+            </span>
+             ×
+          </div>
           <div
-            className="p-v300 br b--w br-a100 emotion-6"
+            className="emotion-5"
           >
             <div
-              className="t--sans p-a300"
-              style={
-                Object {
-                  "fontWeight": "bold",
-                }
-              }
+              className="t--sans m-v100 emotion-3"
             >
               <span
-                aria-label="Quantity"
+                className="emotion-2"
               >
-                1
+                <span>
+                  MONKEY
+                   
+                  JOE
+                </span>
               </span>
-               ×
             </div>
             <div
-              className="emotion-5"
+              className="emotion-4"
             >
-              <div
-                className="t--sans m-v100 emotion-3"
-              >
-                <span
-                  className="emotion-2"
-                >
-                  <span>
-                    MONKEY
-                     
-                    JOE
-                  </span>
-                </span>
-              </div>
-              <div
-                className="emotion-4"
-              >
-                Died: 2004 — Age: 6
-              </div>
+              Died: 2004 — Age: 6
             </div>
           </div>
         </div>
-        <div
-          className="t--subinfo p-a300"
-        >
-          * 
-          You will be charged an extra service fee of no more than 
-          $0.25
-           
-          plus 
-          2.15%
-          . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
-           
-          <a
-            href="https://www.boston.gov/common-questions-about-online-payments"
-          >
-            card service fees
-          </a>
-           at the City of Boston.
-        </div>
-        <div
-          className="ta-c t--subinfo b--g"
+      </div>
+      <div
+        className="t--subinfo p-a300"
+      >
+        * 
+        You will be charged an extra service fee of no more than 
+        $0.25
+         
+        plus 
+        2.15%
+        . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
+         
+        <a
+          href="https://www.boston.gov/common-questions-about-online-payments"
         >
-          <a
-            href="/death/cart"
-            onClick={[Function]}
-            onMouseEnter={[Function]}
-            style={
-              Object {
-                "display": "block",
-                "padding": "0.5em",
-              }
+          card service fees
+        </a>
+         at the City of Boston.
+      </div>
+      <div
+        className="ta-c t--subinfo b--g"
+      >
+        <a
+          href="/death/cart"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          style={
+            Object {
+              "display": "block",
+              "padding": "0.5em",
             }
-          >
-            edit cart
-          </a>
-        </div>
+          }
+        >
+          edit cart
+        </a>
       </div>
     </div>
   </div>
@@ -41032,59 +40966,57 @@ exports[`Storyshots Common Components/Order Details OrderDetailsDropdown: loadin
   padding: 0;
 }
 
-<div>
-  <div
-    className="dr  emotion-2"
+<div
+  className="dr  emotion-2"
+>
+  <button
+    aria-expanded={false}
+    className="dr-h emotion-1"
+    onClick={[Function]}
+    type="button"
   >
-    <button
-      aria-expanded={false}
-      className="dr-h emotion-1"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="p-a300"
     >
       <div
-        className="p-a300"
+        aria-hidden="true"
+        className="dr-ic"
       >
-        <div
-          aria-hidden="true"
-          className="dr-ic"
-        >
-          <svg
-            focusable="false"
-            viewBox="-2 8.5 18 25"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              className="dr-i emotion-0"
-              d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
-            />
-          </svg>
-        </div>
-        <h2
-          className="stp"
-        >
-          Order details
-        </h2>
-        <div
-          className="t--info"
+        <svg
+          focusable="false"
+          viewBox="-2 8.5 18 25"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          8
-           
-          items
-           ×
-           
-          $14.00
-           = $
-          112.00
-           
-          + service fee*
-        </div>
+          <path
+            className="dr-i emotion-0"
+            d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
+          />
+        </svg>
       </div>
-    </button>
-    <div
-      role="region"
-    />
-  </div>
+      <h2
+        className="stp"
+      >
+        Order details
+      </h2>
+      <div
+        className="t--info"
+      >
+        8
+         
+        items
+         ×
+         
+        $14.00
+         = $
+        112.00
+         
+        + service fee*
+      </div>
+    </div>
+  </button>
+  <div
+    role="region"
+  />
 </div>
 `;
 
@@ -41154,338 +41086,330 @@ exports[`Storyshots Common Components/Order Details OrderDetailsDropdown: marria
   font-style: italic;
 }
 
-<div>
-  <div
-    className="dr dr--open emotion-8"
+<div
+  className="dr dr--open emotion-8"
+>
+  <button
+    aria-expanded={true}
+    className="dr-h emotion-1"
+    onClick={[Function]}
+    type="button"
   >
-    <button
-      aria-expanded={true}
-      className="dr-h emotion-1"
-      onClick={[Function]}
-      type="button"
+    <div
+      className="p-a300"
     >
       <div
-        className="p-a300"
+        aria-hidden="true"
+        className="dr-ic"
       >
-        <div
-          aria-hidden="true"
-          className="dr-ic"
-        >
-          <svg
-            focusable="false"
-            viewBox="-2 8.5 18 25"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              className="dr-i emotion-0"
-              d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
-            />
-          </svg>
-        </div>
-        <h2
-          className="stp"
-        >
-          Order details
-        </h2>
-        <div
-          className="t--info"
+        <svg
+          focusable="false"
+          viewBox="-2 8.5 18 25"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          1
-           
-          item
-           ×
-           
-          $14.00
-           = $
-          14.00
-           
-          + service fee*
-        </div>
+          <path
+            className="dr-i emotion-0"
+            d="M16 21L.5 33.2c-.6.5-1.5.4-2.2-.2-.5-.6-.4-1.6.2-2l12.6-10-12.6-10c-.6-.5-.7-1.5-.2-2s1.5-.7 2.2-.2L16 21z"
+          />
+        </svg>
       </div>
-    </button>
-    <div
-      role="region"
-    >
+      <h2
+        className="stp"
+      >
+        Order details
+      </h2>
       <div
-        className="dr-c emotion-7"
+        className="t--info"
       >
-        <div>
+        1
+         
+        item
+         ×
+         
+        $14.00
+         = $
+        14.00
+         
+        + service fee*
+      </div>
+    </div>
+  </button>
+  <div
+    role="region"
+  >
+    <div
+      className="dr-c emotion-7"
+    >
+      <div>
+        <div
+          className="p-v300 br b--w br-b100 emotion-6"
+        >
+          <div
+            className="t--sans p-a300"
+            style={
+              Object {
+                "fontWeight": "bold",
+              }
+            }
+          >
+            <span
+              aria-label="Quantity"
+            >
+              1
+            </span>
+             ×
+          </div>
           <div
-            className="p-v300 br b--w br-b100 emotion-6"
+            className="emotion-5"
           >
             <div
-              className="t--sans p-a300"
-              style={
-                Object {
-                  "fontWeight": "bold",
-                }
-              }
+              className="t--sans m-v100 emotion-3"
             >
               <span
-                aria-label="Quantity"
+                className="emotion-2"
               >
-                1
+                <span>
+                  Laurel Johnson (Laurel Smith) & Terry Johnson (Terry Doe)
+                </span>
+                <wbr />
+                <span>
+                  (Certified paper copy)
+                </span>
               </span>
-               ×
             </div>
             <div
-              className="emotion-5"
+              className="emotion-4"
             >
-              <div
-                className="t--sans m-v100 emotion-3"
-              >
-                <span
-                  className="emotion-2"
-                >
-                  <span>
-                    Laurel Johnson (Laurel Smith) & Terry Johnson (Terry Doe)
-                  </span>
-                  <wbr />
-                  <span>
-                    (Certified paper copy)
-                  </span>
-                </span>
-              </div>
-              <div
-                className="emotion-4"
-              >
-                
-              </div>
+              
             </div>
           </div>
         </div>
-        <div
-          className="t--subinfo p-a300"
+      </div>
+      <div
+        className="t--subinfo p-a300"
+      >
+        * 
+        You will be charged an extra service fee of no more than 
+        $0.25
+         
+        plus 
+        2.15%
+        . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
+         
+        <a
+          href="https://www.boston.gov/common-questions-about-online-payments"
         >
-          * 
-          You will be charged an extra service fee of no more than 
-          $0.25
-           
-          plus 
-          2.15%
-          . This fee goes directly to a third party to pay for the cost of card processing. Learn more about
-           
-          <a
-            href="https://www.boston.gov/common-questions-about-online-payments"
-          >
-            card service fees
-          </a>
-           at the City of Boston.
-        </div>
-        <div
-          className="ta-c t--subinfo b--g"
-        />
+          card service fees
+        </a>
+         at the City of Boston.
       </div>
+      <div
+        className="ta-c t--subinfo b--g"
+      />
     </div>
   </div>
 </div>
 `;
 
 exports[`Storyshots Common Components/Pagination 2 pages 1`] = `
-<div>
-  <ul
-    className="pg"
+<ul
+  className="pg"
+>
+  <li
+    className="pg-li"
   >
-    <li
-      className="pg-li"
+    <a
+      className="pg-li-i pg-li-i--link pg-li-i--a"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link pg-li-i--a"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        1
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      1
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        2
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      2
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        ≫
-      </a>
-    </li>
-  </ul>
-</div>
+      ≫
+    </a>
+  </li>
+</ul>
 `;
 
 exports[`Storyshots Common Components/Pagination 7 pages 1`] = `
-<div>
-  <ul
-    className="pg"
+<ul
+  className="pg"
+>
+  <li
+    className="pg-li"
   >
-    <li
-      className="pg-li"
+    <a
+      className="pg-li-i pg-li-i--link"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        ≪
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      ≪
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        1
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      1
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link pg-li-i--a"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link pg-li-i--a"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        2
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      2
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        3
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      3
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        4
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      4
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        ≫
-      </a>
-    </li>
-  </ul>
-</div>
+      ≫
+    </a>
+  </li>
+</ul>
 `;
 
 exports[`Storyshots Common Components/Pagination 20 pages 1`] = `
-<div>
-  <ul
-    className="pg"
+<ul
+  className="pg"
+>
+  <li
+    className="pg-li"
   >
-    <li
-      className="pg-li"
+    <a
+      className="pg-li-i pg-li-i--link"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        ≪
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      ≪
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        17
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      17
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link pg-li-i--a"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link pg-li-i--a"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        18
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      18
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        19
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      19
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link "
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link "
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        20
-      </a>
-    </li>
-    <li
-      className="pg-li"
+      20
+    </a>
+  </li>
+  <li
+    className="pg-li"
+  >
+    <a
+      className="pg-li-i pg-li-i--link"
+      href=""
+      onClick={[Function]}
+      onMouseEnter={[Function]}
     >
-      <a
-        className="pg-li-i pg-li-i--link"
-        href=""
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-      >
-        ≫
-      </a>
-    </li>
-  </ul>
-</div>
+      ≫
+    </a>
+  </li>
+</ul>
 `;
 
 exports[`Storyshots Common Components/QuantityDropdown default 1`] = `
@@ -41529,108 +41453,106 @@ exports[`Storyshots Common Components/QuantityDropdown default 1`] = `
   content: 'Qty';
 }
 
-<div>
+<div
+  style={
+    Object {
+      "display": "flex",
+      "justifyContent": "center",
+    }
+  }
+>
   <div
     style={
       Object {
-        "display": "flex",
-        "justifyContent": "center",
+        "margin": "2rem auto",
       }
     }
   >
     <div
-      style={
-        Object {
-          "margin": "2rem auto",
-        }
-      }
+      className="emotion-2"
     >
+      <input
+        aria-label="Quantity"
+        className="txt-f txt-f--auto ta-r emotion-0"
+        min="1"
+        name="quantity"
+        onBlur={[Function]}
+        onChange={[Function]}
+        size={3}
+        type="number"
+        value={1}
+      />
       <div
-        className="emotion-2"
+        aria-hidden="true"
+        className="sel-c sel-c--sq emotion-1"
       >
-        <input
-          aria-label="Quantity"
-          className="txt-f txt-f--auto ta-r emotion-0"
-          min="1"
-          name="quantity"
-          onBlur={[Function]}
+        <select
+          className="sel-f sel-f--sq"
+          name="quantityMenu"
           onChange={[Function]}
-          size={3}
-          type="number"
-          value={1}
-        />
-        <div
-          aria-hidden="true"
-          className="sel-c sel-c--sq emotion-1"
+          value="1"
         >
-          <select
-            className="sel-f sel-f--sq"
-            name="quantityMenu"
-            onChange={[Function]}
+          <option
             value="1"
           >
-            <option
-              value="1"
-            >
-              1
-            </option>
-            <option
-              value="2"
-            >
-              2
-            </option>
-            <option
-              value="3"
-            >
-              3
-            </option>
-            <option
-              value="4"
-            >
-              4
-            </option>
-            <option
-              value="5"
-            >
-              5
-            </option>
-            <option
-              value="6"
-            >
-              6
-            </option>
-            <option
-              value="7"
-            >
-              7
-            </option>
-            <option
-              value="8"
-            >
-              8
-            </option>
-            <option
-              value="9"
-            >
-              9
-            </option>
-            <option
-              value="10"
-            >
-              10
-            </option>
-            <option
-              disabled={true}
-            >
-              ---------------
-            </option>
-            <option
-              value="other"
-            >
-              Other…
-            </option>
-          </select>
-        </div>
+            1
+          </option>
+          <option
+            value="2"
+          >
+            2
+          </option>
+          <option
+            value="3"
+          >
+            3
+          </option>
+          <option
+            value="4"
+          >
+            4
+          </option>
+          <option
+            value="5"
+          >
+            5
+          </option>
+          <option
+            value="6"
+          >
+            6
+          </option>
+          <option
+            value="7"
+          >
+            7
+          </option>
+          <option
+            value="8"
+          >
+            8
+          </option>
+          <option
+            value="9"
+          >
+            9
+          </option>
+          <option
+            value="10"
+          >
+            10
+          </option>
+          <option
+            disabled={true}
+          >
+            ---------------
+          </option>
+          <option
+            value="other"
+          >
+            Other…
+          </option>
+        </select>
       </div>
     </div>
   </div>
@@ -41694,95 +41616,93 @@ exports[`Storyshots Common Components/Question Components/AltSpellings default 1
   stroke: #fff;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <h3
+    className="txt-l"
+    id="altSpellings"
   >
-    <h3
-      className="txt-l"
-      id="altSpellings"
-    >
-      Alternate spellings 
-      <span
-        style={
-          Object {
-            "fontSize": "90%",
-          }
+    Alternate spellings 
+    <span
+      style={
+        Object {
+          "fontSize": "90%",
         }
-      >
-        (if any)
-      </span>
-    </h3>
-    <ul
-      aria-labelledby="altSpellings"
-      className="emotion-0"
+      }
     >
-      <li
-        style={
-          Object {
-            "marginBottom": "1em",
-          }
+      (if any)
+    </span>
+  </h3>
+  <ul
+    aria-labelledby="altSpellings"
+    className="emotion-0"
+  >
+    <li
+      style={
+        Object {
+          "marginBottom": "1em",
         }
-      >
-        <input
-          aria-label="Spelling option 1"
-          className="txt-f"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="text"
-          value=""
-        />
-      </li>
-    </ul>
-    <button
-      className="emotion-2"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+      }
     >
-      <svg
-        aria-hidden="true"
-        className="emotion-1"
-        focusable="false"
-        viewBox="0 0 10 10"
-      >
-        <circle
-          cx="5"
-          cy="5"
-          r="4"
-          stroke="none"
+      <input
+        aria-label="Spelling option 1"
+        className="txt-f"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </li>
+  </ul>
+  <button
+    className="emotion-2"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="emotion-1"
+      focusable="false"
+      viewBox="0 0 10 10"
+    >
+      <circle
+        cx="5"
+        cy="5"
+        r="4"
+        stroke="none"
+      />
+      <g>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="5"
+          x2="5"
+          y1="2.5"
+          y2="7.5"
         />
-        <g>
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="5"
-            x2="5"
-            y1="2.5"
-            y2="7.5"
-          />
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="2.5"
-            x2="7.5"
-            y1="5"
-            y2="5"
-          />
-        </g>
-      </svg>
-      <span>
-        Add another option
-      </span>
-    </button>
-  </div>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="2.5"
+          x2="7.5"
+          y1="5"
+          y2="5"
+        />
+      </g>
+    </svg>
+    <span>
+      Add another option
+    </span>
+  </button>
 </div>
 `;
 
@@ -41843,95 +41763,93 @@ exports[`Storyshots Common Components/Question Components/AltSpellings with exis
   stroke: #fff;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <h3
+    className="txt-l"
+    id="altSpellings"
   >
-    <h3
-      className="txt-l"
-      id="altSpellings"
-    >
-      Alternate spellings 
-      <span
-        style={
-          Object {
-            "fontSize": "90%",
-          }
+    Alternate spellings 
+    <span
+      style={
+        Object {
+          "fontSize": "90%",
         }
-      >
-        (if any)
-      </span>
-    </h3>
-    <ul
-      aria-labelledby="altSpellings"
-      className="emotion-0"
+      }
     >
-      <li
-        style={
-          Object {
-            "marginBottom": "1em",
-          }
+      (if any)
+    </span>
+  </h3>
+  <ul
+    aria-labelledby="altSpellings"
+    className="emotion-0"
+  >
+    <li
+      style={
+        Object {
+          "marginBottom": "1em",
         }
-      >
-        <input
-          aria-label="Spelling option 1"
-          className="txt-f"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="text"
-          value=""
-        />
-      </li>
-    </ul>
-    <button
-      className="emotion-2"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+      }
     >
-      <svg
-        aria-hidden="true"
-        className="emotion-1"
-        focusable="false"
-        viewBox="0 0 10 10"
-      >
-        <circle
-          cx="5"
-          cy="5"
-          r="4"
-          stroke="none"
+      <input
+        aria-label="Spelling option 1"
+        className="txt-f"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </li>
+  </ul>
+  <button
+    className="emotion-2"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="emotion-1"
+      focusable="false"
+      viewBox="0 0 10 10"
+    >
+      <circle
+        cx="5"
+        cy="5"
+        r="4"
+        stroke="none"
+      />
+      <g>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="5"
+          x2="5"
+          y1="2.5"
+          y2="7.5"
         />
-        <g>
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="5"
-            x2="5"
-            y1="2.5"
-            y2="7.5"
-          />
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="2.5"
-            x2="7.5"
-            y1="5"
-            y2="5"
-          />
-        </g>
-      </svg>
-      <span>
-        Add another option
-      </span>
-    </button>
-  </div>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="2.5"
+          x2="7.5"
+          y1="5"
+          y2="5"
+        />
+      </g>
+    </svg>
+    <span>
+      Add another option
+    </span>
+  </button>
 </div>
 `;
 
@@ -41967,42 +41885,40 @@ exports[`Storyshots Common Components/Question Components/AnswerIcon check mark
   stroke: none;
 }
 
-<div>
+<div
+  style={
+    Object {
+      "color": "#000",
+      "display": "flex",
+      "justifyContent": "center",
+    }
+  }
+>
   <div
     style={
       Object {
-        "color": "#000",
-        "display": "flex",
-        "justifyContent": "center",
+        "margin": "2rem auto",
       }
     }
   >
-    <div
-      style={
-        Object {
-          "margin": "2rem auto",
-        }
-      }
+    <svg
+      aria-hidden="true"
+      className="checkMark emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="checkMark emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
-        />
-        <path
-          d="M50.937,26.2,30.069,47.068,21,38.791"
-          transform="translate(-5.591 -6.213)"
-        />
-      </svg>
-    </div>
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
+      />
+      <path
+        d="M50.937,26.2,30.069,47.068,21,38.791"
+        transform="translate(-5.591 -6.213)"
+      />
+    </svg>
   </div>
 </div>
 `;
@@ -42039,43 +41955,41 @@ exports[`Storyshots Common Components/Question Components/AnswerIcon exclamation
   stroke: none;
 }
 
-<div>
+<div
+  style={
+    Object {
+      "color": "#000",
+      "display": "flex",
+      "justifyContent": "center",
+    }
+  }
+>
   <div
     style={
       Object {
-        "color": "#000",
-        "display": "flex",
-        "justifyContent": "center",
+        "margin": "2rem auto",
       }
     }
   >
-    <div
-      style={
-        Object {
-          "margin": "2rem auto",
-        }
-      }
+    <svg
+      aria-hidden="true"
+      className="excl emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="excl emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
-        />
-        <path
-          d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
-          fill="currentColor"
-          transform="translate(-110 -101) scale(1.4)"
-        />
-      </svg>
-    </div>
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
+      />
+      <path
+        d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
+        fill="currentColor"
+        transform="translate(-110 -101) scale(1.4)"
+      />
+    </svg>
   </div>
 </div>
 `;
@@ -42112,50 +42026,48 @@ exports[`Storyshots Common Components/Question Components/AnswerIcon question ma
   stroke: none;
 }
 
-<div>
+<div
+  style={
+    Object {
+      "color": "#000",
+      "display": "flex",
+      "justifyContent": "center",
+    }
+  }
+>
   <div
     style={
       Object {
-        "color": "#000",
-        "display": "flex",
-        "justifyContent": "center",
+        "margin": "2rem auto",
       }
     }
   >
-    <div
-      style={
-        Object {
-          "margin": "2rem auto",
-        }
-      }
+    <svg
+      aria-hidden="true"
+      className="questionMark emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="questionMark emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
+      />
+      <g
+        transform="translate(20.339 12.679)"
+      >
+        <path
+          d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+          transform="translate(-26.6 -17.9)"
         />
-        <g
-          transform="translate(20.339 12.679)"
-        >
-          <path
-            d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-            transform="translate(-26.6 -17.9)"
-          />
-          <path
-            d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-            transform="translate(-27.437 -21.605)"
-          />
-        </g>
-      </svg>
-    </div>
+        <path
+          d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+          transform="translate(-27.437 -21.605)"
+        />
+      </g>
+    </svg>
   </div>
 </div>
 `;
@@ -42192,50 +42104,48 @@ exports[`Storyshots Common Components/Question Components/AnswerIcon x symbol 1`
   stroke: none;
 }
 
-<div>
+<div
+  style={
+    Object {
+      "color": "#000",
+      "display": "flex",
+      "justifyContent": "center",
+    }
+  }
+>
   <div
     style={
       Object {
-        "color": "#000",
-        "display": "flex",
-        "justifyContent": "center",
+        "margin": "2rem auto",
       }
     }
   >
-    <div
-      style={
-        Object {
-          "margin": "2rem auto",
-        }
-      }
+    <svg
+      aria-hidden="true"
+      className="xSymbol emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="xSymbol emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
+      />
+      <g
+        transform="translate(19.107 19.107)"
+      >
+        <line
+          x2="22.629"
+          y2="22.629"
         />
-        <g
-          transform="translate(19.107 19.107)"
-        >
-          <line
-            x2="22.629"
-            y2="22.629"
-          />
-          <line
-            x2="22.629"
-            y1="22.629"
-          />
-        </g>
-      </svg>
-    </div>
+        <line
+          x2="22.629"
+          y1="22.629"
+        />
+      </g>
+    </svg>
   </div>
 </div>
 `;
@@ -42246,57 +42156,56 @@ exports[`Storyshots Common Components/Question Components/BackButton default 1`]
   padding-left: 0 !important;
 }
 
-<div>
+<div
+  style={
+    Object {
+      "color": "#000",
+      "display": "flex",
+      "justifyContent": "center",
+    }
+  }
+>
   <div
     style={
       Object {
-        "color": "#000",
-        "display": "flex",
-        "justifyContent": "center",
+        "margin": "2rem auto",
       }
     }
   >
-    <div
-      style={
-        Object {
-          "margin": "2rem auto",
-        }
-      }
+    <button
+      className="lnk emotion-0"
+      onClick={[Function]}
+      type="button"
     >
-      <button
-        className="lnk emotion-0"
-        onClick={[Function]}
-        type="button"
+      <span
+        style={
+          Object {
+            "fontStyle": "italic",
+            "whiteSpace": "nowrap",
+          }
+        }
       >
         <span
+          aria-hidden="true"
           style={
             Object {
-              "fontStyle": "italic",
-              "whiteSpace": "nowrap",
+              "fontStyle": "normal",
             }
           }
         >
-          <span
-            aria-hidden="true"
-            style={
-              Object {
-                "fontStyle": "normal",
-              }
-            }
-          >
-            ←
-          </span>
-           
-          Back
+          ←
         </span>
-      </button>
-    </div>
+         
+        Back
+      </span>
+    </button>
   </div>
 </div>
 `;
 
 exports[`Storyshots Common Components/Question Components/QuestionComponent default 1`] = `
-.emotion-9 fieldset + fieldset {
+Array [
+  .emotion-9 fieldset + fieldset {
   margin-top: 2rem;
 }
 
@@ -42443,38 +42352,12 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent defa
   opacity: 0.25;
 }
 
-.emotion-10 {
-  text-align: center;
+.emotion-7 {
+  margin: 2rem 0 3rem;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-10 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-10 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-10 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-10 .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-7 {
-  margin: 2rem 0 3rem;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-7 {
+@media screen and (min-width:768px) {
+  .emotion-7 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -42535,8 +42418,7 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent defa
   stroke: none;
 }
 
-<div>
-  <div
+<div
     className="emotion-9"
   >
     <fieldset
@@ -42669,9 +42551,35 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent defa
         </label>
       </div>
     </fieldset>
-  </div>
-  <div
-    className="g g--mr emotion-10"
+  </div>,
+  .emotion-0 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-0 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-0 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-0 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-0 .lnk {
+    padding-left: 0;
+  }
+}
+
+<div
+    className="g g--mr emotion-0"
   >
     <div
       className="t--info g--6 m-b500"
@@ -42688,12 +42596,13 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent defa
         Next question
       </button>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/QuestionComponent with back button 1`] = `
-.emotion-9 fieldset + fieldset {
+Array [
+  .emotion-9 fieldset + fieldset {
   margin-top: 2rem;
 }
 
@@ -42840,37 +42749,6 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
   opacity: 0.25;
 }
 
-.emotion-11 {
-  text-align: center;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-11 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-11 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-11 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-11 .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-10 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
 .emotion-7 {
   margin: 2rem 0 3rem;
 }
@@ -42937,8 +42815,7 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
   stroke: none;
 }
 
-<div>
-  <div
+<div
     className="emotion-9"
   >
     <fieldset
@@ -43071,15 +42948,46 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
         </label>
       </div>
     </fieldset>
-  </div>
-  <div
-    className="g g--mr emotion-11"
+  </div>,
+  .emotion-1 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-1 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-1 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-1 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-1 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-0 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+<div
+    className="g g--mr emotion-1"
   >
     <div
       className="t--info g--6 m-b500"
     >
       <button
-        className="lnk emotion-10"
+        className="lnk emotion-0"
         onClick={[Function]}
         type="button"
       >
@@ -43118,12 +43026,13 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
         Next question
       </button>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/QuestionComponent with reset button 1`] = `
-.emotion-9 fieldset + fieldset {
+Array [
+  .emotion-9 fieldset + fieldset {
   margin-top: 2rem;
 }
 
@@ -43270,37 +43179,6 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
   opacity: 0.25;
 }
 
-.emotion-11 {
-  text-align: center;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-11 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-11 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-11 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-11 .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-10 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
 .emotion-7 {
   margin: 2rem 0 3rem;
 }
@@ -43367,8 +43245,7 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
   stroke: none;
 }
 
-<div>
-  <div
+<div
     className="emotion-9"
   >
     <fieldset
@@ -43501,15 +43378,46 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
         </label>
       </div>
     </fieldset>
-  </div>
-  <div
-    className="g g--mr emotion-11"
+  </div>,
+  .emotion-1 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-1 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-1 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-1 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-1 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-0 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+<div
+    className="g g--mr emotion-1"
   >
     <div
       className="t--info g--6 m-b500"
     >
       <button
-        className="lnk emotion-10"
+        className="lnk emotion-0"
         onClick={[Function]}
         type="button"
       >
@@ -43547,8 +43455,8 @@ exports[`Storyshots Common Components/Question Components/QuestionComponent with
         Start over
       </button>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/RadioItemComponent multiple answers 1`] = `
@@ -43646,290 +43554,27 @@ exports[`Storyshots Common Components/Question Components/RadioItemComponent mul
   opacity: 0.25;
 }
 
-<div>
-  <ul
-    role="radiogroup"
-    style={
-      Object {
-        "color": "#000",
-        "display": "flex",
-        "flexWrap": "wrap",
-        "listStyle": "none",
-        "margin": 0,
-      }
+<ul
+  role="radiogroup"
+  style={
+    Object {
+      "color": "#000",
+      "display": "flex",
+      "flexWrap": "wrap",
+      "listStyle": "none",
+      "margin": 0,
     }
-  >
-    <li
-      style={
-        Object {
-          "margin": "1rem",
-        }
-      }
-    >
-      <label
-        className="  emotion-0"
-      >
-        <svg
-          style={
-            Object {
-              "fill": "none",
-              "stroke": "currentColor",
-              "strokeWidth": "0.5",
-              "width": 170,
-            }
-          }
-          viewBox="0 0 15 15"
-        >
-          <circle
-            cx="5"
-            cy="5"
-            r="4.5"
-          />
-          <circle
-            cx="10"
-            cy="5"
-            r="4.5"
-          />
-          <circle
-            cx="5"
-            cy="10"
-            r="4.5"
-          />
-          <circle
-            cx="10"
-            cy="10"
-            r="4.5"
-          />
-        </svg>
-        <input
-          checked={false}
-          name="answer"
-          onChange={[Function]}
-          type="radio"
-          value="answer1"
-        />
-        <span>
-          Answer 1
-        </span>
-      </label>
-    </li>
-    <li
-      style={
-        Object {
-          "margin": "1rem",
-        }
-      }
-    >
-      <label
-        className="  emotion-0"
-      >
-        <svg
-          style={
-            Object {
-              "fill": "none",
-              "stroke": "currentColor",
-              "strokeWidth": "0.5",
-              "width": 170,
-            }
-          }
-          viewBox="0 0 15 15"
-        >
-          <circle
-            cx="5"
-            cy="5"
-            r="4.5"
-          />
-          <circle
-            cx="10"
-            cy="5"
-            r="4.5"
-          />
-          <circle
-            cx="5"
-            cy="10"
-            r="4.5"
-          />
-          <circle
-            cx="10"
-            cy="10"
-            r="4.5"
-          />
-        </svg>
-        <input
-          checked={false}
-          name="answer"
-          onChange={[Function]}
-          type="radio"
-          value="answer2"
-        />
-        <span>
-          Answer 2
-        </span>
-      </label>
-    </li>
-    <li
-      style={
-        Object {
-          "margin": "1rem",
-        }
-      }
-    >
-      <label
-        className="  emotion-0"
-      >
-        <svg
-          style={
-            Object {
-              "fill": "none",
-              "stroke": "currentColor",
-              "strokeWidth": "0.5",
-              "width": 170,
-            }
-          }
-          viewBox="0 0 15 15"
-        >
-          <circle
-            cx="5"
-            cy="5"
-            r="4.5"
-          />
-          <circle
-            cx="10"
-            cy="5"
-            r="4.5"
-          />
-          <circle
-            cx="5"
-            cy="10"
-            r="4.5"
-          />
-          <circle
-            cx="10"
-            cy="10"
-            r="4.5"
-          />
-        </svg>
-        <input
-          checked={false}
-          name="answer"
-          onChange={[Function]}
-          type="radio"
-          value="answer3"
-        />
-        <span>
-          Answer 3
-        </span>
-      </label>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Storyshots Common Components/Question Components/RadioItemComponent single item 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  margin-bottom: 2rem;
-  color: #091f2f;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-0 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
   }
-}
-
-.emotion-0 input {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-0 input:focus + span {
-  outline: 4px solid #288be4;
-  outline-offset: 1px;
-}
-
-.emotion-0 svg {
-  -webkit-flex-basis: 20%;
-  -ms-flex-preferred-size: 20%;
-  flex-basis: 20%;
-}
-
-@media screen and (max-width:768px) {
-  .emotion-0 svg {
-    height: 100%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .emotion-0 svg {
-    -webkit-flex-basis: auto;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
-  }
-}
-
-.emotion-0 span {
-  margin-left: 1rem;
-  padding: 0.8rem 1.5rem;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  text-transform: uppercase;
-  border: 4px solid #091f2f;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-0 span {
-    margin-top: 1.75rem;
-    margin-left: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-    white-space: nowrap;
-  }
-}
-
-.emotion-0.selected span {
-  background-color: #e0e0e0;
-}
-
-.emotion-0.inactive {
-  opacity: 0.25;
-}
-
-<div>
-  <div
+>
+  <li
     style={
       Object {
-        "color": "#000",
+        "margin": "1rem",
       }
     }
   >
     <label
-      className="selected  emotion-0"
+      className="  emotion-0"
     >
       <svg
         style={
@@ -43964,22 +43609,158 @@ exports[`Storyshots Common Components/Question Components/RadioItemComponent sin
         />
       </svg>
       <input
-        checked={true}
-        name="question"
+        checked={false}
+        name="answer"
         onChange={[Function]}
         type="radio"
-        value="question"
+        value="answer1"
       />
       <span>
-        Question
+        Answer 1
       </span>
     </label>
-  </div>
-</div>
+  </li>
+  <li
+    style={
+      Object {
+        "margin": "1rem",
+      }
+    }
+  >
+    <label
+      className="  emotion-0"
+    >
+      <svg
+        style={
+          Object {
+            "fill": "none",
+            "stroke": "currentColor",
+            "strokeWidth": "0.5",
+            "width": 170,
+          }
+        }
+        viewBox="0 0 15 15"
+      >
+        <circle
+          cx="5"
+          cy="5"
+          r="4.5"
+        />
+        <circle
+          cx="10"
+          cy="5"
+          r="4.5"
+        />
+        <circle
+          cx="5"
+          cy="10"
+          r="4.5"
+        />
+        <circle
+          cx="10"
+          cy="10"
+          r="4.5"
+        />
+      </svg>
+      <input
+        checked={false}
+        name="answer"
+        onChange={[Function]}
+        type="radio"
+        value="answer2"
+      />
+      <span>
+        Answer 2
+      </span>
+    </label>
+  </li>
+  <li
+    style={
+      Object {
+        "margin": "1rem",
+      }
+    }
+  >
+    <label
+      className="  emotion-0"
+    >
+      <svg
+        style={
+          Object {
+            "fill": "none",
+            "stroke": "currentColor",
+            "strokeWidth": "0.5",
+            "width": 170,
+          }
+        }
+        viewBox="0 0 15 15"
+      >
+        <circle
+          cx="5"
+          cy="5"
+          r="4.5"
+        />
+        <circle
+          cx="10"
+          cy="5"
+          r="4.5"
+        />
+        <circle
+          cx="5"
+          cy="10"
+          r="4.5"
+        />
+        <circle
+          cx="10"
+          cy="10"
+          r="4.5"
+        />
+      </svg>
+      <input
+        checked={false}
+        name="answer"
+        onChange={[Function]}
+        type="radio"
+        value="answer3"
+      />
+      <span>
+        Answer 3
+      </span>
+    </label>
+  </li>
+</ul>
 `;
 
-exports[`Storyshots Common Components/Question Components/VerifyIdentificationComponent default 1`] = `
-.emotion-13 {
+exports[`Storyshots Common Components/Question Components/RadioItemComponent single item 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 2rem;
+  color: #091f2f;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
+.emotion-0 input {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -43991,26 +43772,119 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
   width: 1px;
 }
 
-.emotion-16 {
-  margin: 0;
-  padding: 0;
-  border: none;
+.emotion-0 input:focus + span {
+  outline: 4px solid #288be4;
+  outline-offset: 1px;
 }
 
-.emotion-16 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
+.emotion-0 svg {
+  -webkit-flex-basis: 20%;
+  -ms-flex-preferred-size: 20%;
+  flex-basis: 20%;
 }
 
-.emotion-16 h2 {
-  margin-bottom: 0;
+@media screen and (max-width:768px) {
+  .emotion-0 svg {
+    height: 100%;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-0 svg {
+    -webkit-flex-basis: auto;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+  }
+}
+
+.emotion-0 span {
+  margin-left: 1rem;
+  padding: 0.8rem 1.5rem;
   font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
-  color: #091f2f;
+  text-transform: uppercase;
+  border: 4px solid #091f2f;
 }
 
-.emotion-0 {
+@media screen and (min-width:768px) {
+  .emotion-0 span {
+    margin-top: 1.75rem;
+    margin-left: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex-grow: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    white-space: nowrap;
+  }
+}
+
+.emotion-0.selected span {
+  background-color: #e0e0e0;
+}
+
+.emotion-0.inactive {
+  opacity: 0.25;
+}
+
+<div
+  style={
+    Object {
+      "color": "#000",
+    }
+  }
+>
+  <label
+    className="selected  emotion-0"
+  >
+    <svg
+      style={
+        Object {
+          "fill": "none",
+          "stroke": "currentColor",
+          "strokeWidth": "0.5",
+          "width": 170,
+        }
+      }
+      viewBox="0 0 15 15"
+    >
+      <circle
+        cx="5"
+        cy="5"
+        r="4.5"
+      />
+      <circle
+        cx="10"
+        cy="5"
+        r="4.5"
+      />
+      <circle
+        cx="5"
+        cy="10"
+        r="4.5"
+      />
+      <circle
+        cx="10"
+        cy="10"
+        r="4.5"
+      />
+    </svg>
+    <input
+      checked={true}
+      name="question"
+      onChange={[Function]}
+      type="radio"
+      value="question"
+    />
+    <span>
+      Question
+    </span>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Common Components/Question Components/VerifyIdentificationComponent default 1`] = `
+Array [
+  .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
   font-family: Lora,Georgia,serif !important;
@@ -44030,85 +43904,16 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
   font-size: 1rem;
 }
 
-.emotion-6 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-4:focus > div {
-  outline: 4px solid #000;
-  outline-offset: -5px;
-}
-
-.emotion-3 {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  background-color: currentColor;
-}
-
-.emotion-2 {
-  background-color: #288be4;
-  color: #000;
-}
-
-.emotion-2.id {
-  padding: 2rem 4rem;
-}
-
-.emotion-5:focus {
-  outline: 3px solid #000;
-  outline-offset: -4px;
-}
-
-.emotion-15 {
-  padding-left: 0;
-  color: #091f2f;
-}
-
-.emotion-15 li {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 1rem;
-  margin-left: 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-15 li {
-    margin-left: 1rem;
-  }
-}
-
-.emotion-15 li .name > span:last-of-type {
-  margin: 0 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-15 li .name > span:last-of-type {
-    margin: 0 1rem;
-  }
-}
-
-<div>
-  <h2
+<h2
     className="emotion-0"
   >
     Verify your identity
-  </h2>
+  </h2>,
   <p
     className="lh--400 t--s400 m-b500"
   >
     Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
-  </p>
+  </p>,
   <p
     className="lh--400 t--s400 m-b500"
   >
@@ -44129,8 +43934,28 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     </a>
      
     with questions.
-  </p>
-  <h3
+  </p>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h3
     className="secondary m-t700 emotion-0"
     style={
       Object {
@@ -44139,10 +43964,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     }
   >
     Upload ID images
-  </h3>
+  </h3>,
   <h3>
     We accept the following forms of ID:
-  </h3>
+  </h3>,
   <ul
     className="lh--300"
   >
@@ -44158,18 +43983,49 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     <li>
       Military ID
     </li>
-  </ul>
-  <div
+  </ul>,
+  .emotion-4 {
+  position: relative;
+  overflow: hidden;
+}
+
+.emotion-2:focus > div {
+  outline: 4px solid #000;
+  outline-offset: -5px;
+}
+
+.emotion-1 {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  background-color: currentColor;
+}
+
+.emotion-0 {
+  background-color: #288be4;
+  color: #000;
+}
+
+.emotion-0.id {
+  padding: 2rem 4rem;
+}
+
+.emotion-3:focus {
+  outline: 3px solid #000;
+  outline-offset: -4px;
+}
+
+<div
     className="g"
   >
     <div
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-6"
+        className="br br-a200 emotion-4"
       >
         <div
-          className="emotion-4"
+          className="emotion-2"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -44196,7 +44052,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-3"
+            className="emotion-1"
           >
             <div
               style={
@@ -44206,7 +44062,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -44273,7 +44129,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-5"
+            className="btn btn--w btn--b  emotion-3"
             onClick={[Function]}
             style={
               Object {
@@ -44291,10 +44147,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-6"
+        className="br br-a200 emotion-4"
       >
         <div
-          className="emotion-4"
+          className="emotion-2"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -44321,7 +44177,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-3"
+            className="emotion-1"
           >
             <div
               style={
@@ -44331,7 +44187,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -44415,7 +44271,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-5"
+            className="btn btn--w btn--b  emotion-3"
             onClick={[Function]}
             style={
               Object {
@@ -44429,9 +44285,97 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </div>
       </div>
     </div>
-  </div>
-  <fieldset
-    className=" emotion-16"
+  </div>,
+  .emotion-1 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-4 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-4 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-4 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-3 {
+  padding-left: 0;
+  color: #091f2f;
+}
+
+.emotion-3 li {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-3 li {
+    margin-left: 1rem;
+  }
+}
+
+.emotion-3 li .name > span:last-of-type {
+  margin: 0 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-3 li .name > span:last-of-type {
+    margin: 0 1rem;
+  }
+}
+
+<fieldset
+    className=" emotion-4"
   >
     <legend>
       <h3
@@ -44453,7 +44397,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       >
         <input
           accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-          className="emotion-13"
+          className="emotion-1"
           id="uploadSupportingDocuments"
           multiple={true}
           onBlur={[Function]}
@@ -44462,7 +44406,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           type="file"
         />
         <label
-          className="btn btn--sm btn--200 emotion-14"
+          className="btn btn--sm btn--200 emotion-2"
           htmlFor="uploadSupportingDocuments"
           onClick={[Function]}
           style={
@@ -44480,16 +44424,36 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           Files should be PDF format, and under 10MB each.
         </div>
         <ul
-          className="t--s400 emotion-15"
+          className="t--s400 emotion-3"
         />
       </div>
     </div>
-  </fieldset>
-  <h2
+  </fieldset>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h2
     className="secondary m-t700 emotion-0"
   >
     No ID?
-  </h2>
+  </h2>,
   <p
     className="m-b700 lh--400 t--s400 m-b500"
   >
@@ -44507,43 +44471,63 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         →
       </span>
     </a>
-  </p>
-</div>
+  </p>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/VerifyIdentificationComponent existing images and files 1`] = `
-.emotion-14 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-19 {
-  margin: 0;
-  padding: 0;
-  border: none;
+Array [
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
 }
 
-.emotion-19 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
 }
 
-.emotion-19 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
+.emotion-0.secondary em {
+  font-size: 1rem;
 }
 
-.emotion-0 {
+<h2
+    className="emotion-0"
+  >
+    Verify your identity
+  </h2>,
+  <p
+    className="lh--400 t--s400 m-b500"
+  >
+    Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
+  </p>,
+  <p
+    className="lh--400 t--s400 m-b500"
+  >
+    <em>
+      Please note
+    </em>
+    : You must be
+     
+     listed on the record to get a copy of the certificate. If you are not listed on the record, you will not be able to get a copy. We will cancel your request and will not charge your card. Contact
+     
+    <a
+      href="mailto:registry@boston.gov"
+      onClick={[Function]}
+    >
+      registry
+      @boston.gov
+    </a>
+     
+    with questions.
+  </p>,
+  .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
   font-family: Lora,Georgia,serif !important;
@@ -44563,96 +44547,67 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
   font-size: 1rem;
 }
 
-.emotion-7 {
-  position: relative;
+<h3
+    className="secondary m-t700 emotion-0"
+    style={
+      Object {
+        "borderBottom": 0,
+      }
+    }
+  >
+    Upload ID images
+  </h3>,
+  <h3>
+    We accept the following forms of ID:
+  </h3>,
+  <ul
+    className="lh--300"
+  >
+    <li>
+      Driver’s License
+    </li>
+    <li>
+      State ID
+    </li>
+    <li>
+      Passport
+    </li>
+    <li>
+      Military ID
+    </li>
+  </ul>,
+  .emotion-5 {
+  position: relative;
   overflow: hidden;
 }
 
-.emotion-5:focus > div {
+.emotion-3:focus > div {
   outline: 4px solid #000;
   outline-offset: -5px;
 }
 
-.emotion-4 {
+.emotion-2 {
   position: relative;
   cursor: pointer;
   overflow: hidden;
   background-color: currentColor;
 }
 
-.emotion-2 {
+.emotion-0 {
   background-color: #288be4;
   color: #000;
 }
 
-.emotion-2.id {
+.emotion-0.id {
   padding: 2rem 4rem;
 }
 
-.emotion-6:focus {
+.emotion-4:focus {
   outline: 3px solid #000;
   outline-offset: -4px;
 }
 
-.emotion-18 {
-  padding-left: 0;
-  color: #091f2f;
-}
-
-.emotion-18 li {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 1rem;
-  margin-left: 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-18 li {
-    margin-left: 1rem;
-  }
-}
-
-.emotion-18 li .name > span:last-of-type {
-  margin: 0 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-18 li .name > span:last-of-type {
-    margin: 0 1rem;
-  }
-}
-
-.emotion-16 {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0.8;
-  -webkit-transition: opacity 0.15s;
-  transition: opacity 0.15s;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.15s;
-  transition: opacity 0.15s;
-}
-
-.emotion-16:hover {
-  opacity: 1;
-}
-
-.emotion-16:hover {
-  opacity: 1;
-}
-
-.emotion-3 {
+.emotion-1 {
   position: absolute;
   top: 0;
   left: 0;
@@ -44663,77 +44618,17 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
   background-position: center center;
 }
 
-<div>
-  <h2
-    className="emotion-0"
-  >
-    Verify your identity
-  </h2>
-  <p
-    className="lh--400 t--s400 m-b500"
-  >
-    Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
-  </p>
-  <p
-    className="lh--400 t--s400 m-b500"
-  >
-    <em>
-      Please note
-    </em>
-    : You must be
-     
-     listed on the record to get a copy of the certificate. If you are not listed on the record, you will not be able to get a copy. We will cancel your request and will not charge your card. Contact
-     
-    <a
-      href="mailto:registry@boston.gov"
-      onClick={[Function]}
-    >
-      registry
-      @boston.gov
-    </a>
-     
-    with questions.
-  </p>
-  <h3
-    className="secondary m-t700 emotion-0"
-    style={
-      Object {
-        "borderBottom": 0,
-      }
-    }
-  >
-    Upload ID images
-  </h3>
-  <h3>
-    We accept the following forms of ID:
-  </h3>
-  <ul
-    className="lh--300"
-  >
-    <li>
-      Driver’s License
-    </li>
-    <li>
-      State ID
-    </li>
-    <li>
-      Passport
-    </li>
-    <li>
-      Military ID
-    </li>
-  </ul>
-  <div
+<div
     className="g"
   >
     <div
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-7"
+        className="br br-a200 emotion-5"
       >
         <div
-          className="emotion-5"
+          className="emotion-3"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -44760,7 +44655,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-4"
+            className="emotion-2"
           >
             <div
               style={
@@ -44770,7 +44665,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -44827,7 +44722,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </div>
             </div>
             <div
-              className="emotion-3"
+              className="emotion-1"
               style={
                 Object {
                   "backgroundImage": "url(https://patterns.boston.gov/images/global/icons/experiential/pdf-doc.svg)",
@@ -44845,7 +44740,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-6"
+            className="btn btn--w btn--b  emotion-4"
             onClick={[Function]}
             style={
               Object {
@@ -44863,10 +44758,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-7"
+        className="br br-a200 emotion-5"
       >
         <div
-          className="emotion-5"
+          className="emotion-3"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -44893,7 +44788,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-4"
+            className="emotion-2"
           >
             <div
               style={
@@ -44903,7 +44798,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -44987,7 +44882,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-6"
+            className="btn btn--w btn--b  emotion-4"
             onClick={[Function]}
             style={
               Object {
@@ -45001,9 +44896,118 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </div>
       </div>
     </div>
-  </div>
-  <fieldset
-    className=" emotion-19"
+  </div>,
+  .emotion-1 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-6 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-6 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-6 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-5 {
+  padding-left: 0;
+  color: #091f2f;
+}
+
+.emotion-5 li {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-5 li {
+    margin-left: 1rem;
+  }
+}
+
+.emotion-5 li .name > span:last-of-type {
+  margin: 0 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-5 li .name > span:last-of-type {
+    margin: 0 1rem;
+  }
+}
+
+.emotion-3 {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.8;
+  -webkit-transition: opacity 0.15s;
+  transition: opacity 0.15s;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.15s;
+  transition: opacity 0.15s;
+}
+
+.emotion-3:hover {
+  opacity: 1;
+}
+
+.emotion-3:hover {
+  opacity: 1;
+}
+
+<fieldset
+    className=" emotion-6"
   >
     <legend>
       <h3
@@ -45025,7 +45029,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       >
         <input
           accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-          className="emotion-14"
+          className="emotion-1"
           id="uploadSupportingDocuments"
           multiple={true}
           onBlur={[Function]}
@@ -45034,7 +45038,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           type="file"
         />
         <label
-          className="btn btn--sm btn--200 emotion-15"
+          className="btn btn--sm btn--200 emotion-2"
           htmlFor="uploadSupportingDocuments"
           onClick={[Function]}
           style={
@@ -45052,7 +45056,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           Files should be PDF format, and under 10MB each.
         </div>
         <ul
-          className="t--s400 emotion-18"
+          className="t--s400 emotion-5"
         >
           <li>
             <span
@@ -45068,7 +45072,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <button
-              className="emotion-16"
+              className="emotion-3"
               onClick={[Function]}
               style={
                 Object {
@@ -45135,7 +45139,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <button
-              className="emotion-16"
+              className="emotion-3"
               onClick={[Function]}
               style={
                 Object {
@@ -45191,12 +45195,32 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </ul>
       </div>
     </div>
-  </fieldset>
-  <h2
+  </fieldset>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h2
     className="secondary m-t700 emotion-0"
   >
     No ID?
-  </h2>
+  </h2>,
   <p
     className="m-b700 lh--400 t--s400 m-b500"
   >
@@ -45214,43 +45238,13 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         →
       </span>
     </a>
-  </p>
-</div>
+  </p>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/VerifyIdentificationComponent reloaded images 1`] = `
-.emotion-14 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-19 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.emotion-19 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
-
-.emotion-19 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
-}
-
-.emotion-0 {
+Array [
+  .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
   font-family: Lora,Georgia,serif !important;
@@ -45270,117 +45264,16 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
   font-size: 1rem;
 }
 
-.emotion-7 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-5:focus > div {
-  outline: 4px solid #000;
-  outline-offset: -5px;
-}
-
-.emotion-4 {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  background-color: currentColor;
-}
-
-.emotion-2 {
-  background-color: #288be4;
-  color: #000;
-}
-
-.emotion-2.id {
-  padding: 2rem 4rem;
-}
-
-.emotion-6:focus {
-  outline: 3px solid #000;
-  outline-offset: -4px;
-}
-
-.emotion-18 {
-  padding-left: 0;
-  color: #091f2f;
-}
-
-.emotion-18 li {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 1rem;
-  margin-left: 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-18 li {
-    margin-left: 1rem;
-  }
-}
-
-.emotion-18 li .name > span:last-of-type {
-  margin: 0 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-18 li .name > span:last-of-type {
-    margin: 0 1rem;
-  }
-}
-
-.emotion-16 {
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0.8;
-  -webkit-transition: opacity 0.15s;
-  transition: opacity 0.15s;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.15s;
-  transition: opacity 0.15s;
-}
-
-.emotion-16:hover {
-  opacity: 1;
-}
-
-.emotion-16:hover {
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-<div>
-  <h2
+<h2
     className="emotion-0"
   >
     Verify your identity
-  </h2>
+  </h2>,
   <p
     className="lh--400 t--s400 m-b500"
   >
     Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
-  </p>
+  </p>,
   <p
     className="lh--400 t--s400 m-b500"
   >
@@ -45400,8 +45293,28 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     </a>
      
     with questions.
-  </p>
-  <h3
+  </p>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h3
     className="secondary m-t700 emotion-0"
     style={
       Object {
@@ -45410,10 +45323,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     }
   >
     Upload ID images
-  </h3>
+  </h3>,
   <h3>
     We accept the following forms of ID:
-  </h3>
+  </h3>,
   <ul
     className="lh--300"
   >
@@ -45429,18 +45342,60 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     <li>
       Military ID
     </li>
-  </ul>
-  <div
+  </ul>,
+  .emotion-5 {
+  position: relative;
+  overflow: hidden;
+}
+
+.emotion-3:focus > div {
+  outline: 4px solid #000;
+  outline-offset: -5px;
+}
+
+.emotion-2 {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  background-color: currentColor;
+}
+
+.emotion-0 {
+  background-color: #288be4;
+  color: #000;
+}
+
+.emotion-0.id {
+  padding: 2rem 4rem;
+}
+
+.emotion-4:focus {
+  outline: 3px solid #000;
+  outline-offset: -4px;
+}
+
+.emotion-1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+<div
     className="g"
   >
     <div
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-7"
+        className="br br-a200 emotion-5"
       >
         <div
-          className="emotion-5"
+          className="emotion-3"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -45467,7 +45422,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-4"
+            className="emotion-2"
           >
             <div
               style={
@@ -45477,7 +45432,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -45534,7 +45489,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </div>
             </div>
             <div
-              className="emotion-3"
+              className="emotion-1"
               style={
                 Object {
                   "backgroundImage": "url(https://patterns.boston.gov/images/global/icons/experiential/pdf-doc.svg)",
@@ -45552,7 +45507,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-6"
+            className="btn btn--w btn--b  emotion-4"
             onClick={[Function]}
             style={
               Object {
@@ -45570,10 +45525,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-7"
+        className="br br-a200 emotion-5"
       >
         <div
-          className="emotion-5"
+          className="emotion-3"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -45600,7 +45555,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-4"
+            className="emotion-2"
           >
             <div
               style={
@@ -45610,7 +45565,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -45694,7 +45649,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-6"
+            className="btn btn--w btn--b  emotion-4"
             onClick={[Function]}
             style={
               Object {
@@ -45708,9 +45663,118 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </div>
       </div>
     </div>
-  </div>
-  <fieldset
-    className=" emotion-19"
+  </div>,
+  .emotion-1 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-6 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-6 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-6 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-5 {
+  padding-left: 0;
+  color: #091f2f;
+}
+
+.emotion-5 li {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-5 li {
+    margin-left: 1rem;
+  }
+}
+
+.emotion-5 li .name > span:last-of-type {
+  margin: 0 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-5 li .name > span:last-of-type {
+    margin: 0 1rem;
+  }
+}
+
+.emotion-3 {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.8;
+  -webkit-transition: opacity 0.15s;
+  transition: opacity 0.15s;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.15s;
+  transition: opacity 0.15s;
+}
+
+.emotion-3:hover {
+  opacity: 1;
+}
+
+.emotion-3:hover {
+  opacity: 1;
+}
+
+<fieldset
+    className=" emotion-6"
   >
     <legend>
       <h3
@@ -45732,7 +45796,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       >
         <input
           accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-          className="emotion-14"
+          className="emotion-1"
           id="uploadSupportingDocuments"
           multiple={true}
           onBlur={[Function]}
@@ -45741,7 +45805,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           type="file"
         />
         <label
-          className="btn btn--sm btn--200 emotion-15"
+          className="btn btn--sm btn--200 emotion-2"
           htmlFor="uploadSupportingDocuments"
           onClick={[Function]}
           style={
@@ -45759,7 +45823,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           Files should be PDF format, and under 10MB each.
         </div>
         <ul
-          className="t--s400 emotion-18"
+          className="t--s400 emotion-5"
         >
           <li>
             <span
@@ -45775,7 +45839,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <button
-              className="emotion-16"
+              className="emotion-3"
               onClick={[Function]}
               style={
                 Object {
@@ -45842,7 +45906,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <button
-              className="emotion-16"
+              className="emotion-3"
               onClick={[Function]}
               style={
                 Object {
@@ -45898,12 +45962,32 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </ul>
       </div>
     </div>
-  </fieldset>
-  <h2
+  </fieldset>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h2
     className="secondary m-t700 emotion-0"
   >
     No ID?
-  </h2>
+  </h2>,
   <p
     className="m-b700 lh--400 t--s400 m-b500"
   >
@@ -45921,43 +46005,13 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         →
       </span>
     </a>
-  </p>
-</div>
+  </p>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/VerifyIdentificationComponent upload error 1`] = `
-.emotion-14 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-22 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.emotion-22 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
-
-.emotion-22 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
-}
-
-.emotion-0 {
+Array [
+  .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
   font-family: Lora,Georgia,serif !important;
@@ -45977,167 +46031,16 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
   font-size: 1rem;
 }
 
-.emotion-17 {
-  width: 80px;
-  height: 80px;
-}
-
-.emotion-17 ellipse {
-  stroke: currentColor;
-  stroke-width: 5;
-  fill: #fff;
-}
-
-.emotion-17.checkMark,
-.emotion-17.xSymbol {
-  fill: none;
-  stroke-width: 7;
-  stroke-linecap: round;
-}
-
-.emotion-17.checkMark {
-  stroke: #62A744;
-}
-
-.emotion-17.xSymbol {
-  stroke: #f04f46;
-}
-
-.emotion-17.questionMark path {
-  fill: #091f2f;
-  stroke: none;
-}
-
-.emotion-7 {
-  position: relative;
-  overflow: hidden;
-}
-
-.emotion-5:focus > div {
-  outline: 4px solid #000;
-  outline-offset: -5px;
-}
-
-.emotion-4 {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-  background-color: currentColor;
-}
-
-.emotion-2 {
-  background-color: #288be4;
-  color: #000;
-}
-
-.emotion-2.id {
-  padding: 2rem 4rem;
-}
-
-.emotion-11:focus {
-  outline: 3px solid #000;
-  outline-offset: -4px;
-}
-
-.emotion-21 {
-  padding-left: 0;
-  color: #091f2f;
-}
-
-.emotion-21 li {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 1rem;
-  margin-left: 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-21 li {
-    margin-left: 1rem;
-  }
-}
-
-.emotion-21 li .name > span:last-of-type {
-  margin: 0 0.5rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-21 li .name > span:last-of-type {
-    margin: 0 1rem;
-  }
-}
-
-.emotion-18 {
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  font-size: inherit;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  font-family: Lora,Georgia,serif;
-  font-style: italic;
-  color: #d22d23;
-}
-
-.emotion-18 svg {
-  height: 1.2em;
-  width: 1.2em;
-  margin-right: 0.5rem;
-}
-
-.emotion-16 {
-  text-transform: capitalize;
-  font-style: italic;
-  color: #d22d23;
-}
-
-.emotion-3 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.emotion-6 {
-  color: #d22d23;
-}
-
-.emotion-6:focus {
-  outline: 3px solid #000;
-  outline-offset: -4px;
-}
-
-<div>
-  <h2
+<h2
     className="emotion-0"
   >
     Verify your identity
-  </h2>
+  </h2>,
   <p
     className="lh--400 t--s400 m-b500"
   >
     Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
-  </p>
+  </p>,
   <p
     className="lh--400 t--s400 m-b500"
   >
@@ -46157,8 +46060,28 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     </a>
      
     with questions.
-  </p>
-  <h3
+  </p>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h3
     className="secondary m-t700 emotion-0"
     style={
       Object {
@@ -46167,10 +46090,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     }
   >
     Upload ID images
-  </h3>
+  </h3>,
   <h3>
     We accept the following forms of ID:
-  </h3>
+  </h3>,
   <ul
     className="lh--300"
   >
@@ -46186,18 +46109,69 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
     <li>
       Military ID
     </li>
-  </ul>
-  <div
+  </ul>,
+  .emotion-5 {
+  position: relative;
+  overflow: hidden;
+}
+
+.emotion-3:focus > div {
+  outline: 4px solid #000;
+  outline-offset: -5px;
+}
+
+.emotion-2 {
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  background-color: currentColor;
+}
+
+.emotion-0 {
+  background-color: #288be4;
+  color: #000;
+}
+
+.emotion-0.id {
+  padding: 2rem 4rem;
+}
+
+.emotion-9:focus {
+  outline: 3px solid #000;
+  outline-offset: -4px;
+}
+
+.emotion-1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.emotion-4 {
+  color: #d22d23;
+}
+
+.emotion-4:focus {
+  outline: 3px solid #000;
+  outline-offset: -4px;
+}
+
+<div
     className="g"
   >
     <div
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-7"
+        className="br br-a200 emotion-5"
       >
         <div
-          className="emotion-5"
+          className="emotion-3"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -46224,7 +46198,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-4"
+            className="emotion-2"
           >
             <div
               style={
@@ -46234,7 +46208,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -46291,7 +46265,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </div>
             </div>
             <div
-              className="emotion-3"
+              className="emotion-1"
               style={
                 Object {
                   "backgroundImage": "url(https://patterns.boston.gov/images/global/icons/experiential/pdf-doc.svg)",
@@ -46309,7 +46283,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-6"
+            className="btn btn--w btn--b  emotion-4"
             onClick={[Function]}
             style={
               Object {
@@ -46327,10 +46301,10 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       className="g--6 m-v500"
     >
       <div
-        className="br br-a200 emotion-7"
+        className="br br-a200 emotion-5"
       >
         <div
-          className="emotion-5"
+          className="emotion-3"
           onBlur={[Function]}
           onClick={[Function]}
           onDragEnter={[Function]}
@@ -46357,7 +46331,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
             type="file"
           />
           <div
-            className="emotion-4"
+            className="emotion-2"
           >
             <div
               style={
@@ -46367,7 +46341,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               }
             >
               <div
-                className="id emotion-2"
+                className="id emotion-0"
               >
                 <svg
                   aria-hidden="true"
@@ -46451,7 +46425,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           }
         >
           <button
-            className="btn btn--w btn--b  emotion-11"
+            className="btn btn--w btn--b  emotion-9"
             onClick={[Function]}
             style={
               Object {
@@ -46465,9 +46439,159 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </div>
       </div>
     </div>
-  </div>
-  <fieldset
-    className=" emotion-22"
+  </div>,
+  .emotion-1 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-9 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-9 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-9 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-4 {
+  width: 80px;
+  height: 80px;
+}
+
+.emotion-4 ellipse {
+  stroke: currentColor;
+  stroke-width: 5;
+  fill: #fff;
+}
+
+.emotion-4.checkMark,
+.emotion-4.xSymbol {
+  fill: none;
+  stroke-width: 7;
+  stroke-linecap: round;
+}
+
+.emotion-4.checkMark {
+  stroke: #62A744;
+}
+
+.emotion-4.xSymbol {
+  stroke: #f04f46;
+}
+
+.emotion-4.questionMark path {
+  fill: #091f2f;
+  stroke: none;
+}
+
+.emotion-8 {
+  padding-left: 0;
+  color: #091f2f;
+}
+
+.emotion-8 li {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-8 li {
+    margin-left: 1rem;
+  }
+}
+
+.emotion-8 li .name > span:last-of-type {
+  margin: 0 0.5rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-8 li .name > span:last-of-type {
+    margin: 0 1rem;
+  }
+}
+
+.emotion-5 {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  font-size: inherit;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-family: Lora,Georgia,serif;
+  font-style: italic;
+  color: #d22d23;
+}
+
+.emotion-5 svg {
+  height: 1.2em;
+  width: 1.2em;
+  margin-right: 0.5rem;
+}
+
+.emotion-3 {
+  text-transform: capitalize;
+  font-style: italic;
+  color: #d22d23;
+}
+
+<fieldset
+    className=" emotion-9"
   >
     <legend>
       <h3
@@ -46489,7 +46613,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
       >
         <input
           accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-          className="emotion-14"
+          className="emotion-1"
           id="uploadSupportingDocuments"
           multiple={true}
           onBlur={[Function]}
@@ -46498,7 +46622,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           type="file"
         />
         <label
-          className="btn btn--sm btn--200 emotion-15"
+          className="btn btn--sm btn--200 emotion-2"
           htmlFor="uploadSupportingDocuments"
           onClick={[Function]}
           style={
@@ -46516,7 +46640,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
           Files should be PDF format, and under 10MB each.
         </div>
         <ul
-          className="t--s400 emotion-21"
+          className="t--s400 emotion-8"
         >
           <li>
             <span
@@ -46532,7 +46656,7 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <span
-              className="emotion-16"
+              className="emotion-3"
             >
               canceling
               …
@@ -46552,13 +46676,13 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <button
-              className="emotion-18"
+              className="emotion-5"
               onClick={[Function]}
               type="button"
             >
               <svg
                 aria-hidden="true"
-                className="excl emotion-17"
+                className="excl emotion-4"
                 focusable="false"
                 viewBox="-2.5 -2.5 66 66"
                 xmlns="http://www.w3.org/2000/svg"
@@ -46594,13 +46718,13 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
               </span>
             </span>
             <button
-              className="emotion-18"
+              className="emotion-5"
               onClick={[Function]}
               type="button"
             >
               <svg
                 aria-hidden="true"
-                className="excl emotion-17"
+                className="excl emotion-4"
                 focusable="false"
                 viewBox="-2.5 -2.5 66 66"
                 xmlns="http://www.w3.org/2000/svg"
@@ -46625,12 +46749,32 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         </ul>
       </div>
     </div>
-  </fieldset>
-  <h2
+  </fieldset>,
+  .emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+<h2
     className="secondary m-t700 emotion-0"
   >
     No ID?
-  </h2>
+  </h2>,
   <p
     className="m-b700 lh--400 t--s400 m-b500"
   >
@@ -46648,8 +46792,8 @@ exports[`Storyshots Common Components/Question Components/VerifyIdentificationCo
         →
       </span>
     </a>
-  </p>
-</div>
+  </p>,
+]
 `;
 
 exports[`Storyshots Common Components/Question Components/YesNoUnsureComponent default 1`] = `
@@ -46813,169 +46957,130 @@ exports[`Storyshots Common Components/Question Components/YesNoUnsureComponent d
   stroke: none;
 }
 
-<div>
-  <div
-    aria-labelledby="bornInBoston"
-    className="emotion-6"
-    role="radiogroup"
+<div
+  aria-labelledby="bornInBoston"
+  className="emotion-6"
+  role="radiogroup"
+>
+  <label
+    className="  emotion-1"
   >
-    <label
-      className="  emotion-1"
+    <svg
+      aria-hidden="true"
+      className="checkMark emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="checkMark emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
+      />
+      <path
+        d="M50.937,26.2,30.069,47.068,21,38.791"
+        transform="translate(-5.591 -6.213)"
+      />
+    </svg>
+    <input
+      checked={false}
+      name="bornInBoston"
+      onChange={[Function]}
+      type="radio"
+      value="yes"
+    />
+    <span>
+      Yes
+    </span>
+  </label>
+  <label
+    className="  emotion-1"
+  >
+    <svg
+      aria-hidden="true"
+      className="questionMark emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
+      />
+      <g
+        transform="translate(20.339 12.679)"
+      >
+        <path
+          d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+          transform="translate(-26.6 -17.9)"
         />
         <path
-          d="M50.937,26.2,30.069,47.068,21,38.791"
-          transform="translate(-5.591 -6.213)"
+          d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+          transform="translate(-27.437 -21.605)"
         />
-      </svg>
-      <input
-        checked={false}
-        name="bornInBoston"
-        onChange={[Function]}
-        type="radio"
-        value="yes"
-      />
-      <span>
-        Yes
-      </span>
-    </label>
-    <label
-      className="  emotion-1"
+      </g>
+    </svg>
+    <input
+      checked={false}
+      name="bornInBoston"
+      onChange={[Function]}
+      type="radio"
+      value="unknown"
+    />
+    <span>
+      I don’t know
+    </span>
+  </label>
+  <label
+    className="  emotion-1"
+  >
+    <svg
+      aria-hidden="true"
+      className="xSymbol emotion-0"
+      focusable="false"
+      viewBox="-2.5 -2.5 66 66"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="questionMark emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
-        />
-        <g
-          transform="translate(20.339 12.679)"
-        >
-          <path
-            d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-            transform="translate(-26.6 -17.9)"
-          />
-          <path
-            d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-            transform="translate(-27.437 -21.605)"
-          />
-        </g>
-      </svg>
-      <input
-        checked={false}
-        name="bornInBoston"
-        onChange={[Function]}
-        type="radio"
-        value="unknown"
+      <ellipse
+        cx="30.377"
+        cy="30.377"
+        rx="30.377"
+        ry="30.377"
       />
-      <span>
-        I don’t know
-      </span>
-    </label>
-    <label
-      className="  emotion-1"
-    >
-      <svg
-        aria-hidden="true"
-        className="xSymbol emotion-0"
-        focusable="false"
-        viewBox="-2.5 -2.5 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <ellipse
-          cx="30.377"
-          cy="30.377"
-          rx="30.377"
-          ry="30.377"
+      <g
+        transform="translate(19.107 19.107)"
+      >
+        <line
+          x2="22.629"
+          y2="22.629"
         />
-        <g
-          transform="translate(19.107 19.107)"
-        >
-          <line
-            x2="22.629"
-            y2="22.629"
-          />
-          <line
-            x2="22.629"
-            y1="22.629"
-          />
-        </g>
-      </svg>
-      <input
-        checked={false}
-        name="bornInBoston"
-        onChange={[Function]}
-        type="radio"
-        value="no"
-      />
-      <span>
-        No
-      </span>
-    </label>
-  </div>
+        <line
+          x2="22.629"
+          y1="22.629"
+        />
+      </g>
+    </svg>
+    <input
+      checked={false}
+      name="bornInBoston"
+      onChange={[Function]}
+      type="radio"
+      value="no"
+    />
+    <span>
+      No
+    </span>
+  </label>
 </div>
 `;
 
 exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
-.emotion-17:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-7 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-9 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-16 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-15 {
-  font-size: 80%;
-}
-
-.emotion-18 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
-.emotion-6 {
+Array [
+  <p />,
+  .emotion-6 {
   border-bottom: 1px solid #e0e0e0;
   border-top: 1px solid #e0e0e0;
   padding-bottom: 0.5em;
@@ -47070,24 +47175,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
   display: block;
 }
 
-.emotion-12 {
-  line-height: 1;
-  display: inline-block;
-}
-
-.emotion-11:after {
-  width: 2rem;
-}
-
-.emotion-10 {
-  height: 2rem;
-  line-height: initial;
-  padding-right: 3rem;
-}
-
-<div>
-  <p />
-  <div
+<div
     className="emotion-6"
   >
     <div
@@ -47197,9 +47285,58 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
         </span>
       </div>
     </div>
-  </div>
-  <div
-    className="emotion-17"
+  </div>,
+  .emotion-10:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-2 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-9 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-8 {
+  font-size: 80%;
+}
+
+.emotion-5 {
+  line-height: 1;
+  display: inline-block;
+}
+
+.emotion-4:after {
+  width: 2rem;
+}
+
+.emotion-3 {
+  height: 2rem;
+  line-height: initial;
+  padding-right: 3rem;
+}
+
+<div
+    className="emotion-10"
   >
     <table
       className="t--info ta-r"
@@ -47210,12 +47347,12 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
       }
     >
       <caption
-        className="emotion-7"
+        className="emotion-0"
       >
         Cost Summary
       </caption>
       <thead
-        className="emotion-7"
+        className="emotion-0"
       >
         <tr>
           <th
@@ -47241,7 +47378,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
             $14.00
           </td>
           <td
-            className="emotion-9"
+            className="emotion-2"
           >
             $
             14.00
@@ -47251,14 +47388,14 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
           <td>
             <div>
               <div
-                className="sel sel--thin emotion-12"
+                className="sel sel--thin emotion-5"
               >
                 <div
-                  className="sel-c  emotion-11"
+                  className="sel-c  emotion-4"
                 >
                   <select
                     aria-label="Payment type"
-                    className="sel-f emotion-10"
+                    className="sel-f emotion-3"
                     id="serviceFeeTypeSelect"
                     onChange={[Function]}
                     value="CREDIT"
@@ -47288,7 +47425,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
             </div>
           </td>
           <td
-            className="emotion-9"
+            className="emotion-2"
           >
             $
             0.56
@@ -47299,7 +47436,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
             U.S. shipping included
           </td>
           <td
-            className="emotion-9"
+            className="emotion-2"
           >
             <i>
               $0.00
@@ -47308,10 +47445,10 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
         </tr>
         <tr>
           <td
-            className="sh-title emotion-16"
+            className="sh-title emotion-9"
           >
             <span
-              className="emotion-15"
+              className="emotion-8"
             >
               Total
             </span>
@@ -47325,15 +47462,20 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
         </tr>
       </tbody>
     </table>
-  </div>
-  <div
+  </div>,
+  .emotion-0 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+<div
     className="g g--mr m-t700"
   >
     <div
       className="g--9 t--info"
     >
       <button
-        className="lnk emotion-18"
+        className="lnk emotion-0"
         onClick={[Function]}
         type="button"
       >
@@ -47367,7 +47509,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
     >
       Continue
     </button>
-  </div>
+  </div>,
   <div
     className="ta-c m-t700 p-a300 t--sans"
   >
@@ -47378,51 +47520,14 @@ exports[`Storyshots Common Components/ReviewCertificateRequest birth 1`] = `
     >
       Cancel and start over
     </button>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
-.emotion-17:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.emotion-7 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-9 {
-  width: 5em;
-  vertical-align: bottom;
-  line-height: 1.75;
-}
-
-.emotion-16 {
-  padding: 0;
-  line-height: 1;
-  font-style: normal;
-}
-
-.emotion-15 {
-  font-size: 80%;
-}
-
-.emotion-18 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
-.emotion-6 {
+Array [
+  <p />,
+  .emotion-6 {
   border-bottom: 1px solid #e0e0e0;
   border-top: 1px solid #e0e0e0;
   padding-bottom: 0.5em;
@@ -47517,24 +47622,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
   display: block;
 }
 
-.emotion-12 {
-  line-height: 1;
-  display: inline-block;
-}
-
-.emotion-11:after {
-  width: 2rem;
-}
-
-.emotion-10 {
-  height: 2rem;
-  line-height: initial;
-  padding-right: 3rem;
-}
-
-<div>
-  <p />
-  <div
+<div
     className="emotion-6"
   >
     <div
@@ -47644,9 +47732,58 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
         </span>
       </div>
     </div>
-  </div>
-  <div
-    className="emotion-17"
+  </div>,
+  .emotion-10:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.emotion-0 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-2 {
+  width: 5em;
+  vertical-align: bottom;
+  line-height: 1.75;
+}
+
+.emotion-9 {
+  padding: 0;
+  line-height: 1;
+  font-style: normal;
+}
+
+.emotion-8 {
+  font-size: 80%;
+}
+
+.emotion-5 {
+  line-height: 1;
+  display: inline-block;
+}
+
+.emotion-4:after {
+  width: 2rem;
+}
+
+.emotion-3 {
+  height: 2rem;
+  line-height: initial;
+  padding-right: 3rem;
+}
+
+<div
+    className="emotion-10"
   >
     <table
       className="t--info ta-r"
@@ -47657,12 +47794,12 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
       }
     >
       <caption
-        className="emotion-7"
+        className="emotion-0"
       >
         Cost Summary
       </caption>
       <thead
-        className="emotion-7"
+        className="emotion-0"
       >
         <tr>
           <th
@@ -47688,7 +47825,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
             $14.00
           </td>
           <td
-            className="emotion-9"
+            className="emotion-2"
           >
             $
             14.00
@@ -47698,14 +47835,14 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
           <td>
             <div>
               <div
-                className="sel sel--thin emotion-12"
+                className="sel sel--thin emotion-5"
               >
                 <div
-                  className="sel-c  emotion-11"
+                  className="sel-c  emotion-4"
                 >
                   <select
                     aria-label="Payment type"
-                    className="sel-f emotion-10"
+                    className="sel-f emotion-3"
                     id="serviceFeeTypeSelect"
                     onChange={[Function]}
                     value="CREDIT"
@@ -47735,7 +47872,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
             </div>
           </td>
           <td
-            className="emotion-9"
+            className="emotion-2"
           >
             $
             0.56
@@ -47746,7 +47883,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
             U.S. shipping included
           </td>
           <td
-            className="emotion-9"
+            className="emotion-2"
           >
             <i>
               $0.00
@@ -47755,10 +47892,10 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
         </tr>
         <tr>
           <td
-            className="sh-title emotion-16"
+            className="sh-title emotion-9"
           >
             <span
-              className="emotion-15"
+              className="emotion-8"
             >
               Total
             </span>
@@ -47772,15 +47909,20 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
         </tr>
       </tbody>
     </table>
-  </div>
-  <div
+  </div>,
+  .emotion-0 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+<div
     className="g g--mr m-t700"
   >
     <div
       className="g--9 t--info"
     >
       <button
-        className="lnk emotion-18"
+        className="lnk emotion-0"
         onClick={[Function]}
         type="button"
       >
@@ -47814,7 +47956,7 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
     >
       Continue
     </button>
-  </div>
+  </div>,
   <div
     className="ta-c m-t700 p-a300 t--sans"
   >
@@ -47825,8 +47967,8 @@ exports[`Storyshots Common Components/ReviewCertificateRequest marriage 1`] = `
     >
       Cancel and start over
     </button>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`Storyshots Common Components/SupportingDocumentsInput all three statuses 1`] = `
@@ -47992,132 +48134,63 @@ exports[`Storyshots Common Components/SupportingDocumentsInput all three statuse
   margin-right: 0.5rem;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-8"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-8"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-uploading.pdf
-          </span>
+          •
         </span>
-        <div
-          className="emotion-4"
-        >
-          <progress
-            aria-hidden="true"
-            className="emotion-2"
-            max="100"
-            title="70% uploaded"
-            value={70}
-          />
-          <button
-            className="emotion-3"
-            onClick={[Function]}
-            style={
-              Object {
-                "height": "1.7em",
-                "overflow": "visible",
-                "width": "1.7em",
-              }
-            }
-            title="Cancel upload: sample-uploading.pdf"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              height="1.7em"
-              overflow="visible"
-              viewBox="0 0 24 24"
-              width="1.7em"
-            >
-              <circle
-                cx="12"
-                cy="12"
-                fill="#d22d23"
-                r="12"
-                stroke="none"
-              />
-              <g
-                transform="rotate(45, 12, 12)"
-              >
-                <line
-                  fill="none"
-                  stroke="#fff"
-                  strokeLinecap="round"
-                  strokeWidth="3"
-                  x1="12"
-                  x2="12"
-                  y1="4"
-                  y2="20"
-                />
-                <line
-                  fill="none"
-                  stroke="#fff"
-                  strokeLinecap="round"
-                  strokeWidth="3"
-                  x1="4"
-                  x2="20"
-                  y1="12"
-                  y2="12"
-                />
-              </g>
-            </svg>
-          </button>
-        </div>
-      </li>
-      <li>
-        <span
-          className="name"
-        >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-success.pdf
-          </span>
+        <span>
+          sample-uploading.pdf
         </span>
+      </span>
+      <div
+        className="emotion-4"
+      >
+        <progress
+          aria-hidden="true"
+          className="emotion-2"
+          max="100"
+          title="70% uploaded"
+          value={70}
+        />
         <button
           className="emotion-3"
           onClick={[Function]}
@@ -48128,7 +48201,7 @@ exports[`Storyshots Common Components/SupportingDocumentsInput all three statuse
               "width": "1.7em",
             }
           }
-          title="Remove file: sample-success.pdf"
+          title="Cancel upload: sample-uploading.pdf"
           type="button"
         >
           <svg
@@ -48171,51 +48244,118 @@ exports[`Storyshots Common Components/SupportingDocumentsInput all three statuse
             </g>
           </svg>
         </button>
-      </li>
-      <li>
+      </div>
+    </li>
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-uploadError.pdf
-          </span>
+          •
         </span>
-        <button
-          className="emotion-7"
-          onClick={[Function]}
-          type="button"
+        <span>
+          sample-success.pdf
+        </span>
+      </span>
+      <button
+        className="emotion-3"
+        onClick={[Function]}
+        style={
+          Object {
+            "height": "1.7em",
+            "overflow": "visible",
+            "width": "1.7em",
+          }
+        }
+        title="Remove file: sample-success.pdf"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          height="1.7em"
+          overflow="visible"
+          viewBox="0 0 24 24"
+          width="1.7em"
         >
-          <svg
-            aria-hidden="true"
-            className="excl emotion-6"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+          <circle
+            cx="12"
+            cy="12"
+            fill="#d22d23"
+            r="12"
+            stroke="none"
+          />
+          <g
+            transform="rotate(45, 12, 12)"
+          >
+            <line
+              fill="none"
+              stroke="#fff"
+              strokeLinecap="round"
+              strokeWidth="3"
+              x1="12"
+              x2="12"
+              y1="4"
+              y2="20"
             />
-            <path
-              d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
-              fill="currentColor"
-              transform="translate(-110 -101) scale(1.4)"
+            <line
+              fill="none"
+              stroke="#fff"
+              strokeLinecap="round"
+              strokeWidth="3"
+              x1="4"
+              x2="20"
+              y1="12"
+              y2="12"
             />
-          </svg>
-          <span>
-            Upload failed. Retry?
-          </span>
-        </button>
-      </li>
-    </ul>
-  </div>
+          </g>
+        </svg>
+      </button>
+    </li>
+    <li>
+      <span
+        className="name"
+      >
+        <span
+          aria-hidden="true"
+        >
+          •
+        </span>
+        <span>
+          sample-uploadError.pdf
+        </span>
+      </span>
+      <button
+        className="emotion-7"
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="excl emotion-6"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <path
+            d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
+            fill="currentColor"
+            transform="translate(-110 -101) scale(1.4)"
+          />
+        </svg>
+        <span>
+          Upload failed. Retry?
+        </span>
+      </button>
+    </li>
+  </ul>
 </div>
 `;
 
@@ -48275,63 +48415,61 @@ exports[`Storyshots Common Components/SupportingDocumentsInput cancel in progres
   color: #d22d23;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-3"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-3"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-canceling.pdf
-          </span>
+          •
         </span>
-        <span
-          className="emotion-2"
-        >
-          canceling
-          …
+        <span>
+          sample-canceling.pdf
         </span>
-      </li>
-    </ul>
-  </div>
+      </span>
+      <span
+        className="emotion-2"
+      >
+        canceling
+        …
+      </span>
+    </li>
+  </ul>
 </div>
 `;
 
@@ -48391,63 +48529,61 @@ exports[`Storyshots Common Components/SupportingDocumentsInput delete in progres
   color: #d22d23;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-3"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-3"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-deleting.pdf
-          </span>
+          •
         </span>
-        <span
-          className="emotion-2"
-        >
-          deleting
-          …
+        <span>
+          sample-deleting.pdf
         </span>
-      </li>
-    </ul>
-  </div>
+      </span>
+      <span
+        className="emotion-2"
+      >
+        deleting
+        …
+      </span>
+    </li>
+  </ul>
 </div>
 `;
 
@@ -48522,110 +48658,108 @@ exports[`Storyshots Common Components/SupportingDocumentsInput documents success
   opacity: 1;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-3"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-3"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-success.pdf
-          </span>
+          •
         </span>
-        <button
-          className="emotion-2"
-          onClick={[Function]}
-          style={
-            Object {
-              "height": "1.7em",
-              "overflow": "visible",
-              "width": "1.7em",
-            }
+        <span>
+          sample-success.pdf
+        </span>
+      </span>
+      <button
+        className="emotion-2"
+        onClick={[Function]}
+        style={
+          Object {
+            "height": "1.7em",
+            "overflow": "visible",
+            "width": "1.7em",
           }
-          title="Remove file: sample-success.pdf"
-          type="button"
+        }
+        title="Remove file: sample-success.pdf"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          height="1.7em"
+          overflow="visible"
+          viewBox="0 0 24 24"
+          width="1.7em"
         >
-          <svg
-            aria-hidden="true"
-            height="1.7em"
-            overflow="visible"
-            viewBox="0 0 24 24"
-            width="1.7em"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              fill="#d22d23"
-              r="12"
-              stroke="none"
+          <circle
+            cx="12"
+            cy="12"
+            fill="#d22d23"
+            r="12"
+            stroke="none"
+          />
+          <g
+            transform="rotate(45, 12, 12)"
+          >
+            <line
+              fill="none"
+              stroke="#fff"
+              strokeLinecap="round"
+              strokeWidth="3"
+              x1="12"
+              x2="12"
+              y1="4"
+              y2="20"
             />
-            <g
-              transform="rotate(45, 12, 12)"
-            >
-              <line
-                fill="none"
-                stroke="#fff"
-                strokeLinecap="round"
-                strokeWidth="3"
-                x1="12"
-                x2="12"
-                y1="4"
-                y2="20"
-              />
-              <line
-                fill="none"
-                stroke="#fff"
-                strokeLinecap="round"
-                strokeWidth="3"
-                x1="4"
-                x2="20"
-                y1="12"
-                y2="12"
-              />
-            </g>
-          </svg>
-        </button>
-      </li>
-    </ul>
-  </div>
+            <line
+              fill="none"
+              stroke="#fff"
+              strokeLinecap="round"
+              strokeWidth="3"
+              x1="4"
+              x2="20"
+              y1="12"
+              y2="12"
+            />
+          </g>
+        </svg>
+      </button>
+    </li>
+  </ul>
 </div>
 `;
 
@@ -48736,121 +48870,119 @@ exports[`Storyshots Common Components/SupportingDocumentsInput documents uploadi
   opacity: 1;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-5"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-5"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-uploading.pdf
-          </span>
+          •
         </span>
-        <div
-          className="emotion-4"
+        <span>
+          sample-uploading.pdf
+        </span>
+      </span>
+      <div
+        className="emotion-4"
+      >
+        <progress
+          aria-hidden="true"
+          className="emotion-2"
+          max="100"
+          title="23% uploaded"
+          value={23}
+        />
+        <button
+          className="emotion-3"
+          onClick={[Function]}
+          style={
+            Object {
+              "height": "1.7em",
+              "overflow": "visible",
+              "width": "1.7em",
+            }
+          }
+          title="Cancel upload: sample-uploading.pdf"
+          type="button"
         >
-          <progress
+          <svg
             aria-hidden="true"
-            className="emotion-2"
-            max="100"
-            title="23% uploaded"
-            value={23}
-          />
-          <button
-            className="emotion-3"
-            onClick={[Function]}
-            style={
-              Object {
-                "height": "1.7em",
-                "overflow": "visible",
-                "width": "1.7em",
-              }
-            }
-            title="Cancel upload: sample-uploading.pdf"
-            type="button"
+            height="1.7em"
+            overflow="visible"
+            viewBox="0 0 24 24"
+            width="1.7em"
           >
-            <svg
-              aria-hidden="true"
-              height="1.7em"
-              overflow="visible"
-              viewBox="0 0 24 24"
-              width="1.7em"
-            >
-              <circle
-                cx="12"
-                cy="12"
-                fill="#d22d23"
-                r="12"
-                stroke="none"
+            <circle
+              cx="12"
+              cy="12"
+              fill="#d22d23"
+              r="12"
+              stroke="none"
+            />
+            <g
+              transform="rotate(45, 12, 12)"
+            >
+              <line
+                fill="none"
+                stroke="#fff"
+                strokeLinecap="round"
+                strokeWidth="3"
+                x1="12"
+                x2="12"
+                y1="4"
+                y2="20"
               />
-              <g
-                transform="rotate(45, 12, 12)"
-              >
-                <line
-                  fill="none"
-                  stroke="#fff"
-                  strokeLinecap="round"
-                  strokeWidth="3"
-                  x1="12"
-                  x2="12"
-                  y1="4"
-                  y2="20"
-                />
-                <line
-                  fill="none"
-                  stroke="#fff"
-                  strokeLinecap="round"
-                  strokeWidth="3"
-                  x1="4"
-                  x2="20"
-                  y1="12"
-                  y2="12"
-                />
-              </g>
-            </svg>
-          </button>
-        </div>
-      </li>
-    </ul>
-  </div>
+              <line
+                fill="none"
+                stroke="#fff"
+                strokeLinecap="round"
+                strokeWidth="3"
+                x1="4"
+                x2="20"
+                y1="12"
+                y2="12"
+              />
+            </g>
+          </svg>
+        </button>
+      </div>
+    </li>
+  </ul>
 </div>
 `;
 
@@ -48904,42 +49036,40 @@ exports[`Storyshots Common Components/SupportingDocumentsInput empty 1`] = `
   }
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-2"
-    />
+    Files should be PDF format, and under 10MB each.
   </div>
+  <ul
+    className="t--s400 emotion-2"
+  />
 </div>
 `;
 
@@ -49049,85 +49179,83 @@ exports[`Storyshots Common Components/SupportingDocumentsInput error deleting do
   margin-right: 0.5rem;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-4"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-4"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-deletionError.pdf
-          </span>
+          •
         </span>
-        <button
-          className="emotion-3"
-          onClick={[Function]}
-          type="button"
+        <span>
+          sample-deletionError.pdf
+        </span>
+      </span>
+      <button
+        className="emotion-3"
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="excl emotion-2"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="excl emotion-2"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
-              fill="currentColor"
-              transform="translate(-110 -101) scale(1.4)"
-            />
-          </svg>
-          <span>
-            Failed to delete. Retry?
-          </span>
-        </button>
-      </li>
-    </ul>
-  </div>
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <path
+            d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
+            fill="currentColor"
+            transform="translate(-110 -101) scale(1.4)"
+          />
+        </svg>
+        <span>
+          Failed to delete. Retry?
+        </span>
+      </button>
+    </li>
+  </ul>
 </div>
 `;
 
@@ -49237,88 +49365,86 @@ exports[`Storyshots Common Components/SupportingDocumentsInput error uploading o
   margin-right: 0.5rem;
 }
 
-<div>
+<div
+  className="m-b300"
+>
+  <input
+    accept="application/pdf"
+    className="emotion-0"
+    id="uploadSupportingDocuments"
+    multiple={true}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="file"
+  />
+  <label
+    className="btn btn--sm btn--200 emotion-1"
+    htmlFor="uploadSupportingDocuments"
+    onClick={[Function]}
+    style={
+      Object {
+        "fontWeight": "bold",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    Upload Supporting Documents
+  </label>
   <div
-    className="m-b300"
+    className="t--subinfo m-v200"
   >
-    <input
-      accept="application/pdf"
-      className="emotion-0"
-      id="uploadSupportingDocuments"
-      multiple={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      type="file"
-    />
-    <label
-      className="btn btn--sm btn--200 emotion-1"
-      htmlFor="uploadSupportingDocuments"
-      onClick={[Function]}
-      style={
-        Object {
-          "fontWeight": "bold",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Upload Supporting Documents
-    </label>
-    <div
-      className="t--subinfo m-v200"
-    >
-      Files should be PDF format, and under 10MB each.
-    </div>
-    <ul
-      className="t--s400 emotion-4"
-    >
-      <li>
+    Files should be PDF format, and under 10MB each.
+  </div>
+  <ul
+    className="t--s400 emotion-4"
+  >
+    <li>
+      <span
+        className="name"
+      >
         <span
-          className="name"
+          aria-hidden="true"
         >
-          <span
-            aria-hidden="true"
-          >
-            •
-          </span>
-          <span>
-            sample-uploadError.pdf
-          </span>
+          •
         </span>
-        <button
-          className="emotion-3"
-          onClick={[Function]}
-          type="button"
+        <span>
+          sample-uploadError.pdf
+        </span>
+      </span>
+      <button
+        className="emotion-3"
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="excl emotion-2"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="excl emotion-2"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
-              fill="currentColor"
-              transform="translate(-110 -101) scale(1.4)"
-            />
-          </svg>
-          <span>
-            Upload failed. Retry?
-          </span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <path
+            d="M97.42,102.13a2.8,2.8,0,0,1,5.58,0,2.79,2.79,0,0,1-5.58,0Zm.09-17.93h5.41L102,97.48h-3.6Z"
+            fill="currentColor"
+            transform="translate(-110 -101) scale(1.4)"
+          />
+        </svg>
+        <span>
+          Upload failed. Retry?
+        </span>
+      </button>
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Storyshots Death/CartItem certificate without death date 1`] = `
 .emotion-2 {
   font-style: normal;
@@ -49386,49 +49512,47 @@ exports[`Storyshots Death/CartItem certificate without death date 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    className="p-v300 br b--w br-a100 emotion-6"
+  >
+    <input
+      aria-label="Quantity for MONKEY JOE"
+      className="br br-a150 emotion-0"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value="1"
+    />
     <div
-      className="p-v300 br b--w br-a100 emotion-6"
+      className="emotion-4"
     >
-      <input
-        aria-label="Quantity for MONKEY JOE"
-        className="br br-a150 emotion-0"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        value="1"
-      />
       <div
-        className="emotion-4"
+        className="t--sans m-v100 emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-2"
+        <span
+          className="emotion-1"
         >
-          <span
-            className="emotion-1"
-          >
-            <span>
-              MONKEY
-               
-              JOE
-            </span>
+          <span>
+            MONKEY
+             
+            JOE
           </span>
-        </div>
-        <div
-          className="emotion-3"
-        >
-          Died: 2004 — Age: 6
-        </div>
+        </span>
       </div>
-      <button
-        aria-label="Remove MONKEY JOE"
-        className="emotion-5"
-        onClick={[Function]}
-        type="button"
+      <div
+        className="emotion-3"
       >
-        ×
-      </button>
+        Died: 2004 — Age: 6
+      </div>
     </div>
+    <button
+      aria-label="Remove MONKEY JOE"
+      className="emotion-5"
+      onClick={[Function]}
+      type="button"
+    >
+      ×
+    </button>
   </div>
 </div>
 `;
@@ -49500,69 +49624,67 @@ exports[`Storyshots Death/CartItem pending certificate 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    className="p-v300 br b--w br-a100 emotion-6"
+  >
+    <input
+      aria-label="Quantity for JAMES HOWLETT (LOGAN)"
+      className="br br-a150 emotion-0"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value="1"
+    />
     <div
-      className="p-v300 br b--w br-a100 emotion-6"
+      className="emotion-4"
     >
-      <input
-        aria-label="Quantity for JAMES HOWLETT (LOGAN)"
-        className="br br-a150 emotion-0"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        value="1"
-      />
       <div
-        className="emotion-4"
+        className="t--sans m-v100 emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-2"
+        <span
+          className="emotion-1"
         >
-          <span
-            className="emotion-1"
-          >
-            <span>
-              JAMES
-               
-              HOWLETT (LOGAN)
-            </span>
+          <span>
+            JAMES
+             
+            HOWLETT (LOGAN)
           </span>
+        </span>
+        <span
+          style={
+            Object {
+              "color": "#091f2f",
+            }
+          }
+        >
+           — 
           <span
+            className="t--sans tt-u"
             style={
               Object {
-                "color": "#091f2f",
+                "fontStyle": "normal",
+                "fontWeight": "bold",
               }
             }
           >
-             — 
-            <span
-              className="t--sans tt-u"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                  "fontWeight": "bold",
-                }
-              }
-            >
-              pending
-            </span>
+            pending
           </span>
-        </div>
-        <div
-          className="emotion-3"
-        >
-          Died: 4/15/2014 — Age: 44 yrs. 2 mos. 10 dys
-        </div>
+        </span>
       </div>
-      <button
-        aria-label="Remove JAMES HOWLETT (LOGAN)"
-        className="emotion-5"
-        onClick={[Function]}
-        type="button"
+      <div
+        className="emotion-3"
       >
-        ×
-      </button>
+        Died: 4/15/2014 — Age: 44 yrs. 2 mos. 10 dys
+      </div>
     </div>
+    <button
+      aria-label="Remove JAMES HOWLETT (LOGAN)"
+      className="emotion-5"
+      onClick={[Function]}
+      type="button"
+    >
+      ×
+    </button>
   </div>
 </div>
 `;
@@ -49634,109 +49756,53 @@ exports[`Storyshots Death/CartItem typical certificate 1`] = `
 }
 
 <div>
-  <div>
+  <div
+    className="p-v300 br b--w br-a100 emotion-6"
+  >
+    <input
+      aria-label="Quantity for BRUCE BANNER"
+      className="br br-a150 emotion-0"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value="1"
+    />
     <div
-      className="p-v300 br b--w br-a100 emotion-6"
+      className="emotion-4"
     >
-      <input
-        aria-label="Quantity for BRUCE BANNER"
-        className="br br-a150 emotion-0"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        value="1"
-      />
       <div
-        className="emotion-4"
+        className="t--sans m-v100 emotion-2"
       >
-        <div
-          className="t--sans m-v100 emotion-2"
+        <span
+          className="emotion-1"
         >
-          <span
-            className="emotion-1"
-          >
-            <span>
-              BRUCE
-               
-              BANNER
-            </span>
+          <span>
+            BRUCE
+             
+            BANNER
           </span>
-        </div>
-        <div
-          className="emotion-3"
-        >
-          Died: 3/4/2016 — Age: 53
-        </div>
+        </span>
       </div>
-      <button
-        aria-label="Remove BRUCE BANNER"
-        className="emotion-5"
-        onClick={[Function]}
-        type="button"
+      <div
+        className="emotion-3"
       >
-        ×
-      </button>
+        Died: 3/4/2016 — Age: 53
+      </div>
     </div>
+    <button
+      aria-label="Remove BRUCE BANNER"
+      className="emotion-5"
+      onClick={[Function]}
+      type="button"
+    >
+      ×
+    </button>
   </div>
 </div>
 `;
 
 exports[`Storyshots Death/CartPage empty cart 1`] = `
-.emotion-4 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-3 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 54px;
-}
-
-.emotion-1 {
-  display: block !important;
-  text-align: right;
-}
-
-.emotion-1:after {
-  display: none !important;
-}
-
-.emotion-0 {
-  display: inline-block;
-  position: relative;
-  background: #fff;
-  color: #091f2f;
-  padding: 0.5em 0;
-  margin-right: 1.25rem;
-  margin-left: 1.25rem;
-  width: 3em;
-  text-align: center;
-  font-style: italic;
-  font-family: Lora,Georgia,serif;
-  font-size: 1rem;
-}
-
-.emotion-0:before {
-  content: '';
-  display: block;
-  border-color: transparent #fff transparent transparent;
-  border-width: 5px 10px;
-  border-style: solid;
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: -20px;
-  top: 12px;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -49749,14 +49815,14 @@ exports[`Storyshots Death/CartPage empty cart 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -49801,8 +49867,62 @@ exports[`Storyshots Death/CartPage empty cart 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-4 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-3 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 54px;
+}
+
+.emotion-1 {
+  display: block !important;
+  text-align: right;
+}
+
+.emotion-1:after {
+  display: none !important;
+}
+
+.emotion-0 {
+  display: inline-block;
+  position: relative;
+  background: #fff;
+  color: #091f2f;
+  padding: 0.5em 0;
+  margin-right: 1.25rem;
+  margin-left: 1.25rem;
+  width: 3em;
+  text-align: center;
+  font-style: italic;
+  font-family: Lora,Georgia,serif;
+  font-size: 1rem;
+}
+
+.emotion-0:before {
+  content: '';
+  display: block;
+  border-color: transparent #fff transparent transparent;
+  border-width: 5px 10px;
+  border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -20px;
+  top: 12px;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -50047,7 +50167,7 @@ exports[`Storyshots Death/CartPage empty cart 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -50094,12 +50214,78 @@ exports[`Storyshots Death/CartPage empty cart 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CartPage loading 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -50202,73 +50388,7 @@ exports[`Storyshots Death/CartPage loading 1`] = `
   top: 12px;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -50680,7 +50800,7 @@ exports[`Storyshots Death/CartPage loading 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -50727,12 +50847,78 @@ exports[`Storyshots Death/CartPage loading 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CartPage normal page 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -50900,73 +51086,7 @@ exports[`Storyshots Death/CartPage normal page 1`] = `
   padding: 0 0 0.2em;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -51525,7 +51645,7 @@ exports[`Storyshots Death/CartPage normal page 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -51572,12 +51692,78 @@ exports[`Storyshots Death/CartPage normal page 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CertificatePage certificate in cart 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -51740,73 +51926,7 @@ exports[`Storyshots Death/CertificatePage certificate in cart 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -52244,7 +52364,7 @@ exports[`Storyshots Death/CertificatePage certificate in cart 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -52291,66 +52411,12 @@ exports[`Storyshots Death/CertificatePage certificate in cart 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CertificatePage missing certificate 1`] = `
-.emotion-4 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-3 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 54px;
-}
-
-.emotion-1 {
-  display: block !important;
-  text-align: right;
-}
-
-.emotion-1:after {
-  display: none !important;
-}
-
-.emotion-0 {
-  display: inline-block;
-  position: relative;
-  background: #fff;
-  color: #091f2f;
-  padding: 0.5em 0;
-  margin-right: 1.25rem;
-  margin-left: 1.25rem;
-  width: 3em;
-  text-align: center;
-  font-style: italic;
-  font-family: Lora,Georgia,serif;
-  font-size: 1rem;
-}
-
-.emotion-0:before {
-  content: '';
-  display: block;
-  border-color: transparent #fff transparent transparent;
-  border-width: 5px 10px;
-  border-style: solid;
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: -20px;
-  top: 12px;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -52363,14 +52429,14 @@ exports[`Storyshots Death/CertificatePage missing certificate 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -52415,8 +52481,62 @@ exports[`Storyshots Death/CertificatePage missing certificate 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-4 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-3 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 54px;
+}
+
+.emotion-1 {
+  display: block !important;
+  text-align: right;
+}
+
+.emotion-1:after {
+  display: none !important;
+}
+
+.emotion-0 {
+  display: inline-block;
+  position: relative;
+  background: #fff;
+  color: #091f2f;
+  padding: 0.5em 0;
+  margin-right: 1.25rem;
+  margin-left: 1.25rem;
+  width: 3em;
+  text-align: center;
+  font-style: italic;
+  font-family: Lora,Georgia,serif;
+  font-size: 1rem;
+}
+
+.emotion-0:before {
+  content: '';
+  display: block;
+  border-color: transparent #fff transparent transparent;
+  border-width: 5px 10px;
+  border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -20px;
+  top: 12px;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -52683,7 +52803,7 @@ exports[`Storyshots Death/CertificatePage missing certificate 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -52730,12 +52850,78 @@ exports[`Storyshots Death/CertificatePage missing certificate 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CertificatePage normal certificate 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -52898,73 +53084,7 @@ exports[`Storyshots Death/CertificatePage normal certificate 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -53402,7 +53522,7 @@ exports[`Storyshots Death/CertificatePage normal certificate 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -53449,12 +53569,78 @@ exports[`Storyshots Death/CertificatePage normal certificate 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CertificatePage normal certificate — not from search 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -53617,73 +53803,7 @@ exports[`Storyshots Death/CertificatePage normal certificate — not from search
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -54121,7 +54241,7 @@ exports[`Storyshots Death/CertificatePage normal certificate — not from search
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -54168,12 +54288,78 @@ exports[`Storyshots Death/CertificatePage normal certificate — not from search
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/CertificatePage pending certificate 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -54336,73 +54522,7 @@ exports[`Storyshots Death/CertificatePage pending certificate 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -54835,7 +54955,7 @@ exports[`Storyshots Death/CertificatePage pending certificate 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -54882,66 +55002,12 @@ exports[`Storyshots Death/CertificatePage pending certificate 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/ConfirmationContent default 1`] = `
-.emotion-4 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-3 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 54px;
-}
-
-.emotion-1 {
-  display: block !important;
-  text-align: right;
-}
-
-.emotion-1:after {
-  display: none !important;
-}
-
-.emotion-0 {
-  display: inline-block;
-  position: relative;
-  background: #fff;
-  color: #091f2f;
-  padding: 0.5em 0;
-  margin-right: 1.25rem;
-  margin-left: 1.25rem;
-  width: 3em;
-  text-align: center;
-  font-style: italic;
-  font-family: Lora,Georgia,serif;
-  font-size: 1rem;
-}
-
-.emotion-0:before {
-  content: '';
-  display: block;
-  border-color: transparent #fff transparent transparent;
-  border-width: 5px 10px;
-  border-style: solid;
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: -20px;
-  top: 12px;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -54954,14 +55020,14 @@ exports[`Storyshots Death/ConfirmationContent default 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -55006,8 +55072,62 @@ exports[`Storyshots Death/ConfirmationContent default 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-4 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-3 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 54px;
+}
+
+.emotion-1 {
+  display: block !important;
+  text-align: right;
+}
+
+.emotion-1:after {
+  display: none !important;
+}
+
+.emotion-0 {
+  display: inline-block;
+  position: relative;
+  background: #fff;
+  color: #091f2f;
+  padding: 0.5em 0;
+  margin-right: 1.25rem;
+  margin-left: 1.25rem;
+  width: 3em;
+  text-align: center;
+  font-style: italic;
+  font-family: Lora,Georgia,serif;
+  font-size: 1rem;
+}
+
+.emotion-0:before {
+  content: '';
+  display: block;
+  border-color: transparent #fff transparent transparent;
+  border-width: 5px 10px;
+  border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -20px;
+  top: 12px;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -55303,7 +55423,7 @@ exports[`Storyshots Death/ConfirmationContent default 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -55350,8 +55470,8 @@ exports[`Storyshots Death/ConfirmationContent default 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/ReceiptPage default 1`] = `
@@ -55421,302 +55541,300 @@ exports[`Storyshots Death/ReceiptPage default 1`] = `
   align-items: center;
 }
 
-<div>
+<div
+  className="b-ff emotion-18"
+>
   <div
-    className="b-ff emotion-18"
+    className="b-c b-c--hsm b-ff emotion-17"
   >
     <div
-      className="b-c b-c--hsm b-ff emotion-17"
+      className="lo m-b300 emotion-1"
     >
-      <div
-        className="lo m-b300 emotion-1"
+      <span
+        className="lo-l"
       >
-        <span
-          className="lo-l"
-        >
-          <img
-            alt="City of Boston"
-            className="lo-i"
-            src="https://patterns.boston.gov/images/public/logo.svg"
-          />
-        </span>
-        <a
-          className="emotion-0"
-          href="javascript:void(0)"
-          onClick={[Function]}
-        >
-          Print this page
-        </a>
-      </div>
+        <img
+          alt="City of Boston"
+          className="lo-i"
+          src="https://patterns.boston.gov/images/public/logo.svg"
+        />
+      </span>
+      <a
+        className="emotion-0"
+        href="javascript:void(0)"
+        onClick={[Function]}
+      >
+        Print this page
+      </a>
+    </div>
+    <div
+      className="b--g br br-a200 emotion-15"
+    >
       <div
-        className="b--g br br-a200 emotion-15"
+        className="p-a300"
+        style={
+          Object {
+            "paddingBottom": 0,
+          }
+        }
       >
         <div
-          className="p-a300"
-          style={
-            Object {
-              "paddingBottom": 0,
-            }
-          }
+          className="sh sh--sm"
         >
-          <div
-            className="sh sh--sm"
+          <h1
+            className="sh-title"
           >
-            <h1
-              className="sh-title"
-            >
-              Thank you for your order
-            </h1>
-          </div>
+            Thank you for your order
+          </h1>
+        </div>
+        <div
+          className="m-t300 t--cb"
+        >
           <div
-            className="m-t300 t--cb"
+            className="g"
           >
             <div
-              className="g"
+              className="g--6"
             >
               <div
-                className="g--6"
+                className="m-t200"
               >
-                <div
-                  className="m-t200"
+                <span
+                  className="emotion-2"
                 >
-                  <span
-                    className="emotion-2"
-                  >
-                    Date:
-                  </span>
-                   
-                  <span
-                    className="emotion-3"
-                  >
-                    1/8/2018 2:05PM
-                  </span>
-                </div>
-                <div
-                  className="m-t200"
+                  Date:
+                </span>
+                 
+                <span
+                  className="emotion-3"
                 >
-                  <span
-                    className="emotion-2"
-                  >
-                    Order #:
-                  </span>
-                   
-                  <span
-                    className="emotion-3"
-                  >
-                    RG-DC201801-360926
-                  </span>
-                </div>
+                  1/8/2018 2:05PM
+                </span>
               </div>
               <div
-                className="g--6"
+                className="m-t200"
               >
-                <div
-                  className="m-t200 emotion-2"
+                <span
+                  className="emotion-2"
                 >
-                  Shipping information:
-                </div>
-                <div
+                  Order #:
+                </span>
+                 
+                <span
                   className="emotion-3"
                 >
-                  Squirrel Girl
-                  <br />
-                  US Avengers
-                  <br />
-                  Avengers Tower
-                  <br />
-                  New York, NY 10001
-                </div>
+                  RG-DC201801-360926
+                </span>
               </div>
             </div>
             <div
-              className="m-t700"
+              className="g--6"
             >
               <div
-                className="emotion-2"
-                style={
-                  Object {
-                    "fontSize": "1.333rem",
-                  }
-                }
+                className="m-t200 emotion-2"
               >
-                Order:
+                Shipping information:
               </div>
-              <table
-                className="emotion-13"
+              <div
+                className="emotion-3"
               >
-                <tbody>
-                  <tr>
-                    <td
-                      className="emotion-3"
-                    >
-                      7
-                       × Death certificate for
-                       
-                      JAMES
-                       
-                      HOWLETT (LOGAN)
-                    </td>
-                    <td
-                      className="ta-r"
-                      style={
-                        Object {
-                          "fontWeight": "bold",
-                        }
+                Squirrel Girl
+                <br />
+                US Avengers
+                <br />
+                Avengers Tower
+                <br />
+                New York, NY 10001
+              </div>
+            </div>
+          </div>
+          <div
+            className="m-t700"
+          >
+            <div
+              className="emotion-2"
+              style={
+                Object {
+                  "fontSize": "1.333rem",
+                }
+              }
+            >
+              Order:
+            </div>
+            <table
+              className="emotion-13"
+            >
+              <tbody>
+                <tr>
+                  <td
+                    className="emotion-3"
+                  >
+                    7
+                     × Death certificate for
+                     
+                    JAMES
+                     
+                    HOWLETT (LOGAN)
+                  </td>
+                  <td
+                    className="ta-r"
+                    style={
+                      Object {
+                        "fontWeight": "bold",
                       }
-                    >
-                      $
-                      98.00
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      className="emotion-3"
-                    >
-                      1
-                       × Death certificate for
-                       
-                      BRUCE
-                       
-                      BANNER
-                    </td>
-                    <td
-                      className="ta-r"
-                      style={
-                        Object {
-                          "fontWeight": "bold",
-                        }
+                    }
+                  >
+                    $
+                    98.00
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    className="emotion-3"
+                  >
+                    1
+                     × Death certificate for
+                     
+                    BRUCE
+                     
+                    BANNER
+                  </td>
+                  <td
+                    className="ta-r"
+                    style={
+                      Object {
+                        "fontWeight": "bold",
                       }
-                    >
-                      $
-                      14.00
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      className="emotion-3"
-                    >
-                      Subtotal
-                    </td>
-                    <td
-                      className="ta-r"
-                      style={
-                        Object {
-                          "fontWeight": "bold",
-                        }
+                    }
+                  >
+                    $
+                    14.00
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    className="emotion-3"
+                  >
+                    Subtotal
+                  </td>
+                  <td
+                    className="ta-r"
+                    style={
+                      Object {
+                        "fontWeight": "bold",
                       }
-                    >
-                      $
-                      112.00
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      className="emotion-3"
-                    >
-                      Card service fee*
-                    </td>
-                    <td
-                      className="ta-r"
-                      style={
-                        Object {
-                          "fontWeight": "bold",
-                        }
+                    }
+                  >
+                    $
+                    112.00
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    className="emotion-3"
+                  >
+                    Card service fee*
+                  </td>
+                  <td
+                    className="ta-r"
+                    style={
+                      Object {
+                        "fontWeight": "bold",
                       }
-                    >
-                      $
-                      2.66
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+                    }
+                  >
+                    $
+                    2.66
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <div
-          className="p-a300"
-          style={
-            Object {
-              "backgroundColor": "#C8C8C8",
-              "paddingBottom": "0.25rem",
-              "paddingTop": "0.25rem",
-            }
+      </div>
+      <div
+        className="p-a300"
+        style={
+          Object {
+            "backgroundColor": "#C8C8C8",
+            "paddingBottom": "0.25rem",
+            "paddingTop": "0.25rem",
           }
+        }
+      >
+        <table
+          className="emotion-13"
         >
-          <table
-            className="emotion-13"
-          >
-            <tbody>
-              <tr
-                className="total-row t--sans sh--sm"
+          <tbody>
+            <tr
+              className="total-row t--sans sh--sm"
+            >
+              <td
+                className="sh-title"
               >
-                <td
-                  className="sh-title"
-                >
-                  Total
-                </td>
-                <td
-                  className="ta-r sh-title"
-                  style={
-                    Object {
-                      "padding": 0,
-                    }
+                Total
+              </td>
+              <td
+                className="ta-r sh-title"
+                style={
+                  Object {
+                    "padding": 0,
                   }
-                >
-                  $
-                  114.66
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                }
+              >
+                $
+                114.66
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        className="p-a300"
+      >
+        <div
+          className="t--cb m-v300"
+        >
+          Your order will be shipped within 1–2 business days via the U.S. Postal Service.
         </div>
         <div
-          className="p-a300"
+          className="t--subinfo m-t300"
         >
-          <div
-            className="t--cb m-v300"
-          >
-            Your order will be shipped within 1–2 business days via the U.S. Postal Service.
-          </div>
-          <div
-            className="t--subinfo m-t300"
-          >
-            * You are charged an extra service fee to pay for the cost of card processing. This fee goes directly to a third party, not the City of Boston.
-          </div>
+          * You are charged an extra service fee to pay for the cost of card processing. This fee goes directly to a third party, not the City of Boston.
         </div>
       </div>
+    </div>
+    <div
+      className="t--info m-v300 emotion-16"
+    >
+      <img
+        alt=""
+        className="s-i"
+        src="https://patterns.boston.gov/images/public/seal.svg"
+        style={
+          Object {
+            "height": 75,
+            "width": 75,
+          }
+        }
+      />
       <div
-        className="t--info m-v300 emotion-16"
+        className="m-l300"
       >
-        <img
-          alt=""
-          className="s-i"
-          src="https://patterns.boston.gov/images/public/seal.svg"
-          style={
-            Object {
-              "height": 75,
-              "width": 75,
-            }
-          }
-        />
-        <div
-          className="m-l300"
+        Have any questions? Contact the Registry on weekdays from 9 a.m. – 4 p.m. at 
+        <a
+          href="tel:617-635-4175"
         >
-          Have any questions? Contact the Registry on weekdays from 9 a.m. – 4 p.m. at 
-          <a
-            href="tel:617-635-4175"
-          >
-            617-635-4175
-          </a>
-          , or email
-           
-          <a
-            href="mailto:registry@boston.gov"
-          >
-            registry@boston.gov
-          </a>
-          .
-        </div>
+          617-635-4175
+        </a>
+        , or email
+         
+        <a
+          href="mailto:registry@boston.gov"
+        >
+          registry@boston.gov
+        </a>
+        .
       </div>
     </div>
   </div>
@@ -55724,69 +55842,7 @@ exports[`Storyshots Death/ReceiptPage default 1`] = `
 `;
 
 exports[`Storyshots Death/SearchPage no results 1`] = `
-.emotion-4 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-3 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 54px;
-}
-
-.emotion-1 {
-  display: block !important;
-  text-align: right;
-}
-
-.emotion-1:after {
-  display: none !important;
-}
-
-.emotion-0 {
-  display: inline-block;
-  position: relative;
-  background: #fff;
-  color: #091f2f;
-  padding: 0.5em 0;
-  margin-right: 1.25rem;
-  margin-left: 1.25rem;
-  width: 3em;
-  text-align: center;
-  font-style: italic;
-  font-family: Lora,Georgia,serif;
-  font-size: 1rem;
-}
-
-.emotion-0:before {
-  content: '';
-  display: block;
-  border-color: transparent #fff transparent transparent;
-  border-width: 5px 10px;
-  border-style: solid;
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: -20px;
-  top: 12px;
-}
-
-.emotion-5 {
-  font-style: normal;
-}
-
-.emotion-5>li {
-  margin-top: 0.5em;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -55799,14 +55855,14 @@ exports[`Storyshots Death/SearchPage no results 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -55851,8 +55907,70 @@ exports[`Storyshots Death/SearchPage no results 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-4 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-3 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 54px;
+}
+
+.emotion-1 {
+  display: block !important;
+  text-align: right;
+}
+
+.emotion-1:after {
+  display: none !important;
+}
+
+.emotion-0 {
+  display: inline-block;
+  position: relative;
+  background: #fff;
+  color: #091f2f;
+  padding: 0.5em 0;
+  margin-right: 1.25rem;
+  margin-left: 1.25rem;
+  width: 3em;
+  text-align: center;
+  font-style: italic;
+  font-family: Lora,Georgia,serif;
+  font-size: 1rem;
+}
+
+.emotion-0:before {
+  content: '';
+  display: block;
+  border-color: transparent #fff transparent transparent;
+  border-width: 5px 10px;
+  border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -20px;
+  top: 12px;
+}
+
+.emotion-5 {
+  font-style: normal;
+}
+
+.emotion-5>li {
+  margin-top: 0.5em;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -56153,7 +56271,7 @@ exports[`Storyshots Death/SearchPage no results 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -56200,66 +56318,12 @@ exports[`Storyshots Death/SearchPage no results 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/SearchPage no search 1`] = `
-.emotion-4 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-3 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  height: 54px;
-}
-
-.emotion-1 {
-  display: block !important;
-  text-align: right;
-}
-
-.emotion-1:after {
-  display: none !important;
-}
-
-.emotion-0 {
-  display: inline-block;
-  position: relative;
-  background: #fff;
-  color: #091f2f;
-  padding: 0.5em 0;
-  margin-right: 1.25rem;
-  margin-left: 1.25rem;
-  width: 3em;
-  text-align: center;
-  font-style: italic;
-  font-family: Lora,Georgia,serif;
-  font-size: 1rem;
-}
-
-.emotion-0:before {
-  content: '';
-  display: block;
-  border-color: transparent #fff transparent transparent;
-  border-width: 5px 10px;
-  border-style: solid;
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: -20px;
-  top: 12px;
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -56272,14 +56336,14 @@ exports[`Storyshots Death/SearchPage no search 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -56324,8 +56388,62 @@ exports[`Storyshots Death/SearchPage no search 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-4 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-3 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 54px;
+}
+
+.emotion-1 {
+  display: block !important;
+  text-align: right;
+}
+
+.emotion-1:after {
+  display: none !important;
+}
+
+.emotion-0 {
+  display: inline-block;
+  position: relative;
+  background: #fff;
+  color: #091f2f;
+  padding: 0.5em 0;
+  margin-right: 1.25rem;
+  margin-left: 1.25rem;
+  width: 3em;
+  text-align: center;
+  font-style: italic;
+  font-family: Lora,Georgia,serif;
+  font-size: 1rem;
+}
+
+.emotion-0:before {
+  content: '';
+  display: block;
+  border-color: transparent #fff transparent transparent;
+  border-width: 5px 10px;
+  border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -20px;
+  top: 12px;
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -56615,7 +56733,7 @@ exports[`Storyshots Death/SearchPage no search 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -56662,12 +56780,78 @@ exports[`Storyshots Death/SearchPage no search 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/SearchPage with results 1`] = `
-.emotion-4 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-4 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -56771,73 +56955,7 @@ exports[`Storyshots Death/SearchPage with results 1`] = `
   margin-top: 0.5em;
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -57363,7 +57481,7 @@ exports[`Storyshots Death/SearchPage with results 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -57410,8 +57528,8 @@ exports[`Storyshots Death/SearchPage with results 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Death/SearchResult certificate without death date 1`] = `
@@ -57457,40 +57575,38 @@ exports[`Storyshots Death/SearchResult certificate without death date 1`] = `
   font-style: italic;
 }
 
-<div>
-  <a
-    href="/death/certificate/000003"
-    onClick={[Function]}
-    onMouseEnter={[Function]}
+<a
+  href="/death/certificate/000003"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+>
+  <div
+    className="p-v300 br b--w br-b100 emotion-4"
   >
     <div
-      className="p-v300 br b--w br-b100 emotion-4"
+      className="emotion-3"
     >
       <div
-        className="emotion-3"
+        className="t--sans m-v100 emotion-1"
       >
-        <div
-          className="t--sans m-v100 emotion-1"
+        <span
+          className="emotion-0"
         >
-          <span
-            className="emotion-0"
-          >
-            <span>
-              MONKEY
-               
-              JOE
-            </span>
+          <span>
+            MONKEY
+             
+            JOE
           </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          Died: 2004 — Age: 6
-        </div>
+        </span>
+      </div>
+      <div
+        className="emotion-2"
+      >
+        Died: 2004 — Age: 6
       </div>
     </div>
-  </a>
-</div>
+  </div>
+</a>
 `;
 
 exports[`Storyshots Death/SearchResult typical certificate 1`] = `
@@ -57536,48 +57652,45 @@ exports[`Storyshots Death/SearchResult typical certificate 1`] = `
   font-style: italic;
 }
 
-<div>
-  <a
-    href="/death/certificate/000002"
-    onClick={[Function]}
-    onMouseEnter={[Function]}
+<a
+  href="/death/certificate/000002"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+>
+  <div
+    className="p-v300 br b--w br-b100 emotion-4"
   >
     <div
-      className="p-v300 br b--w br-b100 emotion-4"
+      className="emotion-3"
     >
       <div
-        className="emotion-3"
+        className="t--sans m-v100 emotion-1"
       >
-        <div
-          className="t--sans m-v100 emotion-1"
+        <span
+          className="emotion-0"
         >
-          <span
-            className="emotion-0"
-          >
-            <span>
-              BRUCE
-               
-              BANNER
-            </span>
+          <span>
+            BRUCE
+             
+            BANNER
           </span>
-        </div>
-        <div
-          className="emotion-2"
-        >
-          Died: 3/4/2016 — Age: 53
-        </div>
+        </span>
+      </div>
+      <div
+        className="emotion-2"
+      >
+        Died: 3/4/2016 — Age: 53
       </div>
     </div>
-  </a>
-</div>
+  </div>
+</a>
 `;
 
 exports[`Storyshots Email/Birth/Expired HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -58218,16 +58331,14 @@ exports[`Storyshots Email/Birth/Expired HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Birth/Expired text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Your order has been canceled
 
@@ -58242,16 +58353,14 @@ https://www.boston.gov/birth
 
 Have any questions? Contact the Registry at 
 birth@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Email/Birth/Receipt HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -58989,16 +59098,14 @@ exports[`Storyshots Email/Birth/Receipt HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Birth/Receipt text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Thank you for your order!
 
@@ -59030,16 +59137,14 @@ service fees at the City of Boston.
 
 Have any questions? Contact the Registry at 
 birth@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Email/Birth/Shipped HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -59777,16 +59882,14 @@ exports[`Storyshots Email/Birth/Shipped HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Birth/Shipped text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Thank you for your order!
 
@@ -59818,16 +59921,14 @@ service fees at the City of Boston.
 
 Have any questions? Contact the Registry at 
 birth@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Email/Death/Receipt HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -60560,16 +60661,14 @@ exports[`Storyshots Email/Death/Receipt HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Death/Receipt text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Thank you for your order!
 
@@ -60599,16 +60698,14 @@ service fees at the City of Boston.
 
 Have any questions? Contact the Registry at 
 registry@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Email/Marriage/Expired HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -61249,16 +61346,14 @@ exports[`Storyshots Email/Marriage/Expired HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Marriage/Expired text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Your order has been canceled
 
@@ -61274,16 +61369,14 @@ https://www.boston.gov/marriage
 
 Have any questions? Contact the Registry at 
 marriage@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Email/Marriage/Receipt HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -62021,16 +62114,14 @@ exports[`Storyshots Email/Marriage/Receipt HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Marriage/Receipt text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Thank you for your order!
 
@@ -62062,16 +62153,14 @@ service fees at the City of Boston.
 
 Have any questions? Contact the Registry at 
 marriage@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Email/Marriage/Shipped HTML 1`] = `
-<div>
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
+<div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "
     <!doctype html>
     <html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\">
       <head>
@@ -62809,16 +62898,14 @@ exports[`Storyshots Email/Marriage/Shipped HTML 1`] = `
       </body>
     </html>
   ",
-      }
     }
-  />
-</div>
+  }
+/>
 `;
 
 exports[`Storyshots Email/Marriage/Shipped text 1`] = `
-<div>
-  <pre>
-    City of Boston
+<pre>
+  City of Boston
 
 Thank you for your order!
 
@@ -62850,12 +62937,77 @@ service fees at the City of Boston.
 
 Have any questions? Contact the Registry at 
 marriage@boston.gov.
-  </pre>
-</div>
+</pre>
 `;
 
 exports[`Storyshots Marriage/CheckoutPage confirmation 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -62933,73 +63085,7 @@ exports[`Storyshots Marriage/CheckoutPage confirmation 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -63415,7 +63501,7 @@ exports[`Storyshots Marriage/CheckoutPage confirmation 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -63462,31 +63548,12 @@ exports[`Storyshots Marriage/CheckoutPage confirmation 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/CheckoutPage no marriage certificate request 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
-  }
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -63499,14 +63566,14 @@ exports[`Storyshots Marriage/CheckoutPage no marriage certificate request 1`] =
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -63551,8 +63618,27 @@ exports[`Storyshots Marriage/CheckoutPage no marriage certificate request 1`] =
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -63758,7 +63844,7 @@ exports[`Storyshots Marriage/CheckoutPage no marriage certificate request 1`] =
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -63805,12 +63891,78 @@ exports[`Storyshots Marriage/CheckoutPage no marriage certificate request 1`] =
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/CheckoutPage payment 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -63888,73 +64040,7 @@ exports[`Storyshots Marriage/CheckoutPage payment 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -64428,7 +64514,7 @@ exports[`Storyshots Marriage/CheckoutPage payment 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -64475,12 +64561,78 @@ exports[`Storyshots Marriage/CheckoutPage payment 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/CheckoutPage review 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -64592,73 +64744,7 @@ exports[`Storyshots Marriage/CheckoutPage review 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -65274,7 +65360,7 @@ exports[`Storyshots Marriage/CheckoutPage review 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -65321,31 +65407,12 @@ exports[`Storyshots Marriage/CheckoutPage review 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/CheckoutPage server-side render 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
-  }
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -65358,14 +65425,14 @@ exports[`Storyshots Marriage/CheckoutPage server-side render 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -65410,8 +65477,27 @@ exports[`Storyshots Marriage/CheckoutPage server-side render 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -65599,7 +65685,7 @@ exports[`Storyshots Marriage/CheckoutPage server-side render 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -65646,12 +65732,78 @@ exports[`Storyshots Marriage/CheckoutPage server-side render 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/CheckoutPage shipping 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -65729,73 +65881,7 @@ exports[`Storyshots Marriage/CheckoutPage shipping 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -66766,7 +66852,7 @@ exports[`Storyshots Marriage/CheckoutPage shipping 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -66813,8 +66899,8 @@ exports[`Storyshots Marriage/CheckoutPage shipping 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/Question Components/ClientInstructions default 1`] = `
@@ -66883,102 +66969,100 @@ exports[`Storyshots Marriage/Question Components/ClientInstructions default 1`]
   padding-left: 0 !important;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-1"
   >
     <div
-      className="emotion-1"
+      className="m-t500"
     >
+      <h2
+        className="emotion-0"
+      >
+        You must complete this process in person or by mail
+      </h2>
       <div
-        className="m-t500"
+        className="lh--400"
       >
-        <h2
-          className="emotion-0"
-        >
-          You must complete this process in person or by mail
-        </h2>
-        <div
-          className="lh--400"
-        >
-          <p>
-            If you are an attorney making a request for a client, you need these items to get a record:
-          </p>
-          <ol>
-            <li>
-              A letter on letterhead stating you legally represent the person for whom you are requesting a record
-            </li>
-            <li>
-              A photocopy of your ID (state-issued ID, driver’s license, or government-issued ID), and
-            </li>
-            <li>
-              A copy of your BAR card (must be in good standing and not expired)
-            </li>
-          </ol>
-          <p>
-            You must complete this process in person at Boston City Hall or by mail. In person, the cost per request is $12. We take cash, credit or debit cards, checks, or money orders. By mail, the cost per request is $14. We accept checks or money orders payable to the City of Boston.
-          </p>
-          <p>
-            For more information, you can email us at
-             
-            <a
-              href="mailto:registry@boston.gov"
-              onClick={[Function]}
-            >
-              registry
-              @boston.gov
-            </a>
-            .
-          </p>
-          <p>
-            <strong
-              className="t--sans tt-u"
-            >
-              Please note:
-            </strong>
-             If you are a legal representative and making a mail request, we will only return the record to your address.
-          </p>
-        </div>
+        <p>
+          If you are an attorney making a request for a client, you need these items to get a record:
+        </p>
+        <ol>
+          <li>
+            A letter on letterhead stating you legally represent the person for whom you are requesting a record
+          </li>
+          <li>
+            A photocopy of your ID (state-issued ID, driver’s license, or government-issued ID), and
+          </li>
+          <li>
+            A copy of your BAR card (must be in good standing and not expired)
+          </li>
+        </ol>
+        <p>
+          You must complete this process in person at Boston City Hall or by mail. In person, the cost per request is $12. We take cash, credit or debit cards, checks, or money orders. By mail, the cost per request is $14. We accept checks or money orders payable to the City of Boston.
+        </p>
+        <p>
+          For more information, you can email us at
+           
+          <a
+            href="mailto:registry@boston.gov"
+            onClick={[Function]}
+          >
+            registry
+            @boston.gov
+          </a>
+          .
+        </p>
+        <p>
+          <strong
+            className="t--sans tt-u"
+          >
+            Please note:
+          </strong>
+           If you are a legal representative and making a mail request, we will only return the record to your address.
+        </p>
       </div>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-3"
+  >
     <div
-      className="g g--mr emotion-3"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-2"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-2"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
-      />
+           
+          Back
+        </span>
+      </button>
     </div>
+    <div
+      className="g--6 ta-r m-b500"
+    />
   </div>
 </div>
 `;
@@ -67291,283 +67375,281 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-10"
   >
-    <div
-      className="emotion-10"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className=" inactive emotion-2"
       >
-        <label
-          className=" inactive emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className="selected  emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className="selected  emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <h2
+        className="emotion-0"
+      >
+        Please enter a date range.
+      </h2>
+      <p>
+        The two dates should be within a five year period.
+      </p>
       <div
-        className="m-v700"
+        className=" emotion-9"
       >
-        <h2
-          className="emotion-0"
-        >
-          Please enter a date range.
-        </h2>
-        <p>
-          The two dates should be within a five year period.
-        </p>
         <div
-          className=" emotion-9"
+          className="date-component"
         >
           <div
-            className="date-component"
+            aria-label="date 1"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 1"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date1month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date1year"
-                  max={2024}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date1month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date1year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
           <div
-            className="to"
+            className="t--err"
           >
-            to
+             
           </div>
+        </div>
+        <div
+          className="to"
+        >
+          to
+        </div>
+        <div
+          className="date-component"
+        >
           <div
-            className="date-component"
+            aria-label="date 2"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 2"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date2month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date2year"
-                  max={2024}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date2month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date2year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
+          <div
+            className="t--err"
+          >
+             
+          </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-12"
+  >
     <div
-      className="g g--mr emotion-12"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-11"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-11"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -67799,154 +67881,152 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage default 1`] = `
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-6"
   >
-    <div
-      className="emotion-6"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className="  emotion-2"
       >
-        <label
-          className="  emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className="  emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className="  emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-8"
+  >
     <div
-      className="g g--mr emotion-8"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-7"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-7"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -68238,253 +68318,251 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className="selected  emotion-2"
       >
-        <label
-          className="selected  emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className=" inactive emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className=" inactive emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
-      <div
-        className="m-v700"
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-8"
       >
-        <fieldset
-          className="emotion-8"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
+              What was the date of the marriage?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-7"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-month"
               >
-                What was the date of the marriage?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-7"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value="4"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-day"
-                >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value="23"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-year"
-                >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-year"
-                  max={2024}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value="2008"
-                />
-              </div>
+                Month
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value="4"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-day"
+              >
+                Day
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value="23"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-year"
+              >
+                Year
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value="2008"
+              />
             </div>
-            
           </div>
-        </fieldset>
-      </div>
+          
+        </div>
+      </fieldset>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -68776,277 +68854,275 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className="selected  emotion-2"
       >
-        <label
-          className="selected  emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className=" inactive emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className=" inactive emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
-      <div
-        className="m-v700"
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-8"
       >
-        <fieldset
-          className="emotion-8"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
+              What was the date of the marriage?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-7"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-month"
               >
-                What was the date of the marriage?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-7"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value="4"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-day"
-                >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value="23"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-year"
-                >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-year"
-                  max={2024}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value="2008"
-                />
-              </div>
+                Month
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value="4"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-day"
+              >
+                Day
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value="23"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-year"
+              >
+                Year
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value="2008"
+              />
             </div>
-            
           </div>
-        </fieldset>
-      </div>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
+          
+        </div>
+      </fieldset>
+    </div>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
         }
+      }
+    >
+      <h2
+        className="h3 tt-u"
       >
-        <h2
-          className="h3 tt-u"
-        >
-          We might not have the marriage certificate yet
-        </h2>
-        <p>
-          <strong>
-            We recommend waiting at least two weeks before you request a marriage certificate.
-          </strong>
-           
-          Once a marriage license has been filed, it generally takes two weeks for the marriage certificate to be issued.
-        </p>
-        <p>
-          If you order too early, we can only hold your request for seven days while we wait for the marriage certificate. If we don’t receive the record in time, your request will be canceled automatically and your card will not be charged. You’ll have to resubmit your request.
-        </p>
-      </div>
+        We might not have the marriage certificate yet
+      </h2>
+      <p>
+        <strong>
+          We recommend waiting at least two weeks before you request a marriage certificate.
+        </strong>
+         
+        Once a marriage license has been filed, it generally takes two weeks for the marriage certificate to be issued.
+      </p>
+      <p>
+        If you order too early, we can only hold your request for seven days while we wait for the marriage certificate. If we don’t receive the record in time, your request will be canceled automatically and your card will not be charged. You’ll have to resubmit your request.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -69360,283 +69436,281 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-10"
   >
-    <div
-      className="emotion-10"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className=" inactive emotion-2"
       >
-        <label
-          className=" inactive emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className="selected  emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className="selected  emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <h2
+        className="emotion-0"
+      >
+        Please enter a date range.
+      </h2>
+      <p>
+        The two dates should be within a five year period.
+      </p>
       <div
-        className="m-v700"
+        className=" emotion-9"
       >
-        <h2
-          className="emotion-0"
-        >
-          Please enter a date range.
-        </h2>
-        <p>
-          The two dates should be within a five year period.
-        </p>
         <div
-          className=" emotion-9"
+          className="date-component"
         >
           <div
-            className="date-component"
+            aria-label="date 1"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 1"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date1month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date1year"
-                  max={2024}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date1month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date1year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
           <div
-            className="to"
+            className="t--err"
           >
-            to
+             
           </div>
+        </div>
+        <div
+          className="to"
+        >
+          to
+        </div>
+        <div
+          className="date-component"
+        >
           <div
-            className="date-component"
+            aria-label="date 2"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 2"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date2month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date2year"
-                  max={2024}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date2month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date2year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
+          <div
+            className="t--err"
+          >
+             
+          </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-12"
+  >
     <div
-      className="g g--mr emotion-12"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-11"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-11"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -69887,199 +69961,197 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston default 1`] = `
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="filedInBoston"
+        >
+          Was 
+          your
+           marriage license filed at Boston City Hall?
+        </h2>
+      </legend>
+      <p>
+        This refers to where the paperwork was filed, 
+        <em>
+          not
+        </em>
+         where the marriage took place.
+      </p>
+      <div
+        aria-labelledby="filedInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="filedInBoston"
-          >
-            Was 
-            your
-             marriage license filed at Boston City Hall?
-          </h2>
-        </legend>
-        <p>
-          This refers to where the paperwork was filed, 
-          <em>
-            not
-          </em>
-           where the marriage took place.
-        </p>
-        <div
-          aria-labelledby="filedInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className="  emotion-2"
         >
-          <label
-            className="  emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -70330,221 +70402,219 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston user has selected
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="filedInBoston"
+        >
+          Was 
+          your
+           marriage license filed at Boston City Hall?
+        </h2>
+      </legend>
+      <p>
+        This refers to where the paperwork was filed, 
+        <em>
+          not
+        </em>
+         where the marriage took place.
+      </p>
+      <div
+        aria-labelledby="filedInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="filedInBoston"
-          >
-            Was 
-            your
-             marriage license filed at Boston City Hall?
-          </h2>
-        </legend>
-        <p>
-          This refers to where the paperwork was filed, 
-          <em>
-            not
-          </em>
-           where the marriage took place.
-        </p>
-        <div
-          aria-labelledby="filedInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
         }
+      }
+    >
+      <h2
+        className="h3 tt-u"
       >
-        <h2
-          className="h3 tt-u"
-        >
-          Sorry, we don’t have your record
-        </h2>
-        <p>
-          We only have records for marriages filed at Boston City Hall. It’s possible to have a wedding in Boston with a marriage license issued by any city or town in Massachusetts.
-        </p>
-        <p>
-          Please contact the town, city, state, or country where
-           
-          your
-           marriage was filed to find the record.
-        </p>
-      </div>
+        Sorry, we don’t have your record
+      </h2>
+      <p>
+        We only have records for marriages filed at Boston City Hall. It’s possible to have a wedding in Boston with a marriage license issued by any city or town in Massachusetts.
+      </p>
+      <p>
+        Please contact the town, city, state, or country where
+         
+        your
+         marriage was filed to find the record.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          onClick={[Function]}
-          type="button"
-        >
-          Start over
-        </button>
-      </div>
+        Start over
+      </button>
     </div>
   </div>
 </div>
@@ -70795,219 +70865,217 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston user is not sure
   stroke: none;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="filedInBoston"
+        >
+          Was 
+          your
+           marriage license filed at Boston City Hall?
+        </h2>
+      </legend>
+      <p>
+        This refers to where the paperwork was filed, 
+        <em>
+          not
+        </em>
+         where the marriage took place.
+      </p>
+      <div
+        aria-labelledby="filedInBoston"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="filedInBoston"
-          >
-            Was 
-            your
-             marriage license filed at Boston City Hall?
-          </h2>
-        </legend>
-        <p>
-          This refers to where the paperwork was filed, 
-          <em>
-            not
-          </em>
-           where the marriage took place.
-        </p>
-        <div
-          aria-labelledby="filedInBoston"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="checkMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
+          <span>
+            Yes
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={true}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
-            />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
+              <path
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
+              />
+            </g>
+          </svg>
+          <input
+            checked={true}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-1"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-1"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="filedInBoston"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="filedInBoston"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
         }
+      }
+    >
+      <h2
+        className="h3 tt-u"
       >
-        <h2
-          className="h3 tt-u"
-        >
-          We might not have your record
-        </h2>
-        <p>
-          We only have records for marriages filed at Boston City Hall. It’s possible to have a wedding in Boston with a marriage license issued by any city or town in Massachusetts.
-        </p>
-        <p>
-          You can still place this order, and we’ll do our best to help you out.
-        </p>
-      </div>
+        We might not have your record
+      </h2>
+      <p>
+        We only have records for marriages filed at Boston City Hall. It’s possible to have a wedding in Boston with a marriage license issued by any city or town in Massachusetts.
+      </p>
+      <p>
+        You can still place this order, and we’ll do our best to help you out.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -71252,177 +71320,175 @@ exports[`Storyshots Marriage/Question Components/ForWhom default 1`] = `
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="forSelf"
+        >
+          Whose marriage certificate are you ordering?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="forSelf"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="forSelf"
-          >
-            Whose marriage certificate are you ordering?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="forSelf"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className="  emotion-2"
         >
-          <label
-            className="  emotion-2"
+          <svg
+            aria-hidden="true"
+            className="forWhom heavier emotion-1"
+            focusable="false"
+            viewBox="-26 -4 100 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="forWhom heavier emotion-1"
-              focusable="false"
-              viewBox="-26 -4 100 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="self"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Mine
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="self"
+          />
+          <span>
+            Mine
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="forOther heavier emotion-1"
+            focusable="false"
+            viewBox="-2 -4 140 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="forOther heavier emotion-1"
-              focusable="false"
-              viewBox="-2 -4 140 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-              <path
-                d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
-                transform="translate(-1.669 -29.65)"
-              />
-              <line
-                strokeWidth="4"
-                transform="translate(55.514 68.46)"
-                x2="15.928"
-              />
-              <path
-                d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
-                fill="currentColor"
-                transform="translate(-3.812 -26.73)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="other"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Someone else’s
-            </span>
-          </label>
-          <label
-            className="  emotion-2"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+            <path
+              d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
+              transform="translate(-1.669 -29.65)"
+            />
+            <line
+              strokeWidth="4"
+              transform="translate(55.514 68.46)"
+              x2="15.928"
+            />
+            <path
+              d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
+              fill="currentColor"
+              transform="translate(-3.812 -26.73)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="other"
+          />
+          <span>
+            Someone else’s
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="emotion-1"
+            focusable="false"
+            viewBox="-2 -12 93 93"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="emotion-1"
-              focusable="false"
-              viewBox="-2 -12 93 93"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                height="64.203"
-                transform="translate(0 14.306)"
-                width="88.279"
-              />
-              <path
-                d="M3.5,17.9H89.25L82.079,43.459H10.025Z"
-                transform="translate(-1.913 -3.594)"
-              />
-              <rect
-                height="16.312"
-                transform="translate(19.54 30.269)"
-                width="6.63"
-              />
-              <rect
-                height="16.312"
-                transform="translate(60.626 30.269)"
-                width="6.63"
-              />
-              <path
-                d="M70.21,1.5V15.806H62.184V8.653H36.713v7.153H28.6V1.5Z"
-                transform="translate(-5.309 -1.5)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="client"
+            <rect
+              height="64.203"
+              transform="translate(0 14.306)"
+              width="88.279"
             />
-            <span>
-              My client
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+            <path
+              d="M3.5,17.9H89.25L82.079,43.459H10.025Z"
+              transform="translate(-1.913 -3.594)"
+            />
+            <rect
+              height="16.312"
+              transform="translate(19.54 30.269)"
+              width="6.63"
+            />
+            <rect
+              height="16.312"
+              transform="translate(60.626 30.269)"
+              width="6.63"
+            />
+            <path
+              d="M70.21,1.5V15.806H62.184V8.653H36.713v7.153H28.6V1.5Z"
+              transform="translate(-5.309 -1.5)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="client"
+          />
+          <span>
+            My client
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-10"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    />
     <div
-      className="g g--mr emotion-10"
+      className="g--6 ta-r m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
-      />
-      <div
-        className="g--6 ta-r m-b500"
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -71667,188 +71733,186 @@ exports[`Storyshots Marriage/Question Components/ForWhom someone else’s 1`] =
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
+    <fieldset
+      className=" emotion-8"
     >
-      <fieldset
-        className=" emotion-8"
+      <legend>
+        <h2
+          className="emotion-0"
+          id="forSelf"
+        >
+          Whose marriage certificate are you ordering?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="forSelf"
+        className="emotion-7"
+        role="radiogroup"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="forSelf"
-          >
-            Whose marriage certificate are you ordering?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="forSelf"
-          className="emotion-7"
-          role="radiogroup"
+        <label
+          className=" inactive emotion-2"
         >
-          <label
-            className=" inactive emotion-2"
+          <svg
+            aria-hidden="true"
+            className="forWhom heavier emotion-1"
+            focusable="false"
+            viewBox="-26 -4 100 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="forWhom heavier emotion-1"
-              focusable="false"
-              viewBox="-26 -4 100 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="self"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              Mine
-            </span>
-          </label>
-          <label
-            className="selected  emotion-2"
-          >
-            <svg
-              aria-hidden="true"
-              className="forOther heavier emotion-1"
-              focusable="false"
-              viewBox="-2 -4 140 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-                transform="translate(-11.995 -29.65)"
-              />
-              <path
-                d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-                transform="translate(-10.757 -34)"
-              />
-              <path
-                d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
-                transform="translate(-0.431 -34)"
-              />
-              <path
-                d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
-                transform="translate(-1.669 -29.65)"
-              />
-              <line
-                strokeWidth="4"
-                transform="translate(55.514 68.46)"
-                x2="15.928"
-              />
-              <path
-                d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
-                fill="currentColor"
-                transform="translate(-3.812 -26.73)"
-              />
-            </svg>
-            <input
-              checked={true}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="other"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
             />
-            <span>
-              Someone else’s
-            </span>
-          </label>
-          <label
-            className=" inactive emotion-2"
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="self"
+          />
+          <span>
+            Mine
+          </span>
+        </label>
+        <label
+          className="selected  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="forOther heavier emotion-1"
+            focusable="false"
+            viewBox="-2 -4 140 100"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="emotion-1"
-              focusable="false"
-              viewBox="-2 -12 93 93"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                height="64.203"
-                transform="translate(0 14.306)"
-                width="88.279"
-              />
-              <path
-                d="M3.5,17.9H89.25L82.079,43.459H10.025Z"
-                transform="translate(-1.913 -3.594)"
-              />
-              <rect
-                height="16.312"
-                transform="translate(19.54 30.269)"
-                width="6.63"
-              />
-              <rect
-                height="16.312"
-                transform="translate(60.626 30.269)"
-                width="6.63"
-              />
-              <path
-                d="M70.21,1.5V15.806H62.184V8.653H36.713v7.153H28.6V1.5Z"
-                transform="translate(-5.309 -1.5)"
-              />
-            </svg>
-            <input
-              checked={false}
-              name="forSelf"
-              onChange={[Function]}
-              type="radio"
-              value="client"
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
             />
-            <span>
-              My client
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
-    <div
-      className="g g--mr emotion-10"
-    >
-      <div
-        className="t--info g--6 m-b500"
-      />
-      <div
-        className="g--6 ta-r m-b500"
-      >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+            <path
+              d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
+              transform="translate(-1.669 -29.65)"
+            />
+            <line
+              strokeWidth="4"
+              transform="translate(55.514 68.46)"
+              x2="15.928"
+            />
+            <path
+              d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
+              fill="currentColor"
+              transform="translate(-3.812 -26.73)"
+            />
+          </svg>
+          <input
+            checked={true}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="other"
+          />
+          <span>
+            Someone else’s
+          </span>
+        </label>
+        <label
+          className=" inactive emotion-2"
         >
-          Next question
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
-.emotion-15 fieldset + fieldset {
-  margin-top: 2rem;
-}
-
-@media screen and (min-width:480px) {
+          <svg
+            aria-hidden="true"
+            className="emotion-1"
+            focusable="false"
+            viewBox="-2 -12 93 93"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="64.203"
+              transform="translate(0 14.306)"
+              width="88.279"
+            />
+            <path
+              d="M3.5,17.9H89.25L82.079,43.459H10.025Z"
+              transform="translate(-1.913 -3.594)"
+            />
+            <rect
+              height="16.312"
+              transform="translate(19.54 30.269)"
+              width="6.63"
+            />
+            <rect
+              height="16.312"
+              transform="translate(60.626 30.269)"
+              width="6.63"
+            />
+            <path
+              d="M70.21,1.5V15.806H62.184V8.653H36.713v7.153H28.6V1.5Z"
+              transform="translate(-5.309 -1.5)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="client"
+          />
+          <span>
+            My client
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-10"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    />
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Next question
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
+.emotion-15 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
   .emotion-15 fieldset + fieldset {
     margin-top: 4rem;
   }
@@ -72156,99 +72220,68 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-15"
   >
-    <div
-      className="emotion-15"
+    <fieldset
+      className=" emotion-5"
     >
-      <fieldset
-        className=" emotion-5"
+      <legend>
+        <h2
+          className="emotion-0"
+        >
+          What is the name of the first person on the certificate?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
       >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What is the name of the first person on the certificate?
-          </h2>
-        </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
+        It doesn’t matter which person comes first on the marriage certificate.
+      </p>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-1103008209"
+          style={Object {}}
         >
-          It doesn’t matter which person comes first on the marriage certificate.
-        </p>
-        <div>
-          <label
-            className="txt-l "
-            htmlFor="input-1103008209"
-            style={Object {}}
-          >
-            <span
-              style={
-                Object {
-                  "marginRight": "0.5em",
-                  "whiteSpace": "nowrap",
-                }
+          <span
+            style={
+              Object {
+                "marginRight": "0.5em",
+                "whiteSpace": "nowrap",
               }
-            >
-              Full Name
-            </span>
-          </label>
-          <input
-            aria-label=""
-            className="txt-f  "
-            id="input-1103008209"
-            name="fullName1"
-            onChange={[Function]}
-            type="text"
-            value=""
-          />
-          <div
-            className="t--subinfo t--err m-b100 m-t100"
+            }
           >
-             
-          </div>
-        </div>
+            Full Name
+          </span>
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-1103008209"
+          name="fullName1"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
         <div
-          className="emotion-1"
+          className="t--subinfo t--err m-b100 m-t100"
         >
-          <label
-            className="txt-l "
-            htmlFor="input-5381"
-            style={Object {}}
-          >
-            Maiden name 
-            <span
-              style={
-                Object {
-                  "fontSize": "90%",
-                }
-              }
-            >
-              (if any)
-            </span>
-          </label>
-          <input
-            aria-label=""
-            className="txt-f  "
-            id="input-5381"
-            name="maidenName1"
-            onChange={[Function]}
-            type="text"
-            value=""
-          />
-          <div
-            className="t--subinfo t--err m-b100 m-t100"
-          >
-             
-          </div>
+           
         </div>
-        <h3
-          className="txt-l"
-          id="altSpellings"
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label
+          className="txt-l "
+          htmlFor="input-5381"
+          style={Object {}}
         >
-          Alternate spellings 
+          Maiden name 
           <span
             style={
               Object {
@@ -72258,253 +72291,282 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
           >
             (if any)
           </span>
-        </h3>
-        <ul
-          aria-labelledby="altSpellings"
-          className="emotion-2"
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-5381"
+          name="maidenName1"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
         >
-          <li
-            style={
-              Object {
-                "marginBottom": "1em",
-              }
+           
+        </div>
+      </div>
+      <h3
+        className="txt-l"
+        id="altSpellings"
+      >
+        Alternate spellings 
+        <span
+          style={
+            Object {
+              "fontSize": "90%",
             }
-          >
-            <input
-              aria-label="Spelling option 1"
-              className="txt-f"
-              onBlur={[Function]}
-              onChange={[Function]}
-              type="text"
-              value=""
+          }
+        >
+          (if any)
+        </span>
+      </h3>
+      <ul
+        aria-labelledby="altSpellings"
+        className="emotion-2"
+      >
+        <li
+          style={
+            Object {
+              "marginBottom": "1em",
+            }
+          }
+        >
+          <input
+            aria-label="Spelling option 1"
+            className="txt-f"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+        </li>
+      </ul>
+      <button
+        className="emotion-4"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="emotion-3"
+          focusable="false"
+          viewBox="0 0 10 10"
+        >
+          <circle
+            cx="5"
+            cy="5"
+            r="4"
+            stroke="none"
+          />
+          <g>
+            <line
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth="1"
+              x1="5"
+              x2="5"
+              y1="2.5"
+              y2="7.5"
             />
-          </li>
-        </ul>
-        <button
-          className="emotion-4"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
+            <line
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth="1"
+              x1="2.5"
+              x2="7.5"
+              y1="5"
+              y2="5"
+            />
+          </g>
+        </svg>
+        <span>
+          Add another option
+        </span>
+      </button>
+    </fieldset>
+    <fieldset
+      className=" emotion-5"
+    >
+      <legend>
+        <h2
+          className="emotion-0"
+          id="filedInBoston"
+        >
+          Were 
+          their
+           parents married at the time of 
+          their
+           birth?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="parentsMarried1"
+        className="emotion-13"
+        role="radiogroup"
+      >
+        <label
+          className="  emotion-8"
         >
           <svg
             aria-hidden="true"
-            className="emotion-3"
+            className="checkMark emotion-7"
             focusable="false"
-            viewBox="0 0 10 10"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <circle
-              cx="5"
-              cy="5"
-              r="4"
-              stroke="none"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
             />
-            <g>
-              <line
-                fill="none"
-                strokeLinecap="round"
-                strokeWidth="1"
-                x1="5"
-                x2="5"
-                y1="2.5"
-                y2="7.5"
-              />
-              <line
-                fill="none"
-                strokeLinecap="round"
-                strokeWidth="1"
-                x1="2.5"
-                x2="7.5"
-                y1="5"
-                y2="5"
-              />
-            </g>
           </svg>
+          <input
+            checked={false}
+            name="parentsMarried1"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
           <span>
-            Add another option
+            Yes
           </span>
-        </button>
-      </fieldset>
-      <fieldset
-        className=" emotion-5"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="filedInBoston"
-          >
-            Were 
-            their
-             parents married at the time of 
-            their
-             birth?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="parentsMarried1"
-          className="emotion-13"
-          role="radiogroup"
+        </label>
+        <label
+          className="  emotion-8"
         >
-          <label
-            className="  emotion-8"
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-7"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried1"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-8"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried1"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-8"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-7"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried1"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-8"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried1"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried1"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-17"
+  >
     <div
-      className="g g--mr emotion-17"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-16"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-16"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -72823,350 +72885,348 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-15"
   >
-    <div
-      className="emotion-15"
+    <fieldset
+      className=" emotion-5"
     >
-      <fieldset
-        className=" emotion-5"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What is the name of the other person on the certificate?
-          </h2>
-        </legend>
-        <div>
-          <label
-            className="txt-l "
-            htmlFor="input-1103008209"
-            style={Object {}}
-          >
-            <span
-              style={
-                Object {
-                  "marginRight": "0.5em",
-                  "whiteSpace": "nowrap",
-                }
-              }
-            >
-              Full Name
-            </span>
-          </label>
-          <input
-            aria-label=""
-            className="txt-f  "
-            id="input-1103008209"
-            name="fullName2"
-            onChange={[Function]}
-            type="text"
-            value=""
-          />
-          <div
-            className="t--subinfo t--err m-b100 m-t100"
-          >
-             
-          </div>
-        </div>
-        <div
-          className="emotion-1"
+      <legend>
+        <h2
+          className="emotion-0"
         >
-          <label
-            className="txt-l "
-            htmlFor="input-5381"
-            style={Object {}}
-          >
-            Maiden name 
-            <span
-              style={
-                Object {
-                  "fontSize": "90%",
-                }
-              }
-            >
-              (if any)
-            </span>
-          </label>
-          <input
-            aria-label=""
-            className="txt-f  "
-            id="input-5381"
-            name="maidenName2"
-            onChange={[Function]}
-            type="text"
-            value=""
-          />
-          <div
-            className="t--subinfo t--err m-b100 m-t100"
-          >
-             
-          </div>
-        </div>
-        <h3
-          className="txt-l"
-          id="altSpellings"
+          What is the name of the other person on the certificate?
+        </h2>
+      </legend>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-1103008209"
+          style={Object {}}
         >
-          Alternate spellings 
           <span
             style={
               Object {
-                "fontSize": "90%",
+                "marginRight": "0.5em",
+                "whiteSpace": "nowrap",
               }
             }
           >
-            (if any)
+            Full Name
           </span>
-        </h3>
-        <ul
-          aria-labelledby="altSpellings"
-          className="emotion-2"
-        >
-          <li
-            style={
-              Object {
-                "marginBottom": "1em",
-              }
-            }
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-1103008209"
+          name="fullName2"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
+        >
+           
+        </div>
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label
+          className="txt-l "
+          htmlFor="input-5381"
+          style={Object {}}
+        >
+          Maiden name 
+          <span
+            style={
+              Object {
+                "fontSize": "90%",
+              }
+            }
           >
-            <input
-              aria-label="Spelling option 1"
-              className="txt-f"
-              onBlur={[Function]}
-              onChange={[Function]}
-              type="text"
-              value=""
+            (if any)
+          </span>
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-5381"
+          name="maidenName2"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
+        >
+           
+        </div>
+      </div>
+      <h3
+        className="txt-l"
+        id="altSpellings"
+      >
+        Alternate spellings 
+        <span
+          style={
+            Object {
+              "fontSize": "90%",
+            }
+          }
+        >
+          (if any)
+        </span>
+      </h3>
+      <ul
+        aria-labelledby="altSpellings"
+        className="emotion-2"
+      >
+        <li
+          style={
+            Object {
+              "marginBottom": "1em",
+            }
+          }
+        >
+          <input
+            aria-label="Spelling option 1"
+            className="txt-f"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+        </li>
+      </ul>
+      <button
+        className="emotion-4"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="emotion-3"
+          focusable="false"
+          viewBox="0 0 10 10"
+        >
+          <circle
+            cx="5"
+            cy="5"
+            r="4"
+            stroke="none"
+          />
+          <g>
+            <line
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth="1"
+              x1="5"
+              x2="5"
+              y1="2.5"
+              y2="7.5"
             />
-          </li>
-        </ul>
-        <button
-          className="emotion-4"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
+            <line
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth="1"
+              x1="2.5"
+              x2="7.5"
+              y1="5"
+              y2="5"
+            />
+          </g>
+        </svg>
+        <span>
+          Add another option
+        </span>
+      </button>
+    </fieldset>
+    <fieldset
+      className=" emotion-5"
+    >
+      <legend>
+        <h2
+          className="emotion-0"
+          id="filedInBoston"
+        >
+          Were 
+          their
+           parents married at the time of 
+          their
+           birth?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="parentsMarried2"
+        className="emotion-13"
+        role="radiogroup"
+      >
+        <label
+          className="  emotion-8"
         >
           <svg
             aria-hidden="true"
-            className="emotion-3"
+            className="checkMark emotion-7"
             focusable="false"
-            viewBox="0 0 10 10"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <circle
-              cx="5"
-              cy="5"
-              r="4"
-              stroke="none"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
             />
-            <g>
-              <line
-                fill="none"
-                strokeLinecap="round"
-                strokeWidth="1"
-                x1="5"
-                x2="5"
-                y1="2.5"
-                y2="7.5"
-              />
-              <line
-                fill="none"
-                strokeLinecap="round"
-                strokeWidth="1"
-                x1="2.5"
-                x2="7.5"
-                y1="5"
-                y2="5"
-              />
-            </g>
           </svg>
+          <input
+            checked={false}
+            name="parentsMarried2"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
           <span>
-            Add another option
+            Yes
           </span>
-        </button>
-      </fieldset>
-      <fieldset
-        className=" emotion-5"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="filedInBoston"
-          >
-            Were 
-            their
-             parents married at the time of 
-            their
-             birth?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="parentsMarried2"
-          className="emotion-13"
-          role="radiogroup"
+        </label>
+        <label
+          className="  emotion-8"
         >
-          <label
-            className="  emotion-8"
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-7"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried2"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-8"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried2"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-8"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-7"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried2"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-8"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried2"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried2"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-17"
+  >
     <div
-      className="g g--mr emotion-17"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-16"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-16"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -73485,94 +73545,63 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-15"
   >
-    <div
-      className="emotion-15"
+    <fieldset
+      className=" emotion-5"
     >
-      <fieldset
-        className=" emotion-5"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What is your name?
-          </h2>
-        </legend>
-        <div>
-          <label
-            className="txt-l "
-            htmlFor="input-1103008209"
-            style={Object {}}
-          >
-            <span
-              style={
-                Object {
-                  "marginRight": "0.5em",
-                  "whiteSpace": "nowrap",
-                }
+      <legend>
+        <h2
+          className="emotion-0"
+        >
+          What is your name?
+        </h2>
+      </legend>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-1103008209"
+          style={Object {}}
+        >
+          <span
+            style={
+              Object {
+                "marginRight": "0.5em",
+                "whiteSpace": "nowrap",
               }
-            >
-              Full Name
-            </span>
-          </label>
-          <input
-            aria-label=""
-            className="txt-f  "
-            id="input-1103008209"
-            name="fullName1"
-            onChange={[Function]}
-            type="text"
-            value=""
-          />
-          <div
-            className="t--subinfo t--err m-b100 m-t100"
+            }
           >
-             
-          </div>
-        </div>
+            Full Name
+          </span>
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-1103008209"
+          name="fullName1"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
         <div
-          className="emotion-1"
+          className="t--subinfo t--err m-b100 m-t100"
         >
-          <label
-            className="txt-l "
-            htmlFor="input-5381"
-            style={Object {}}
-          >
-            Maiden name 
-            <span
-              style={
-                Object {
-                  "fontSize": "90%",
-                }
-              }
-            >
-              (if any)
-            </span>
-          </label>
-          <input
-            aria-label=""
-            className="txt-f  "
-            id="input-5381"
-            name="maidenName1"
-            onChange={[Function]}
-            type="text"
-            value=""
-          />
-          <div
-            className="t--subinfo t--err m-b100 m-t100"
-          >
-             
-          </div>
+           
         </div>
-        <h3
-          className="txt-l"
-          id="altSpellings"
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label
+          className="txt-l "
+          htmlFor="input-5381"
+          style={Object {}}
         >
-          Alternate spellings 
+          Maiden name 
           <span
             style={
               Object {
@@ -73582,253 +73611,282 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
           >
             (if any)
           </span>
-        </h3>
-        <ul
-          aria-labelledby="altSpellings"
-          className="emotion-2"
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-5381"
+          name="maidenName1"
+          onChange={[Function]}
+          type="text"
+          value=""
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
         >
-          <li
-            style={
-              Object {
-                "marginBottom": "1em",
-              }
+           
+        </div>
+      </div>
+      <h3
+        className="txt-l"
+        id="altSpellings"
+      >
+        Alternate spellings 
+        <span
+          style={
+            Object {
+              "fontSize": "90%",
             }
-          >
-            <input
-              aria-label="Spelling option 1"
-              className="txt-f"
-              onBlur={[Function]}
-              onChange={[Function]}
-              type="text"
-              value=""
+          }
+        >
+          (if any)
+        </span>
+      </h3>
+      <ul
+        aria-labelledby="altSpellings"
+        className="emotion-2"
+      >
+        <li
+          style={
+            Object {
+              "marginBottom": "1em",
+            }
+          }
+        >
+          <input
+            aria-label="Spelling option 1"
+            className="txt-f"
+            onBlur={[Function]}
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+        </li>
+      </ul>
+      <button
+        className="emotion-4"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="emotion-3"
+          focusable="false"
+          viewBox="0 0 10 10"
+        >
+          <circle
+            cx="5"
+            cy="5"
+            r="4"
+            stroke="none"
+          />
+          <g>
+            <line
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth="1"
+              x1="5"
+              x2="5"
+              y1="2.5"
+              y2="7.5"
             />
-          </li>
-        </ul>
-        <button
-          className="emotion-4"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
+            <line
+              fill="none"
+              strokeLinecap="round"
+              strokeWidth="1"
+              x1="2.5"
+              x2="7.5"
+              y1="5"
+              y2="5"
+            />
+          </g>
+        </svg>
+        <span>
+          Add another option
+        </span>
+      </button>
+    </fieldset>
+    <fieldset
+      className=" emotion-5"
+    >
+      <legend>
+        <h2
+          className="emotion-0"
+          id="filedInBoston"
+        >
+          Were 
+          your
+           parents married at the time of 
+          your
+           birth?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="parentsMarried1"
+        className="emotion-13"
+        role="radiogroup"
+      >
+        <label
+          className="  emotion-8"
         >
           <svg
             aria-hidden="true"
-            className="emotion-3"
+            className="checkMark emotion-7"
             focusable="false"
-            viewBox="0 0 10 10"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <circle
-              cx="5"
-              cy="5"
-              r="4"
-              stroke="none"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <path
+              d="M50.937,26.2,30.069,47.068,21,38.791"
+              transform="translate(-5.591 -6.213)"
             />
-            <g>
-              <line
-                fill="none"
-                strokeLinecap="round"
-                strokeWidth="1"
-                x1="5"
-                x2="5"
-                y1="2.5"
-                y2="7.5"
-              />
-              <line
-                fill="none"
-                strokeLinecap="round"
-                strokeWidth="1"
-                x1="2.5"
-                x2="7.5"
-                y1="5"
-                y2="5"
-              />
-            </g>
           </svg>
+          <input
+            checked={false}
+            name="parentsMarried1"
+            onChange={[Function]}
+            type="radio"
+            value="yes"
+          />
           <span>
-            Add another option
+            Yes
           </span>
-        </button>
-      </fieldset>
-      <fieldset
-        className=" emotion-5"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-            id="filedInBoston"
-          >
-            Were 
-            your
-             parents married at the time of 
-            your
-             birth?
-          </h2>
-        </legend>
-        <div
-          aria-labelledby="parentsMarried1"
-          className="emotion-13"
-          role="radiogroup"
+        </label>
+        <label
+          className="  emotion-8"
         >
-          <label
-            className="  emotion-8"
+          <svg
+            aria-hidden="true"
+            className="questionMark emotion-7"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="checkMark emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
+            />
+            <g
+              transform="translate(20.339 12.679)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <path
+                d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
+                transform="translate(-26.6 -17.9)"
               />
               <path
-                d="M50.937,26.2,30.069,47.068,21,38.791"
-                transform="translate(-5.591 -6.213)"
+                d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
+                transform="translate(-27.437 -21.605)"
               />
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried1"
-              onChange={[Function]}
-              type="radio"
-              value="yes"
-            />
-            <span>
-              Yes
-            </span>
-          </label>
-          <label
-            className="  emotion-8"
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried1"
+            onChange={[Function]}
+            type="radio"
+            value="unknown"
+          />
+          <span>
+            I don’t know
+          </span>
+        </label>
+        <label
+          className="  emotion-8"
+        >
+          <svg
+            aria-hidden="true"
+            className="xSymbol emotion-7"
+            focusable="false"
+            viewBox="-2.5 -2.5 66 66"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              className="questionMark emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
-              />
-              <g
-                transform="translate(20.339 12.679)"
-              >
-                <path
-                  d="M40.16,41.233H33.116V37.8a5.929,5.929,0,0,1,.528-2.818,12.363,12.363,0,0,1,2.025-2.553l3.17-3.258a3.213,3.213,0,0,0,.7-2.113,3.651,3.651,0,0,0-.7-2.2,2.377,2.377,0,0,0-1.937-.88,2.467,2.467,0,0,0-2.025,1.057,5.057,5.057,0,0,0-.969,2.73H26.6a11.361,11.361,0,0,1,3.346-7.22A10.214,10.214,0,0,1,37.078,17.9a9.953,9.953,0,0,1,6.956,2.377,8.3,8.3,0,0,1,2.73,6.516,7,7,0,0,1-.44,2.73c-.264.616-.528,1.057-.616,1.321a5.625,5.625,0,0,1-.88,1.145,5.222,5.222,0,0,1-.88.969L41.832,35.07a6.192,6.192,0,0,0-1.321,1.585A4.913,4.913,0,0,0,40.16,38.5Z"
-                  transform="translate(-26.6 -17.9)"
-                />
-                <path
-                  d="M34.745,55.856A4.26,4.26,0,1,1,37.65,57,3.606,3.606,0,0,1,34.745,55.856Z"
-                  transform="translate(-27.437 -21.605)"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried1"
-              onChange={[Function]}
-              type="radio"
-              value="unknown"
+            <ellipse
+              cx="30.377"
+              cy="30.377"
+              rx="30.377"
+              ry="30.377"
             />
-            <span>
-              I don’t know
-            </span>
-          </label>
-          <label
-            className="  emotion-8"
-          >
-            <svg
-              aria-hidden="true"
-              className="xSymbol emotion-7"
-              focusable="false"
-              viewBox="-2.5 -2.5 66 66"
-              xmlns="http://www.w3.org/2000/svg"
+            <g
+              transform="translate(19.107 19.107)"
             >
-              <ellipse
-                cx="30.377"
-                cy="30.377"
-                rx="30.377"
-                ry="30.377"
+              <line
+                x2="22.629"
+                y2="22.629"
               />
-              <g
-                transform="translate(19.107 19.107)"
-              >
-                <line
-                  x2="22.629"
-                  y2="22.629"
-                />
-                <line
-                  x2="22.629"
-                  y1="22.629"
-                />
-              </g>
-            </svg>
-            <input
-              checked={false}
-              name="parentsMarried1"
-              onChange={[Function]}
-              type="radio"
-              value="no"
-            />
-            <span>
-              No
-            </span>
-          </label>
-        </div>
-      </fieldset>
-    </div>
+              <line
+                x2="22.629"
+                y1="22.629"
+              />
+            </g>
+          </svg>
+          <input
+            checked={false}
+            name="parentsMarried1"
+            onChange={[Function]}
+            type="radio"
+            value="no"
+          />
+          <span>
+            No
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-17"
+  >
     <div
-      className="g g--mr emotion-17"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-16"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-16"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -73999,762 +74057,473 @@ exports[`Storyshots Marriage/Question Components/VerifyIdentification default 1`
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-18"
   >
-    <div
-      className="emotion-18"
+    <h2
+      className="emotion-0"
     >
-      <h2
-        className="emotion-0"
-      >
-        Verify your identity
-      </h2>
-      <p
-        className="lh--400 t--s400 m-b500"
-      >
-        Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
-      </p>
-      <p
-        className="lh--400 t--s400 m-b500"
+      Verify your identity
+    </h2>
+    <p
+      className="lh--400 t--s400 m-b500"
+    >
+      Under state law, the record you’re ordering may have an access restriction. You must upload a valid form of identification before we can process your request.
+    </p>
+    <p
+      className="lh--400 t--s400 m-b500"
+    >
+      <em>
+        Please note
+      </em>
+      : You must be
+       
+       listed on the record to get a copy of the certificate. If you are not listed on the record, you will not be able to get a copy. We will cancel your request and will not charge your card. Contact
+       
+      <a
+        href="mailto:registry@boston.gov"
+        onClick={[Function]}
       >
-        <em>
-          Please note
-        </em>
-        : You must be
-         
-         listed on the record to get a copy of the certificate. If you are not listed on the record, you will not be able to get a copy. We will cancel your request and will not charge your card. Contact
-         
-        <a
-          href="mailto:registry@boston.gov"
-          onClick={[Function]}
-        >
-          registry
-          @boston.gov
-        </a>
-         
-        with questions.
-      </p>
-      <h3
-        className="secondary m-t700 emotion-0"
-        style={
-          Object {
-            "borderBottom": 0,
-          }
+        registry
+        @boston.gov
+      </a>
+       
+      with questions.
+    </p>
+    <h3
+      className="secondary m-t700 emotion-0"
+      style={
+        Object {
+          "borderBottom": 0,
         }
-      >
-        Upload ID images
-      </h3>
-      <h3>
-        We accept the following forms of ID:
-      </h3>
-      <ul
-        className="lh--300"
-      >
-        <li>
-          Driver’s License
-        </li>
-        <li>
-          State ID
-        </li>
-        <li>
-          Passport
-        </li>
-        <li>
-          Military ID
-        </li>
-      </ul>
+      }
+    >
+      Upload ID images
+    </h3>
+    <h3>
+      We accept the following forms of ID:
+    </h3>
+    <ul
+      className="lh--300"
+    >
+      <li>
+        Driver’s License
+      </li>
+      <li>
+        State ID
+      </li>
+      <li>
+        Passport
+      </li>
+      <li>
+        Military ID
+      </li>
+    </ul>
+    <div
+      className="g"
+    >
       <div
-        className="g"
+        className="g--6 m-v500"
       >
         <div
-          className="g--6 m-v500"
+          className="br br-a200 emotion-6"
         >
           <div
-            className="br br-a200 emotion-6"
+            className="emotion-4"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDragEnter={[Function]}
+            onDragLeave={[Function]}
+            onDragOver={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
           >
-            <div
-              className="emotion-4"
-              onBlur={[Function]}
+            <input
+              accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
+              autoComplete="off"
+              multiple={false}
+              onChange={[Function]}
               onClick={[Function]}
-              onDragEnter={[Function]}
-              onDragLeave={[Function]}
-              onDragOver={[Function]}
-              onDragStart={[Function]}
-              onDrop={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              tabIndex={0}
+              style={
+                Object {
+                  "display": "none",
+                }
+              }
+              tabIndex={-1}
+              type="file"
+            />
+            <div
+              className="emotion-3"
             >
-              <input
-                accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-                autoComplete="off"
-                multiple={false}
-                onChange={[Function]}
-                onClick={[Function]}
+              <div
                 style={
                   Object {
-                    "display": "none",
+                    "visibility": "visible",
                   }
                 }
-                tabIndex={-1}
-                type="file"
-              />
-              <div
-                className="emotion-3"
               >
                 <div
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
-                  }
+                  className="id emotion-2"
                 >
-                  <div
-                    className="id emotion-2"
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 181 134"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      viewBox="0 0 181 134"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <path
+                      d="M2 2h176v130H2z"
+                      fill="#fff"
+                    />
+                    <g
+                      fill="currentColor"
                     >
                       <path
-                        d="M2 2h176v130H2z"
-                        fill="#fff"
+                        d="M181 134H0V0h181zM4 130h172V4H4z"
                       />
-                      <g
-                        fill="currentColor"
-                      >
-                        <path
-                          d="M181 134H0V0h181zM4 130h172V4H4z"
-                        />
-                        <path
-                          d="M95 30h63v4H95z"
-                        />
-                        <path
-                          d="M95 48h63v4H95z"
-                        />
-                        <path
-                          d="M95 66h63v4H95z"
-                        />
-                        <path
-                          d="M95 83h63v4H95z"
-                        />
-                        <path
-                          d="M95 101h63v4H95z"
-                        />
-                      </g>
-                      <g
-                        fill="#fff"
-                        stroke="currentColor"
-                        strokeWidth="3"
-                      >
-                        <path
-                          d="M25 32h51v71H25z"
-                        />
-                        <path
-                          d="M57 70H44l-10 7v25h33V77z"
-                        />
-                        <ellipse
-                          cx="9"
-                          cy="9"
-                          rx="9"
-                          ry="9"
-                          transform="translate(41 46)"
-                        />
-                      </g>
-                    </svg>
-                  </div>
+                      <path
+                        d="M95 30h63v4H95z"
+                      />
+                      <path
+                        d="M95 48h63v4H95z"
+                      />
+                      <path
+                        d="M95 66h63v4H95z"
+                      />
+                      <path
+                        d="M95 83h63v4H95z"
+                      />
+                      <path
+                        d="M95 101h63v4H95z"
+                      />
+                    </g>
+                    <g
+                      fill="#fff"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                    >
+                      <path
+                        d="M25 32h51v71H25z"
+                      />
+                      <path
+                        d="M57 70H44l-10 7v25h33V77z"
+                      />
+                      <ellipse
+                        cx="9"
+                        cy="9"
+                        rx="9"
+                        ry="9"
+                        transform="translate(41 46)"
+                      />
+                    </g>
+                  </svg>
                 </div>
               </div>
             </div>
-            <div
-              className="br br-t200"
+          </div>
+          <div
+            className="br br-t200"
+            style={
+              Object {
+                "position": "relative",
+              }
+            }
+          >
+            <button
+              className="btn btn--w btn--b  emotion-5"
+              onClick={[Function]}
               style={
                 Object {
-                  "position": "relative",
+                  "width": "100%",
                 }
               }
+              type="button"
             >
-              <button
-                className="btn btn--w btn--b  emotion-5"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": "100%",
-                  }
-                }
-                type="button"
-              >
-                Upload front of ID
-              </button>
-            </div>
+              Upload front of ID
+            </button>
           </div>
         </div>
+      </div>
+      <div
+        className="g--6 m-v500"
+      >
         <div
-          className="g--6 m-v500"
+          className="br br-a200 emotion-6"
         >
           <div
-            className="br br-a200 emotion-6"
+            className="emotion-4"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDragEnter={[Function]}
+            onDragLeave={[Function]}
+            onDragOver={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            tabIndex={0}
           >
-            <div
-              className="emotion-4"
-              onBlur={[Function]}
+            <input
+              accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
+              autoComplete="off"
+              multiple={false}
+              onChange={[Function]}
               onClick={[Function]}
-              onDragEnter={[Function]}
-              onDragLeave={[Function]}
-              onDragOver={[Function]}
-              onDragStart={[Function]}
-              onDrop={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              tabIndex={0}
+              style={
+                Object {
+                  "display": "none",
+                }
+              }
+              tabIndex={-1}
+              type="file"
+            />
+            <div
+              className="emotion-3"
             >
-              <input
-                accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-                autoComplete="off"
-                multiple={false}
-                onChange={[Function]}
-                onClick={[Function]}
+              <div
                 style={
                   Object {
-                    "display": "none",
+                    "visibility": "visible",
                   }
                 }
-                tabIndex={-1}
-                type="file"
-              />
-              <div
-                className="emotion-3"
               >
                 <div
-                  style={
-                    Object {
-                      "visibility": "visible",
-                    }
-                  }
+                  className="id emotion-2"
                 >
-                  <div
-                    className="id emotion-2"
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 181 134"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      aria-hidden="true"
-                      focusable="false"
-                      viewBox="0 0 181 134"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <path
+                      d="M2 2h176v130H2z"
+                      fill="#fff"
+                    />
+                    <g
+                      fill="currentColor"
                     >
                       <path
-                        d="M2 2h176v130H2z"
-                        fill="#fff"
+                        d="M181 134H0V0h181zM4 130h172V4H4z"
                       />
-                      <g
-                        fill="currentColor"
-                      >
-                        <path
-                          d="M181 134H0V0h181zM4 130h172V4H4z"
-                        />
-                        <path
-                          d="M2 21h176v25H2z"
-                        />
-                        <path
-                          d="M16 69h5v41h-5z"
-                        />
-                        <path
-                          d="M51 69h5v41h-5z"
-                        />
-                        <path
-                          d="M70 69h5v41h-5z"
-                        />
-                        <path
-                          d="M38 69h5v41h-5z"
-                        />
-                        <path
-                          d="M23 69h2v41h-2z"
-                        />
-                        <path
-                          d="M28 69h2v41h-2z"
-                        />
-                        <path
-                          d="M45 69h2v41h-2z"
-                        />
-                        <path
-                          d="M65 69h2v41h-2z"
-                        />
-                        <path
-                          d="M58 69h2v41h-2z"
-                        />
-                        <path
-                          d="M36 69h2v41h-2z"
-                        />
-                      </g>
-                      <g
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="3"
-                      >
-                        <path
-                          d="M93 71h70"
-                        />
-                        <path
-                          d="M93 83h70"
-                        />
-                        <path
-                          d="M93 94h70"
-                        />
-                        <path
-                          d="M93 105h70"
-                        />
-                      </g>
-                    </svg>
-                  </div>
+                      <path
+                        d="M2 21h176v25H2z"
+                      />
+                      <path
+                        d="M16 69h5v41h-5z"
+                      />
+                      <path
+                        d="M51 69h5v41h-5z"
+                      />
+                      <path
+                        d="M70 69h5v41h-5z"
+                      />
+                      <path
+                        d="M38 69h5v41h-5z"
+                      />
+                      <path
+                        d="M23 69h2v41h-2z"
+                      />
+                      <path
+                        d="M28 69h2v41h-2z"
+                      />
+                      <path
+                        d="M45 69h2v41h-2z"
+                      />
+                      <path
+                        d="M65 69h2v41h-2z"
+                      />
+                      <path
+                        d="M58 69h2v41h-2z"
+                      />
+                      <path
+                        d="M36 69h2v41h-2z"
+                      />
+                    </g>
+                    <g
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                    >
+                      <path
+                        d="M93 71h70"
+                      />
+                      <path
+                        d="M93 83h70"
+                      />
+                      <path
+                        d="M93 94h70"
+                      />
+                      <path
+                        d="M93 105h70"
+                      />
+                    </g>
+                  </svg>
                 </div>
               </div>
             </div>
-            <div
-              className="br br-t200"
+          </div>
+          <div
+            className="br br-t200"
+            style={
+              Object {
+                "position": "relative",
+              }
+            }
+          >
+            <button
+              className="btn btn--w btn--b  emotion-5"
+              onClick={[Function]}
               style={
                 Object {
-                  "position": "relative",
+                  "width": "100%",
                 }
               }
+              type="button"
             >
-              <button
-                className="btn btn--w btn--b  emotion-5"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "width": "100%",
-                  }
-                }
-                type="button"
-              >
-                Upload back of ID
-              </button>
-            </div>
+              Upload back of ID
+            </button>
           </div>
         </div>
       </div>
-      <fieldset
-        className=" emotion-16"
+    </div>
+    <fieldset
+      className=" emotion-16"
+    >
+      <legend>
+        <h3
+          className="secondary m-t700 emotion-0"
+          style={
+            Object {
+              "borderBottom": 0,
+            }
+          }
+        >
+          Have you had a legal name change or do you have court guardianship?
+        </h3>
+      </legend>
+      <div
+        onClick={[Function]}
       >
-        <legend>
-          <h3
-            className="secondary m-t700 emotion-0"
+        <div
+          className="m-b300"
+        >
+          <input
+            accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
+            className="emotion-13"
+            id="uploadSupportingDocuments"
+            multiple={true}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            type="file"
+          />
+          <label
+            className="btn btn--sm btn--200 emotion-14"
+            htmlFor="uploadSupportingDocuments"
+            onClick={[Function]}
             style={
               Object {
-                "borderBottom": 0,
+                "fontWeight": "bold",
+                "whiteSpace": "nowrap",
               }
             }
           >
-            Have you had a legal name change or do you have court guardianship?
-          </h3>
-        </legend>
-        <div
-          onClick={[Function]}
-        >
+            Upload Supporting Documents
+          </label>
           <div
-            className="m-b300"
+            className="t--subinfo m-v200"
           >
-            <input
-              accept="image/jpeg,image/png,image/tiff,image/bmp,application/pdf"
-              className="emotion-13"
-              id="uploadSupportingDocuments"
-              multiple={true}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="file"
-            />
-            <label
-              className="btn btn--sm btn--200 emotion-14"
-              htmlFor="uploadSupportingDocuments"
-              onClick={[Function]}
-              style={
-                Object {
-                  "fontWeight": "bold",
-                  "whiteSpace": "nowrap",
-                }
-              }
-            >
-              Upload Supporting Documents
-            </label>
-            <div
-              className="t--subinfo m-v200"
-            >
-              Files should be PDF format, and under 10MB each.
-            </div>
-            <ul
-              className="t--s400 emotion-15"
-            />
+            Files should be PDF format, and under 10MB each.
           </div>
+          <ul
+            className="t--s400 emotion-15"
+          />
         </div>
-      </fieldset>
-      <h2
-        className="secondary m-t700 emotion-0"
-      >
-        No ID?
-      </h2>
-      <p
-        className="m-b700 lh--400 t--s400 m-b500"
+      </div>
+    </fieldset>
+    <h2
+      className="secondary m-t700 emotion-0"
+    >
+      No ID?
+    </h2>
+    <p
+      className="m-b700 lh--400 t--s400 m-b500"
+    >
+      We can help explain your options.
+       
+      <a
+        href="mailto:registry@boston.gov?subject=Marriage%20Certificate%20Support%20Request%3A%20No%20ID"
+        onClick={[Function]}
+        onMouseUp={[Function]}
       >
-        We can help explain your options.
-         
-        <a
-          href="mailto:registry@boston.gov?subject=Marriage%20Certificate%20Support%20Request%3A%20No%20ID"
-          onClick={[Function]}
-          onMouseUp={[Function]}
+        Request help 
+        <span
+          aria-hidden="true"
         >
-          Request help 
-          <span
-            aria-hidden="true"
-          >
-            →
-          </span>
-        </a>
-      </p>
-    </div>
+          →
+        </span>
+      </a>
+    </p>
+  </div>
+  <div
+    className="g g--mr emotion-20"
+  >
     <div
-      className="g g--mr emotion-20"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-19"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-19"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Review request
-        </button>
-      </div>
+        Review request
+      </button>
     </div>
   </div>
 </div>
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 1. Who is this for? 1`] = `
-.emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-3 progress {
-  margin: 1rem 0 0.25rem;
-  width: 100%;
-  height: 1rem;
-  border: 2px solid #091f2f;
-  background-color: #fff;
-}
-
-.emotion-3 progress::-webkit-progress-bar {
-  background-color: #fff;
-}
-
-.emotion-3 progress::-webkit-progress-value {
-  -webkit-transition: width 0.5s;
-  transition: width 0.5s;
-  background-color: #288be4;
-}
-
-.emotion-3 progress::-moz-progress-bar {
-  background-color: #288be4;
-}
-
-.emotion-3 progress::-ms-fill {
-  background-color: #288be4;
-}
-
-.emotion-3 span {
-  font-style: italic;
-}
-
-.emotion-13 fieldset + fieldset {
-  margin-top: 2rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-13 fieldset + fieldset {
-    margin-top: 4rem;
-  }
-
-  .emotion-13 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-12 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.emotion-12 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
-
-.emotion-12 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
-}
-
-.emotion-4 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-4.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
-}
-
-.emotion-4.secondary em {
-  font-size: 1rem;
-}
-
-.emotion-11 {
-  margin: 2rem 0 3rem;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-11 {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-align-items: baseline;
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-    margin-bottom: 0;
-  }
-}
-
-@media screen and (min-width:840px) {
-  .emotion-11 > * {
-    margin: 1rem;
-  }
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  margin-bottom: 2rem;
-  color: #091f2f;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-6 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-  }
-}
-
-.emotion-6 input {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-6 input:focus + span {
-  outline: 4px solid #288be4;
-  outline-offset: 1px;
-}
-
-.emotion-6 svg {
-  -webkit-flex-basis: 20%;
-  -ms-flex-preferred-size: 20%;
-  flex-basis: 20%;
-}
-
-@media screen and (max-width:768px) {
-  .emotion-6 svg {
-    height: 100%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .emotion-6 svg {
-    -webkit-flex-basis: auto;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
-  }
-}
-
-.emotion-6 span {
-  margin-left: 1rem;
-  padding: 0.8rem 1.5rem;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  text-transform: uppercase;
-  border: 4px solid #091f2f;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-6 span {
-    margin-top: 1.75rem;
-    margin-left: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-    white-space: nowrap;
-  }
-}
-
-.emotion-6.selected span {
-  background-color: #e0e0e0;
-}
-
-.emotion-6.inactive {
-  opacity: 0.25;
-}
-
-.emotion-5 {
-  width: 100px;
-  fill: #fff;
-  stroke: currentColor;
-  stroke-miterlimit: 10;
-  stroke-width: 3;
-}
-
-.emotion-5.forOther {
-  width: 140px;
-}
-
-.emotion-5.spouse ellipse {
-  fill: none;
-  stroke: #fff;
-  stroke-width: 8;
-}
-
-.emotion-5.spouse line {
-  stroke-linecap: round;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-5.spouse {
-    height: 90px;
-  }
-}
-
-.emotion-5.child {
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-
-.emotion-5.heavier {
-  stroke-width: 3.5;
-}
-
-.emotion-14 {
-  text-align: center;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-14 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-14 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-14 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-14 .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
-  }
-}
-
-<div>
+Array [
   <a
     className="btn a11y--h a11y--f"
     href="#content-start"
@@ -74767,14 +74536,14 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1. Who is this for? 1`] = `
     tabIndex={1}
   >
     Jump to content
-  </a>
+  </a>,
   <input
     aria-label="Open Boston.gov menu"
     className="brg-tr"
     id="brg-tr"
     onKeyDown={[Function]}
     type="checkbox"
-  />
+  />,
   <nav
     aria-label="Boston.gov menu"
     className="nv-m"
@@ -74819,8 +74588,295 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1. Who is this for? 1`] = `
 ",
       }
     }
-  />
-  <div
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-3 progress {
+  margin: 1rem 0 0.25rem;
+  width: 100%;
+  height: 1rem;
+  border: 2px solid #091f2f;
+  background-color: #fff;
+}
+
+.emotion-3 progress::-webkit-progress-bar {
+  background-color: #fff;
+}
+
+.emotion-3 progress::-webkit-progress-value {
+  -webkit-transition: width 0.5s;
+  transition: width 0.5s;
+  background-color: #288be4;
+}
+
+.emotion-3 progress::-moz-progress-bar {
+  background-color: #288be4;
+}
+
+.emotion-3 progress::-ms-fill {
+  background-color: #288be4;
+}
+
+.emotion-3 span {
+  font-style: italic;
+}
+
+.emotion-13 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-13 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-13 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-12 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-12 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-12 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-11 {
+  margin: 2rem 0 3rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: baseline;
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    align-items: baseline;
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (min-width:840px) {
+  .emotion-11 > * {
+    margin: 1rem;
+  }
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 2rem;
+  color: #091f2f;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
+.emotion-6 input {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-6 input:focus + span {
+  outline: 4px solid #288be4;
+  outline-offset: 1px;
+}
+
+.emotion-6 svg {
+  -webkit-flex-basis: 20%;
+  -ms-flex-preferred-size: 20%;
+  flex-basis: 20%;
+}
+
+@media screen and (max-width:768px) {
+  .emotion-6 svg {
+    height: 100%;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 svg {
+    -webkit-flex-basis: auto;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+  }
+}
+
+.emotion-6 span {
+  margin-left: 1rem;
+  padding: 0.8rem 1.5rem;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  border: 4px solid #091f2f;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 span {
+    margin-top: 1.75rem;
+    margin-left: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex-grow: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    white-space: nowrap;
+  }
+}
+
+.emotion-6.selected span {
+  background-color: #e0e0e0;
+}
+
+.emotion-6.inactive {
+  opacity: 0.25;
+}
+
+.emotion-5 {
+  width: 100px;
+  fill: #fff;
+  stroke: currentColor;
+  stroke-miterlimit: 10;
+  stroke-width: 3;
+}
+
+.emotion-5.forOther {
+  width: 140px;
+}
+
+.emotion-5.spouse ellipse {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 8;
+}
+
+.emotion-5.spouse line {
+  stroke-linecap: round;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-5.spouse {
+    height: 90px;
+  }
+}
+
+.emotion-5.child {
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.emotion-5.heavier {
+  stroke-width: 3.5;
+}
+
+.emotion-14 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-14 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-14 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-14 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-14 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+<div
     className="mn--full-ie"
   >
     <div
@@ -75209,7 +75265,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1. Who is this for? 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -75256,12 +75312,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1. Who is this for? 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 1a. Client instructions 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -75375,73 +75497,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1a. Client instructions 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -75754,7 +75810,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1a. Client instructions 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -75801,12 +75857,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 1a. Client instructions 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 2. Filed in Boston? 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -76099,73 +76221,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 2. Filed in Boston? 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -76576,7 +76632,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 2. Filed in Boston? 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -76623,12 +76679,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 2. Filed in Boston? 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 3. Date of marriage? 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -76902,73 +77024,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 3. Date of marriage? 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -77334,7 +77390,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 3. Date of marriage? 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -77381,12 +77437,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 3. Date of marriage? 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 4. Person on record (1) 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -77747,73 +77869,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 4. Person on record (1) 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -78375,7 +78431,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 4. Person on record (1) 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -78422,12 +78478,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 4. Person on record (1) 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 5. Person on record (2) 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -78788,73 +78910,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 5. Person on record (2) 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -79416,7 +79472,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 5. Person on record (2) 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -79463,12 +79519,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 5. Person on record (2) 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/QuestionsFlowPage 6. Identity verification 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -79681,73 +79803,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 6. Identity verification 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -80427,7 +80483,7 @@ exports[`Storyshots Marriage/QuestionsFlowPage 6. Identity verification 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -80474,12 +80530,78 @@ exports[`Storyshots Marriage/QuestionsFlowPage 6. Identity verification 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;
 
 exports[`Storyshots Marriage/ReviewRequestPage default page 1`] = `
-.emotion-1 {
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -80701,73 +80823,7 @@ exports[`Storyshots Marriage/ReviewRequestPage default page 1`] = `
   }
 }
 
-<div>
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />
-  <div
+<div
     className="mn--full-ie"
   >
     <div
@@ -81319,7 +81375,7 @@ exports[`Storyshots Marriage/ReviewRequestPage default page 1`] = `
         </div>
       </main>
     </div>
-  </div>
+  </div>,
   <footer
     className="ft"
     dangerouslySetInnerHTML={
@@ -81366,6 +81422,6 @@ exports[`Storyshots Marriage/ReviewRequestPage default page 1`] = `
         "zIndex": 2,
       }
     }
-  />
-</div>
+  />,
+]
 `;

From cf61a0e2d11f8c64da1b3212256007c99e05d878 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Sun, 28 Jan 2024 15:10:16 -0500
Subject: [PATCH 05/28] DIG-3953: Add Missing Storybook file For Marriage
 Intention Form Pages

---
 .../__snapshots__/Storyshots.test.ts.snap     | 14867 ++++++++++++++++
 .../QuestionComponent.stories.tsx             |     4 +-
 .../YesNoUnsureComponent.stories.tsx          |     4 +-
 .../YesNoUnsureComponent.tsx                  |     6 +-
 .../forms/FormPages.stories.tsx               |   123 +
 .../marriageintention/forms/Nav.stories.tsx   |   147 +
 .../marriageintention/forms/inputData.tsx     |   104 +-
 .../marriageintention/forms/partnerView.tsx   |    17 +-
 .../marriageintention/forms/reviewForms.tsx   |   114 +-
 .../forms/reviewUI/contact.tsx                |    63 +
 .../forms/reviewUI/header.tsx                 |    26 +
 .../marriageintention/helpers/formUtils.ts    |    85 +
 .../client/marriageintention/index.tsx        |    13 +-
 services-js/registry-certs/client/types.ts    |    14 +-
 services-js/registry-certs/pages/_app.tsx     |     2 +
 15 files changed, 15408 insertions(+), 181 deletions(-)
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/Nav.stories.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/helpers/formUtils.ts

diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index e68d00722..7dfa00b8f 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -62940,6 +62940,14873 @@ marriage@boston.gov.
 </pre>
 `;
 
+exports[`Storyshots Marriage Intention/Form Pages Step 1. Instructions 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-5 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-5 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-5 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-6 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-6 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-6 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-6 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-6 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed:hover,
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.completed .current,
+.emotion-3 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted,
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+.emotion-7 {
+  padding: 0px;
+}
+
+.emotion-4 h1 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 2rem;
+  font-style: normal;
+  color: #091f2f;
+}
+
+.emotion-4 h2 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  border-bottom: 4px solid #091f2f;
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-style: normal;
+  color: #091f2f;
+}
+
+.emotion-4 .getting-started {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.emotion-4 .getting-started .emphasis {
+  font-style: bold;
+  font-weight: 700;
+}
+
+.emotion-4 .getting-started ul {
+  margin-bottom: 1rem;
+}
+
+.emotion-4 .getting-started ul li {
+  list-style: initial;
+  margin: 0.25rem 0 0.25rem 1.75rem;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 1 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Getting Started
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-7"
+            >
+              <div
+                className="emotion-5"
+              >
+                <div
+                  className="emotion-4"
+                >
+                  <h1>
+                    Before You Get Started
+                  </h1>
+                  <div
+                    className="getting-started"
+                  >
+                    <p>
+                      <span
+                        className="emphasis"
+                      >
+                        The information you provide in this application will help us complete the marriage intention form, which is a legal document that is important for the marriage license.
+                      </span>
+                       
+                      During your appointment, we will review and finalize the information you share here and make sure everything's set before it is printed onto your marriage intention form.
+                    </p>
+                    <p>
+                      It should take about 
+                      <span
+                        className="emphasis"
+                      >
+                        15 minutes
+                      </span>
+                       
+                      to finish this application if you have all the information below. We recommend that you and your partner fill this out together.
+                    </p>
+                  </div>
+                  <h2>
+                    What We Need From You and Your Partner
+                  </h2>
+                  <div
+                    className="getting-started"
+                  >
+                    <ul>
+                      <li>
+                        Legal names and last names you'll use after marriage
+                      </li>
+                      <li>
+                        Birthdates and birthplaces
+                      </li>
+                      <li>
+                        Residential addresses
+                      </li>
+                      <li>
+                        If you've been married before, how many times and the status of your last marriage
+                      </li>
+                      <li>
+                        If you've been in a civil union or domestic partnership before, its location and status
+                      </li>
+                      <li>
+                        Parents' names (including their family names) and whether they were married when you were born
+                      </li>
+                    </ul>
+                  </div>
+                  <h2>
+                    Documents That Might Be Helpful
+                  </h2>
+                  <div
+                    className="getting-started"
+                  >
+                    <ul>
+                      <li>
+                        A government-issued ID
+                      </li>
+                      <li>
+                        A birth certificate
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="g g--mr emotion-6"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                />
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    START
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-51 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-51 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-51 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-50 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-50 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-50 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-53 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-53 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-53 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-53 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-53 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-52 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-12 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-11 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-11 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-11 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-11 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-11 input::-ms-clear {
+  display: none;
+}
+
+.emotion-11 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-11.disabled {
+  opacity: 0.4;
+}
+
+.emotion-11.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed:hover,
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.completed .current,
+.emotion-3 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted,
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+.emotion-54 {
+  padding: 0px;
+}
+
+.emotion-9 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-9 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-9 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-9 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-9 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-9 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-7 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-7 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-7 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-7 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-7 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-7 .sel-c {
+  display: block;
+}
+
+.emotion-16 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-13 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-13 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-13 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-13 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-13 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-19 {
+  margin-top: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-19 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-19 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-19 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-19 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-19 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-29 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-29 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-29 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-29 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-29 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-29 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-29 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-29 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-28 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-top: 1em;
+}
+
+.emotion-28 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-28 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-28 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-32 {
+  margin-top: 1em;
+  padding-bottom: 2em;
+}
+
+.emotion-35 {
+  margin-bottom: 2.5em;
+}
+
+.emotion-35 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-35 h4 {
+  font-size: 1.25rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-35 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-35 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-35 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-35 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-35 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-35 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-35 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-41 {
+  margin-bottom: 1.5em;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 2 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Person 1
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-54"
+            >
+              <div
+                className="emotion-51"
+              >
+                <fieldset
+                  className=" emotion-50"
+                >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Person 
+                      A
+                    </h2>
+                  </legend>
+                  <div
+                    className="emotion-9"
+                  >
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2048906072"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          First Name
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2048906072"
+                        maxLength={100}
+                        name="partnerA_firstName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2852212527"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Middle Name
+                        </span>
+                      </label>
+                      <label
+                        className="notice emotion-5"
+                      >
+                        This is your current middle name if you have one. You may not list a new middle name.
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2852212527"
+                        maxLength={50}
+                        name="partnerA_middleName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-1103291528"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Last Name
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-1103291528"
+                        maxLength={100}
+                        name="partnerA_lastName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-7"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-1333361069"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Last Name / SURNAME to be used after marriage
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-1333361069"
+                          maxLength={50}
+                          name="partnerA_surName"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-7"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-2202529938"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Suffix
+                          </span>
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-2202529938"
+                            name="partnerA_suffix"
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="N/A"
+                            >
+                              Does Not Apply
+                            </option>
+                            <option
+                              value="I"
+                            >
+                              I
+                            </option>
+                            <option
+                              value="II"
+                            >
+                              II
+                            </option>
+                            <option
+                              value="III"
+                            >
+                              III
+                            </option>
+                            <option
+                              value="IV"
+                            >
+                              IV
+                            </option>
+                            <option
+                              value="V"
+                            >
+                              V
+                            </option>
+                            <option
+                              value="VI"
+                            >
+                              VI
+                            </option>
+                            <option
+                              value="Jr."
+                            >
+                              Jr.
+                            </option>
+                            <option
+                              value="Sr."
+                            >
+                              Sr.
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2786084594"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Occupation
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2786084594"
+                        maxLength={100}
+                        name="partnerA_occupation"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-13"
+                    >
+                      <h2
+                        className="emotion-4"
+                        style={
+                          Object {
+                            "marginBottom": "1.5rem",
+                          }
+                        }
+                      >
+                        Date of Birth
+                      </h2>
+                      <fieldset
+                        className="emotion-12"
+                      >
+                        <div>
+                          <legend
+                            style={
+                              Object {
+                                "display": "none",
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            Person A Date of Birth
+                          </legend>
+                          <div
+                            className=" emotion-11"
+                          >
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="dob-month"
+                              >
+                                Month
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="dob-month"
+                                max="12"
+                                maxLength={2}
+                                min="1"
+                                name="month"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="MM"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="dob-day"
+                              >
+                                Day
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="dob-day"
+                                max="31"
+                                maxLength={2}
+                                min="1"
+                                name="day"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="DD"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="dob-year"
+                              >
+                                Year
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="dob-year"
+                                max={2024}
+                                maxLength={4}
+                                min="1000"
+                                name="year"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="YYYY"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </fieldset>
+                    </div>
+                    <div
+                      className="emotion-13"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-193405638"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Age
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          Your age will be automatically calculated based on your date of birth.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          disabled={true}
+                          id="input-193405638"
+                          maxLength={2}
+                          name="partnerA_age"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-19"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Birthplace
+                      </h2>
+                      <div
+                        className="emotion-7"
+                      >
+                        <div>
+                          <label
+                            className="txt-l "
+                            htmlFor="select-1817836307"
+                            style={Object {}}
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              Birthplace Country
+                            </span>
+                          </label>
+                          <div
+                            className="sel-c  "
+                          >
+                            <select
+                              aria-label=""
+                              className="sel-f  "
+                              id="select-1817836307"
+                              name="partnerA_birthCountry"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              value=""
+                            >
+                              <option />
+                              <option
+                                value="USA"
+                              >
+                                United States of America
+                              </option>
+                              <option
+                                value="VIR"
+                              >
+                                United States Virgin Islands
+                              </option>
+                              <option
+                                value="AFG"
+                              >
+                                Afghanistan
+                              </option>
+                              <option
+                                value="ALA"
+                              >
+                                Åland Islands
+                              </option>
+                              <option
+                                value="ALB"
+                              >
+                                Albania
+                              </option>
+                              <option
+                                value="DZA"
+                              >
+                                Algeria
+                              </option>
+                              <option
+                                value="ASM"
+                              >
+                                American Samoa
+                              </option>
+                              <option
+                                value="AND"
+                              >
+                                Andorra
+                              </option>
+                              <option
+                                value="AGO"
+                              >
+                                Angola
+                              </option>
+                              <option
+                                value="AIA"
+                              >
+                                Anguilla
+                              </option>
+                              <option
+                                value="ATG"
+                              >
+                                Antigua and Barbuda
+                              </option>
+                              <option
+                                value="ARG"
+                              >
+                                Argentina
+                              </option>
+                              <option
+                                value="ARM"
+                              >
+                                Armenia
+                              </option>
+                              <option
+                                value="ABW"
+                              >
+                                Aruba
+                              </option>
+                              <option
+                                value="AUS"
+                              >
+                                Australia
+                              </option>
+                              <option
+                                value="AUT"
+                              >
+                                Austria
+                              </option>
+                              <option
+                                value="AZE"
+                              >
+                                Azerbaijan
+                              </option>
+                              <option
+                                value="BHS"
+                              >
+                                Bahamas
+                              </option>
+                              <option
+                                value="BHR"
+                              >
+                                Bahrain
+                              </option>
+                              <option
+                                value="BGD"
+                              >
+                                Bangladesh
+                              </option>
+                              <option
+                                value="BRB"
+                              >
+                                Barbados
+                              </option>
+                              <option
+                                value="BLR"
+                              >
+                                Belarus
+                              </option>
+                              <option
+                                value="BEL"
+                              >
+                                Belgium
+                              </option>
+                              <option
+                                value="BLZ"
+                              >
+                                Belize
+                              </option>
+                              <option
+                                value="BEN"
+                              >
+                                Benin
+                              </option>
+                              <option
+                                value="BMU"
+                              >
+                                Bermuda
+                              </option>
+                              <option
+                                value="BTN"
+                              >
+                                Bhutan
+                              </option>
+                              <option
+                                value="BOL"
+                              >
+                                Bolivia (Plurinational State of)
+                              </option>
+                              <option
+                                value="BES"
+                              >
+                                Bonaire, Saint Eustatius and Saba
+                              </option>
+                              <option
+                                value="BIH"
+                              >
+                                Bosnia and Herzegovina
+                              </option>
+                              <option
+                                value="BWA"
+                              >
+                                Botswana
+                              </option>
+                              <option
+                                value="BRA"
+                              >
+                                Brazil
+                              </option>
+                              <option
+                                value="VGB"
+                              >
+                                British Virgin Islands
+                              </option>
+                              <option
+                                value="BRN"
+                              >
+                                Brunei Darussalam
+                              </option>
+                              <option
+                                value="BGR"
+                              >
+                                Bulgaria
+                              </option>
+                              <option
+                                value="BFA"
+                              >
+                                Burkina Faso
+                              </option>
+                              <option
+                                value="BDI"
+                              >
+                                Burundi
+                              </option>
+                              <option
+                                value="CPV"
+                              >
+                                Cabo Verde
+                              </option>
+                              <option
+                                value="KHM"
+                              >
+                                Cambodia
+                              </option>
+                              <option
+                                value="CMR"
+                              >
+                                Cameroon
+                              </option>
+                              <option
+                                value="CAN"
+                              >
+                                Canada
+                              </option>
+                              <option
+                                value="CYM"
+                              >
+                                Cayman Islands
+                              </option>
+                              <option
+                                value="CAF"
+                              >
+                                Central African Republic
+                              </option>
+                              <option
+                                value="TCD"
+                              >
+                                Chad
+                              </option>
+                              <option
+                                value="CHL"
+                              >
+                                Chile
+                              </option>
+                              <option
+                                value="CHN"
+                              >
+                                China
+                              </option>
+                              <option
+                                value="HKG"
+                              >
+                                China, Hong Kong Special Administrative Region
+                              </option>
+                              <option
+                                value="MAC"
+                              >
+                                China, Macao Special Administrative Region
+                              </option>
+                              <option
+                                value="COL"
+                              >
+                                Colombia
+                              </option>
+                              <option
+                                value="COM"
+                              >
+                                Comoros
+                              </option>
+                              <option
+                                value="COG"
+                              >
+                                Congo
+                              </option>
+                              <option
+                                value="COK"
+                              >
+                                Cook Islands
+                              </option>
+                              <option
+                                value="CRI"
+                              >
+                                Costa Rica
+                              </option>
+                              <option
+                                value="CIV"
+                              >
+                                Côte d'Ivoire
+                              </option>
+                              <option
+                                value="HRV"
+                              >
+                                Croatia
+                              </option>
+                              <option
+                                value="CUB"
+                              >
+                                Cuba
+                              </option>
+                              <option
+                                value="CUW"
+                              >
+                                Curaçao
+                              </option>
+                              <option
+                                value="CYP"
+                              >
+                                Cyprus
+                              </option>
+                              <option
+                                value="CZE"
+                              >
+                                Czech Republic
+                              </option>
+                              <option
+                                value="PRK"
+                              >
+                                Democratic People's Republic of Korea
+                              </option>
+                              <option
+                                value="COD"
+                              >
+                                Democratic Republic of the Congo
+                              </option>
+                              <option
+                                value="DNK"
+                              >
+                                Denmark
+                              </option>
+                              <option
+                                value="DJI"
+                              >
+                                Djibouti
+                              </option>
+                              <option
+                                value="DMA"
+                              >
+                                Dominica
+                              </option>
+                              <option
+                                value="DOM"
+                              >
+                                Dominican Republic
+                              </option>
+                              <option
+                                value="ECU"
+                              >
+                                Ecuador
+                              </option>
+                              <option
+                                value="EGY"
+                              >
+                                Egypt
+                              </option>
+                              <option
+                                value="SLV"
+                              >
+                                El Salvador
+                              </option>
+                              <option
+                                value="GNQ"
+                              >
+                                Equatorial Guinea
+                              </option>
+                              <option
+                                value="ERI"
+                              >
+                                Eritrea
+                              </option>
+                              <option
+                                value="EST"
+                              >
+                                Estonia
+                              </option>
+                              <option
+                                value="ETH"
+                              >
+                                Ethiopia
+                              </option>
+                              <option
+                                value="FRO"
+                              >
+                                Faeroe Islands
+                              </option>
+                              <option
+                                value="FLK"
+                              >
+                                Falkland Islands (Malvinas)
+                              </option>
+                              <option
+                                value="FJI"
+                              >
+                                Fiji
+                              </option>
+                              <option
+                                value="FIN"
+                              >
+                                Finland
+                              </option>
+                              <option
+                                value="FRA"
+                              >
+                                France
+                              </option>
+                              <option
+                                value="GUF"
+                              >
+                                French Guiana
+                              </option>
+                              <option
+                                value="PYF"
+                              >
+                                French Polynesia
+                              </option>
+                              <option
+                                value="GAB"
+                              >
+                                Gabon
+                              </option>
+                              <option
+                                value="GMB"
+                              >
+                                Gambia
+                              </option>
+                              <option
+                                value="GEO"
+                              >
+                                Georgia
+                              </option>
+                              <option
+                                value="DEU"
+                              >
+                                Germany
+                              </option>
+                              <option
+                                value="GHA"
+                              >
+                                Ghana
+                              </option>
+                              <option
+                                value="GIB"
+                              >
+                                Gibraltar
+                              </option>
+                              <option
+                                value="GRC"
+                              >
+                                Greece
+                              </option>
+                              <option
+                                value="GRL"
+                              >
+                                Greenland
+                              </option>
+                              <option
+                                value="GRD"
+                              >
+                                Grenada
+                              </option>
+                              <option
+                                value="GLP"
+                              >
+                                Guadeloupe
+                              </option>
+                              <option
+                                value="GUM"
+                              >
+                                Guam
+                              </option>
+                              <option
+                                value="GTM"
+                              >
+                                Guatemala
+                              </option>
+                              <option
+                                value="GGY"
+                              >
+                                Guernsey
+                              </option>
+                              <option
+                                value="GIN"
+                              >
+                                Guinea
+                              </option>
+                              <option
+                                value="GNB"
+                              >
+                                Guinea-Bissau
+                              </option>
+                              <option
+                                value="GUY"
+                              >
+                                Guyana
+                              </option>
+                              <option
+                                value="HTI"
+                              >
+                                Haiti
+                              </option>
+                              <option
+                                value="VAT"
+                              >
+                                Holy See
+                              </option>
+                              <option
+                                value="HND"
+                              >
+                                Honduras
+                              </option>
+                              <option
+                                value="HUN"
+                              >
+                                Hungary
+                              </option>
+                              <option
+                                value="ISL"
+                              >
+                                Iceland
+                              </option>
+                              <option
+                                value="IND"
+                              >
+                                India
+                              </option>
+                              <option
+                                value="IDN"
+                              >
+                                Indonesia
+                              </option>
+                              <option
+                                value="IRN"
+                              >
+                                Iran (Islamic Republic of)
+                              </option>
+                              <option
+                                value="IRQ"
+                              >
+                                Iraq
+                              </option>
+                              <option
+                                value="IRL"
+                              >
+                                Ireland
+                              </option>
+                              <option
+                                value="IMN"
+                              >
+                                Isle of Man
+                              </option>
+                              <option
+                                value="ISR"
+                              >
+                                Israel
+                              </option>
+                              <option
+                                value="ITA"
+                              >
+                                Italy
+                              </option>
+                              <option
+                                value="JAM"
+                              >
+                                Jamaica
+                              </option>
+                              <option
+                                value="JPN"
+                              >
+                                Japan
+                              </option>
+                              <option
+                                value="JEY"
+                              >
+                                Jersey
+                              </option>
+                              <option
+                                value="JOR"
+                              >
+                                Jordan
+                              </option>
+                              <option
+                                value="KAZ"
+                              >
+                                Kazakhstan
+                              </option>
+                              <option
+                                value="KEN"
+                              >
+                                Kenya
+                              </option>
+                              <option
+                                value="KIR"
+                              >
+                                Kiribati
+                              </option>
+                              <option
+                                value="KWT"
+                              >
+                                Kuwait
+                              </option>
+                              <option
+                                value="KGZ"
+                              >
+                                Kyrgyzstan
+                              </option>
+                              <option
+                                value="LAO"
+                              >
+                                Lao People's Democratic Republic
+                              </option>
+                              <option
+                                value="LVA"
+                              >
+                                Latvia
+                              </option>
+                              <option
+                                value="LBN"
+                              >
+                                Lebanon
+                              </option>
+                              <option
+                                value="LSO"
+                              >
+                                Lesotho
+                              </option>
+                              <option
+                                value="LBR"
+                              >
+                                Liberia
+                              </option>
+                              <option
+                                value="LBY"
+                              >
+                                Libya
+                              </option>
+                              <option
+                                value="LIE"
+                              >
+                                Liechtenstein
+                              </option>
+                              <option
+                                value="LTU"
+                              >
+                                Lithuania
+                              </option>
+                              <option
+                                value="LUX"
+                              >
+                                Luxembourg
+                              </option>
+                              <option
+                                value="MDG"
+                              >
+                                Madagascar
+                              </option>
+                              <option
+                                value="MWI"
+                              >
+                                Malawi
+                              </option>
+                              <option
+                                value="MYS"
+                              >
+                                Malaysia
+                              </option>
+                              <option
+                                value="MDV"
+                              >
+                                Maldives
+                              </option>
+                              <option
+                                value="MLI"
+                              >
+                                Mali
+                              </option>
+                              <option
+                                value="MLT"
+                              >
+                                Malta
+                              </option>
+                              <option
+                                value="MHL"
+                              >
+                                Marshall Islands
+                              </option>
+                              <option
+                                value="MTQ"
+                              >
+                                Martinique
+                              </option>
+                              <option
+                                value="MRT"
+                              >
+                                Mauritania
+                              </option>
+                              <option
+                                value="MUS"
+                              >
+                                Mauritius
+                              </option>
+                              <option
+                                value="MYT"
+                              >
+                                Mayotte
+                              </option>
+                              <option
+                                value="MEX"
+                              >
+                                Mexico
+                              </option>
+                              <option
+                                value="FSM"
+                              >
+                                Micronesia (Federated States of)
+                              </option>
+                              <option
+                                value="MCO"
+                              >
+                                Monaco
+                              </option>
+                              <option
+                                value="MNG"
+                              >
+                                Mongolia
+                              </option>
+                              <option
+                                value="MNE"
+                              >
+                                Montenegro
+                              </option>
+                              <option
+                                value="MSR"
+                              >
+                                Montserrat
+                              </option>
+                              <option
+                                value="MAR"
+                              >
+                                Morocco
+                              </option>
+                              <option
+                                value="MOZ"
+                              >
+                                Mozambique
+                              </option>
+                              <option
+                                value="MMR"
+                              >
+                                Myanmar
+                              </option>
+                              <option
+                                value="NAM"
+                              >
+                                Namibia
+                              </option>
+                              <option
+                                value="NRU"
+                              >
+                                Nauru
+                              </option>
+                              <option
+                                value="NPL"
+                              >
+                                Nepal
+                              </option>
+                              <option
+                                value="NLD"
+                              >
+                                Netherlands
+                              </option>
+                              <option
+                                value="NCL"
+                              >
+                                New Caledonia
+                              </option>
+                              <option
+                                value="NZL"
+                              >
+                                New Zealand
+                              </option>
+                              <option
+                                value="NIC"
+                              >
+                                Nicaragua
+                              </option>
+                              <option
+                                value="NER"
+                              >
+                                Niger
+                              </option>
+                              <option
+                                value="NGA"
+                              >
+                                Nigeria
+                              </option>
+                              <option
+                                value="NIU"
+                              >
+                                Niue
+                              </option>
+                              <option
+                                value="NFK"
+                              >
+                                Norfolk Island
+                              </option>
+                              <option
+                                value="MNP"
+                              >
+                                Northern Mariana Islands
+                              </option>
+                              <option
+                                value="NOR"
+                              >
+                                Norway
+                              </option>
+                              <option
+                                value="OMN"
+                              >
+                                Oman
+                              </option>
+                              <option
+                                value="PAK"
+                              >
+                                Pakistan
+                              </option>
+                              <option
+                                value="PLW"
+                              >
+                                Palau
+                              </option>
+                              <option
+                                value="PAN"
+                              >
+                                Panama
+                              </option>
+                              <option
+                                value="PNG"
+                              >
+                                Papua New Guinea
+                              </option>
+                              <option
+                                value="PRY"
+                              >
+                                Paraguay
+                              </option>
+                              <option
+                                value="PER"
+                              >
+                                Peru
+                              </option>
+                              <option
+                                value="PHL"
+                              >
+                                Philippines
+                              </option>
+                              <option
+                                value="PCN"
+                              >
+                                Pitcairn
+                              </option>
+                              <option
+                                value="POL"
+                              >
+                                Poland
+                              </option>
+                              <option
+                                value="PRT"
+                              >
+                                Portugal
+                              </option>
+                              <option
+                                value="PRI"
+                              >
+                                Puerto Rico
+                              </option>
+                              <option
+                                value="QAT"
+                              >
+                                Qatar
+                              </option>
+                              <option
+                                value="KOR"
+                              >
+                                Republic of Korea
+                              </option>
+                              <option
+                                value="MDA"
+                              >
+                                Republic of Moldova
+                              </option>
+                              <option
+                                value="REU"
+                              >
+                                Réunion
+                              </option>
+                              <option
+                                value="ROU"
+                              >
+                                Romania
+                              </option>
+                              <option
+                                value="RUS"
+                              >
+                                Russian Federation
+                              </option>
+                              <option
+                                value="RWA"
+                              >
+                                Rwanda
+                              </option>
+                              <option
+                                value="BLM"
+                              >
+                                Saint-Barthélemy
+                              </option>
+                              <option
+                                value="SHN"
+                              >
+                                Saint Helena
+                              </option>
+                              <option
+                                value="KNA"
+                              >
+                                Saint Kitts and Nevis
+                              </option>
+                              <option
+                                value="LCA"
+                              >
+                                Saint Lucia
+                              </option>
+                              <option
+                                value="MAF"
+                              >
+                                Saint-Martin (French part)
+                              </option>
+                              <option
+                                value="SPM"
+                              >
+                                Saint Pierre and Miquelon
+                              </option>
+                              <option
+                                value="VCT"
+                              >
+                                Saint Vincent and the Grenadines
+                              </option>
+                              <option
+                                value="WSM"
+                              >
+                                Samoa
+                              </option>
+                              <option
+                                value="SMR"
+                              >
+                                San Marino
+                              </option>
+                              <option
+                                value="STP"
+                              >
+                                Sao Tome and Principe
+                              </option>
+                              <option
+                                value="SAU"
+                              >
+                                Saudi Arabia
+                              </option>
+                              <option
+                                value="SEN"
+                              >
+                                Senegal
+                              </option>
+                              <option
+                                value="SRB"
+                              >
+                                Serbia
+                              </option>
+                              <option
+                                value="SYC"
+                              >
+                                Seychelles
+                              </option>
+                              <option
+                                value="SLE"
+                              >
+                                Sierra Leone
+                              </option>
+                              <option
+                                value="SGP"
+                              >
+                                Singapore
+                              </option>
+                              <option
+                                value="SXM"
+                              >
+                                Sint Maarten (Dutch part)
+                              </option>
+                              <option
+                                value="SVK"
+                              >
+                                Slovakia
+                              </option>
+                              <option
+                                value="SVN"
+                              >
+                                Slovenia
+                              </option>
+                              <option
+                                value="SLB"
+                              >
+                                Solomon Islands
+                              </option>
+                              <option
+                                value="SOM"
+                              >
+                                Somalia
+                              </option>
+                              <option
+                                value="ZAF"
+                              >
+                                South Africa
+                              </option>
+                              <option
+                                value="SSD"
+                              >
+                                South Sudan
+                              </option>
+                              <option
+                                value="ESP"
+                              >
+                                Spain
+                              </option>
+                              <option
+                                value="LKA"
+                              >
+                                Sri Lanka
+                              </option>
+                              <option
+                                value="PSE"
+                              >
+                                State of Palestine
+                              </option>
+                              <option
+                                value="SDN"
+                              >
+                                Sudan
+                              </option>
+                              <option
+                                value="SUR"
+                              >
+                                Suriname
+                              </option>
+                              <option
+                                value="SJM"
+                              >
+                                Svalbard and Jan Mayen Islands
+                              </option>
+                              <option
+                                value="SWZ"
+                              >
+                                Swaziland
+                              </option>
+                              <option
+                                value="SWE"
+                              >
+                                Sweden
+                              </option>
+                              <option
+                                value="CHE"
+                              >
+                                Switzerland
+                              </option>
+                              <option
+                                value="SYR"
+                              >
+                                Syrian Arab Republic
+                              </option>
+                              <option
+                                value="TWAN"
+                              >
+                                Taiwan
+                              </option>
+                              <option
+                                value="TJK"
+                              >
+                                Tajikistan
+                              </option>
+                              <option
+                                value="THA"
+                              >
+                                Thailand
+                              </option>
+                              <option
+                                value="MKD"
+                              >
+                                The former Yugoslav Republic of Macedonia
+                              </option>
+                              <option
+                                value="TLS"
+                              >
+                                Timor-Leste
+                              </option>
+                              <option
+                                value="TGO"
+                              >
+                                Togo
+                              </option>
+                              <option
+                                value="TKL"
+                              >
+                                Tokelau
+                              </option>
+                              <option
+                                value="TON"
+                              >
+                                Tonga
+                              </option>
+                              <option
+                                value="TTO"
+                              >
+                                Trinidad and Tobago
+                              </option>
+                              <option
+                                value="TUN"
+                              >
+                                Tunisia
+                              </option>
+                              <option
+                                value="TUR"
+                              >
+                                Turkey
+                              </option>
+                              <option
+                                value="TKM"
+                              >
+                                Turkmenistan
+                              </option>
+                              <option
+                                value="TCA"
+                              >
+                                Turks and Caicos Islands
+                              </option>
+                              <option
+                                value="TUV"
+                              >
+                                Tuvalu
+                              </option>
+                              <option
+                                value="UGA"
+                              >
+                                Uganda
+                              </option>
+                              <option
+                                value="UKR"
+                              >
+                                Ukraine
+                              </option>
+                              <option
+                                value="ARE"
+                              >
+                                United Arab Emirates
+                              </option>
+                              <option
+                                value="GBR"
+                              >
+                                United Kingdom of Great Britain and Northern Ireland
+                              </option>
+                              <option
+                                value="TZA"
+                              >
+                                United Republic of Tanzania
+                              </option>
+                              <option
+                                value="URY"
+                              >
+                                Uruguay
+                              </option>
+                              <option
+                                value="UZB"
+                              >
+                                Uzbekistan
+                              </option>
+                              <option
+                                value="VUT"
+                              >
+                                Vanuatu
+                              </option>
+                              <option
+                                value="VEN"
+                              >
+                                Venezuela (Bolivarian Republic of)
+                              </option>
+                              <option
+                                value="VNM"
+                              >
+                                Vietnam
+                              </option>
+                              <option
+                                value="WLF"
+                              >
+                                Wallis and Futuna Islands
+                              </option>
+                              <option
+                                value="ESH"
+                              >
+                                Western Sahara
+                              </option>
+                              <option
+                                value="YEM"
+                              >
+                                Yemen
+                              </option>
+                              <option
+                                value="ZMB"
+                              >
+                                Zambia
+                              </option>
+                              <option
+                                value="ZWE"
+                              >
+                                Zimbabwe
+                              </option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-13"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Residence
+                      </h2>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-7"
+                      >
+                        <div
+                          className="fs-c m-b300"
+                        >
+                          <div
+                            className="sel"
+                          >
+                            <div>
+                              <label
+                                className="txt-l "
+                                htmlFor="select-3550464744"
+                                style={Object {}}
+                              >
+                                <span
+                                  style={
+                                    Object {
+                                      "marginRight": "0.5em",
+                                    }
+                                  }
+                                >
+                                  Select Country of Residence
+                                </span>
+                              </label>
+                              <div
+                                className="sel-c  "
+                              >
+                                <select
+                                  aria-label=""
+                                  className="sel-f  "
+                                  id="select-3550464744"
+                                  name="partnerA_residenceCountry"
+                                  onChange={[Function]}
+                                  value=""
+                                >
+                                  <option />
+                                  <option
+                                    value="USA"
+                                  >
+                                    United States of America
+                                  </option>
+                                  <option
+                                    value="VIR"
+                                  >
+                                    United States Virgin Islands
+                                  </option>
+                                  <option
+                                    value="AFG"
+                                  >
+                                    Afghanistan
+                                  </option>
+                                  <option
+                                    value="ALA"
+                                  >
+                                    Åland Islands
+                                  </option>
+                                  <option
+                                    value="ALB"
+                                  >
+                                    Albania
+                                  </option>
+                                  <option
+                                    value="DZA"
+                                  >
+                                    Algeria
+                                  </option>
+                                  <option
+                                    value="ASM"
+                                  >
+                                    American Samoa
+                                  </option>
+                                  <option
+                                    value="AND"
+                                  >
+                                    Andorra
+                                  </option>
+                                  <option
+                                    value="AGO"
+                                  >
+                                    Angola
+                                  </option>
+                                  <option
+                                    value="AIA"
+                                  >
+                                    Anguilla
+                                  </option>
+                                  <option
+                                    value="ATG"
+                                  >
+                                    Antigua and Barbuda
+                                  </option>
+                                  <option
+                                    value="ARG"
+                                  >
+                                    Argentina
+                                  </option>
+                                  <option
+                                    value="ARM"
+                                  >
+                                    Armenia
+                                  </option>
+                                  <option
+                                    value="ABW"
+                                  >
+                                    Aruba
+                                  </option>
+                                  <option
+                                    value="AUS"
+                                  >
+                                    Australia
+                                  </option>
+                                  <option
+                                    value="AUT"
+                                  >
+                                    Austria
+                                  </option>
+                                  <option
+                                    value="AZE"
+                                  >
+                                    Azerbaijan
+                                  </option>
+                                  <option
+                                    value="BHS"
+                                  >
+                                    Bahamas
+                                  </option>
+                                  <option
+                                    value="BHR"
+                                  >
+                                    Bahrain
+                                  </option>
+                                  <option
+                                    value="BGD"
+                                  >
+                                    Bangladesh
+                                  </option>
+                                  <option
+                                    value="BRB"
+                                  >
+                                    Barbados
+                                  </option>
+                                  <option
+                                    value="BLR"
+                                  >
+                                    Belarus
+                                  </option>
+                                  <option
+                                    value="BEL"
+                                  >
+                                    Belgium
+                                  </option>
+                                  <option
+                                    value="BLZ"
+                                  >
+                                    Belize
+                                  </option>
+                                  <option
+                                    value="BEN"
+                                  >
+                                    Benin
+                                  </option>
+                                  <option
+                                    value="BMU"
+                                  >
+                                    Bermuda
+                                  </option>
+                                  <option
+                                    value="BTN"
+                                  >
+                                    Bhutan
+                                  </option>
+                                  <option
+                                    value="BOL"
+                                  >
+                                    Bolivia (Plurinational State of)
+                                  </option>
+                                  <option
+                                    value="BES"
+                                  >
+                                    Bonaire, Saint Eustatius and Saba
+                                  </option>
+                                  <option
+                                    value="BIH"
+                                  >
+                                    Bosnia and Herzegovina
+                                  </option>
+                                  <option
+                                    value="BWA"
+                                  >
+                                    Botswana
+                                  </option>
+                                  <option
+                                    value="BRA"
+                                  >
+                                    Brazil
+                                  </option>
+                                  <option
+                                    value="VGB"
+                                  >
+                                    British Virgin Islands
+                                  </option>
+                                  <option
+                                    value="BRN"
+                                  >
+                                    Brunei Darussalam
+                                  </option>
+                                  <option
+                                    value="BGR"
+                                  >
+                                    Bulgaria
+                                  </option>
+                                  <option
+                                    value="BFA"
+                                  >
+                                    Burkina Faso
+                                  </option>
+                                  <option
+                                    value="BDI"
+                                  >
+                                    Burundi
+                                  </option>
+                                  <option
+                                    value="CPV"
+                                  >
+                                    Cabo Verde
+                                  </option>
+                                  <option
+                                    value="KHM"
+                                  >
+                                    Cambodia
+                                  </option>
+                                  <option
+                                    value="CMR"
+                                  >
+                                    Cameroon
+                                  </option>
+                                  <option
+                                    value="CAN"
+                                  >
+                                    Canada
+                                  </option>
+                                  <option
+                                    value="CYM"
+                                  >
+                                    Cayman Islands
+                                  </option>
+                                  <option
+                                    value="CAF"
+                                  >
+                                    Central African Republic
+                                  </option>
+                                  <option
+                                    value="TCD"
+                                  >
+                                    Chad
+                                  </option>
+                                  <option
+                                    value="CHL"
+                                  >
+                                    Chile
+                                  </option>
+                                  <option
+                                    value="CHN"
+                                  >
+                                    China
+                                  </option>
+                                  <option
+                                    value="HKG"
+                                  >
+                                    China, Hong Kong Special Administrative Region
+                                  </option>
+                                  <option
+                                    value="MAC"
+                                  >
+                                    China, Macao Special Administrative Region
+                                  </option>
+                                  <option
+                                    value="COL"
+                                  >
+                                    Colombia
+                                  </option>
+                                  <option
+                                    value="COM"
+                                  >
+                                    Comoros
+                                  </option>
+                                  <option
+                                    value="COG"
+                                  >
+                                    Congo
+                                  </option>
+                                  <option
+                                    value="COK"
+                                  >
+                                    Cook Islands
+                                  </option>
+                                  <option
+                                    value="CRI"
+                                  >
+                                    Costa Rica
+                                  </option>
+                                  <option
+                                    value="CIV"
+                                  >
+                                    Côte d'Ivoire
+                                  </option>
+                                  <option
+                                    value="HRV"
+                                  >
+                                    Croatia
+                                  </option>
+                                  <option
+                                    value="CUB"
+                                  >
+                                    Cuba
+                                  </option>
+                                  <option
+                                    value="CUW"
+                                  >
+                                    Curaçao
+                                  </option>
+                                  <option
+                                    value="CYP"
+                                  >
+                                    Cyprus
+                                  </option>
+                                  <option
+                                    value="CZE"
+                                  >
+                                    Czech Republic
+                                  </option>
+                                  <option
+                                    value="PRK"
+                                  >
+                                    Democratic People's Republic of Korea
+                                  </option>
+                                  <option
+                                    value="COD"
+                                  >
+                                    Democratic Republic of the Congo
+                                  </option>
+                                  <option
+                                    value="DNK"
+                                  >
+                                    Denmark
+                                  </option>
+                                  <option
+                                    value="DJI"
+                                  >
+                                    Djibouti
+                                  </option>
+                                  <option
+                                    value="DMA"
+                                  >
+                                    Dominica
+                                  </option>
+                                  <option
+                                    value="DOM"
+                                  >
+                                    Dominican Republic
+                                  </option>
+                                  <option
+                                    value="ECU"
+                                  >
+                                    Ecuador
+                                  </option>
+                                  <option
+                                    value="EGY"
+                                  >
+                                    Egypt
+                                  </option>
+                                  <option
+                                    value="SLV"
+                                  >
+                                    El Salvador
+                                  </option>
+                                  <option
+                                    value="GNQ"
+                                  >
+                                    Equatorial Guinea
+                                  </option>
+                                  <option
+                                    value="ERI"
+                                  >
+                                    Eritrea
+                                  </option>
+                                  <option
+                                    value="EST"
+                                  >
+                                    Estonia
+                                  </option>
+                                  <option
+                                    value="ETH"
+                                  >
+                                    Ethiopia
+                                  </option>
+                                  <option
+                                    value="FRO"
+                                  >
+                                    Faeroe Islands
+                                  </option>
+                                  <option
+                                    value="FLK"
+                                  >
+                                    Falkland Islands (Malvinas)
+                                  </option>
+                                  <option
+                                    value="FJI"
+                                  >
+                                    Fiji
+                                  </option>
+                                  <option
+                                    value="FIN"
+                                  >
+                                    Finland
+                                  </option>
+                                  <option
+                                    value="FRA"
+                                  >
+                                    France
+                                  </option>
+                                  <option
+                                    value="GUF"
+                                  >
+                                    French Guiana
+                                  </option>
+                                  <option
+                                    value="PYF"
+                                  >
+                                    French Polynesia
+                                  </option>
+                                  <option
+                                    value="GAB"
+                                  >
+                                    Gabon
+                                  </option>
+                                  <option
+                                    value="GMB"
+                                  >
+                                    Gambia
+                                  </option>
+                                  <option
+                                    value="GEO"
+                                  >
+                                    Georgia
+                                  </option>
+                                  <option
+                                    value="DEU"
+                                  >
+                                    Germany
+                                  </option>
+                                  <option
+                                    value="GHA"
+                                  >
+                                    Ghana
+                                  </option>
+                                  <option
+                                    value="GIB"
+                                  >
+                                    Gibraltar
+                                  </option>
+                                  <option
+                                    value="GRC"
+                                  >
+                                    Greece
+                                  </option>
+                                  <option
+                                    value="GRL"
+                                  >
+                                    Greenland
+                                  </option>
+                                  <option
+                                    value="GRD"
+                                  >
+                                    Grenada
+                                  </option>
+                                  <option
+                                    value="GLP"
+                                  >
+                                    Guadeloupe
+                                  </option>
+                                  <option
+                                    value="GUM"
+                                  >
+                                    Guam
+                                  </option>
+                                  <option
+                                    value="GTM"
+                                  >
+                                    Guatemala
+                                  </option>
+                                  <option
+                                    value="GGY"
+                                  >
+                                    Guernsey
+                                  </option>
+                                  <option
+                                    value="GIN"
+                                  >
+                                    Guinea
+                                  </option>
+                                  <option
+                                    value="GNB"
+                                  >
+                                    Guinea-Bissau
+                                  </option>
+                                  <option
+                                    value="GUY"
+                                  >
+                                    Guyana
+                                  </option>
+                                  <option
+                                    value="HTI"
+                                  >
+                                    Haiti
+                                  </option>
+                                  <option
+                                    value="VAT"
+                                  >
+                                    Holy See
+                                  </option>
+                                  <option
+                                    value="HND"
+                                  >
+                                    Honduras
+                                  </option>
+                                  <option
+                                    value="HUN"
+                                  >
+                                    Hungary
+                                  </option>
+                                  <option
+                                    value="ISL"
+                                  >
+                                    Iceland
+                                  </option>
+                                  <option
+                                    value="IND"
+                                  >
+                                    India
+                                  </option>
+                                  <option
+                                    value="IDN"
+                                  >
+                                    Indonesia
+                                  </option>
+                                  <option
+                                    value="IRN"
+                                  >
+                                    Iran (Islamic Republic of)
+                                  </option>
+                                  <option
+                                    value="IRQ"
+                                  >
+                                    Iraq
+                                  </option>
+                                  <option
+                                    value="IRL"
+                                  >
+                                    Ireland
+                                  </option>
+                                  <option
+                                    value="IMN"
+                                  >
+                                    Isle of Man
+                                  </option>
+                                  <option
+                                    value="ISR"
+                                  >
+                                    Israel
+                                  </option>
+                                  <option
+                                    value="ITA"
+                                  >
+                                    Italy
+                                  </option>
+                                  <option
+                                    value="JAM"
+                                  >
+                                    Jamaica
+                                  </option>
+                                  <option
+                                    value="JPN"
+                                  >
+                                    Japan
+                                  </option>
+                                  <option
+                                    value="JEY"
+                                  >
+                                    Jersey
+                                  </option>
+                                  <option
+                                    value="JOR"
+                                  >
+                                    Jordan
+                                  </option>
+                                  <option
+                                    value="KAZ"
+                                  >
+                                    Kazakhstan
+                                  </option>
+                                  <option
+                                    value="KEN"
+                                  >
+                                    Kenya
+                                  </option>
+                                  <option
+                                    value="KIR"
+                                  >
+                                    Kiribati
+                                  </option>
+                                  <option
+                                    value="KWT"
+                                  >
+                                    Kuwait
+                                  </option>
+                                  <option
+                                    value="KGZ"
+                                  >
+                                    Kyrgyzstan
+                                  </option>
+                                  <option
+                                    value="LAO"
+                                  >
+                                    Lao People's Democratic Republic
+                                  </option>
+                                  <option
+                                    value="LVA"
+                                  >
+                                    Latvia
+                                  </option>
+                                  <option
+                                    value="LBN"
+                                  >
+                                    Lebanon
+                                  </option>
+                                  <option
+                                    value="LSO"
+                                  >
+                                    Lesotho
+                                  </option>
+                                  <option
+                                    value="LBR"
+                                  >
+                                    Liberia
+                                  </option>
+                                  <option
+                                    value="LBY"
+                                  >
+                                    Libya
+                                  </option>
+                                  <option
+                                    value="LIE"
+                                  >
+                                    Liechtenstein
+                                  </option>
+                                  <option
+                                    value="LTU"
+                                  >
+                                    Lithuania
+                                  </option>
+                                  <option
+                                    value="LUX"
+                                  >
+                                    Luxembourg
+                                  </option>
+                                  <option
+                                    value="MDG"
+                                  >
+                                    Madagascar
+                                  </option>
+                                  <option
+                                    value="MWI"
+                                  >
+                                    Malawi
+                                  </option>
+                                  <option
+                                    value="MYS"
+                                  >
+                                    Malaysia
+                                  </option>
+                                  <option
+                                    value="MDV"
+                                  >
+                                    Maldives
+                                  </option>
+                                  <option
+                                    value="MLI"
+                                  >
+                                    Mali
+                                  </option>
+                                  <option
+                                    value="MLT"
+                                  >
+                                    Malta
+                                  </option>
+                                  <option
+                                    value="MHL"
+                                  >
+                                    Marshall Islands
+                                  </option>
+                                  <option
+                                    value="MTQ"
+                                  >
+                                    Martinique
+                                  </option>
+                                  <option
+                                    value="MRT"
+                                  >
+                                    Mauritania
+                                  </option>
+                                  <option
+                                    value="MUS"
+                                  >
+                                    Mauritius
+                                  </option>
+                                  <option
+                                    value="MYT"
+                                  >
+                                    Mayotte
+                                  </option>
+                                  <option
+                                    value="MEX"
+                                  >
+                                    Mexico
+                                  </option>
+                                  <option
+                                    value="FSM"
+                                  >
+                                    Micronesia (Federated States of)
+                                  </option>
+                                  <option
+                                    value="MCO"
+                                  >
+                                    Monaco
+                                  </option>
+                                  <option
+                                    value="MNG"
+                                  >
+                                    Mongolia
+                                  </option>
+                                  <option
+                                    value="MNE"
+                                  >
+                                    Montenegro
+                                  </option>
+                                  <option
+                                    value="MSR"
+                                  >
+                                    Montserrat
+                                  </option>
+                                  <option
+                                    value="MAR"
+                                  >
+                                    Morocco
+                                  </option>
+                                  <option
+                                    value="MOZ"
+                                  >
+                                    Mozambique
+                                  </option>
+                                  <option
+                                    value="MMR"
+                                  >
+                                    Myanmar
+                                  </option>
+                                  <option
+                                    value="NAM"
+                                  >
+                                    Namibia
+                                  </option>
+                                  <option
+                                    value="NRU"
+                                  >
+                                    Nauru
+                                  </option>
+                                  <option
+                                    value="NPL"
+                                  >
+                                    Nepal
+                                  </option>
+                                  <option
+                                    value="NLD"
+                                  >
+                                    Netherlands
+                                  </option>
+                                  <option
+                                    value="NCL"
+                                  >
+                                    New Caledonia
+                                  </option>
+                                  <option
+                                    value="NZL"
+                                  >
+                                    New Zealand
+                                  </option>
+                                  <option
+                                    value="NIC"
+                                  >
+                                    Nicaragua
+                                  </option>
+                                  <option
+                                    value="NER"
+                                  >
+                                    Niger
+                                  </option>
+                                  <option
+                                    value="NGA"
+                                  >
+                                    Nigeria
+                                  </option>
+                                  <option
+                                    value="NIU"
+                                  >
+                                    Niue
+                                  </option>
+                                  <option
+                                    value="NFK"
+                                  >
+                                    Norfolk Island
+                                  </option>
+                                  <option
+                                    value="MNP"
+                                  >
+                                    Northern Mariana Islands
+                                  </option>
+                                  <option
+                                    value="NOR"
+                                  >
+                                    Norway
+                                  </option>
+                                  <option
+                                    value="OMN"
+                                  >
+                                    Oman
+                                  </option>
+                                  <option
+                                    value="PAK"
+                                  >
+                                    Pakistan
+                                  </option>
+                                  <option
+                                    value="PLW"
+                                  >
+                                    Palau
+                                  </option>
+                                  <option
+                                    value="PAN"
+                                  >
+                                    Panama
+                                  </option>
+                                  <option
+                                    value="PNG"
+                                  >
+                                    Papua New Guinea
+                                  </option>
+                                  <option
+                                    value="PRY"
+                                  >
+                                    Paraguay
+                                  </option>
+                                  <option
+                                    value="PER"
+                                  >
+                                    Peru
+                                  </option>
+                                  <option
+                                    value="PHL"
+                                  >
+                                    Philippines
+                                  </option>
+                                  <option
+                                    value="PCN"
+                                  >
+                                    Pitcairn
+                                  </option>
+                                  <option
+                                    value="POL"
+                                  >
+                                    Poland
+                                  </option>
+                                  <option
+                                    value="PRT"
+                                  >
+                                    Portugal
+                                  </option>
+                                  <option
+                                    value="PRI"
+                                  >
+                                    Puerto Rico
+                                  </option>
+                                  <option
+                                    value="QAT"
+                                  >
+                                    Qatar
+                                  </option>
+                                  <option
+                                    value="KOR"
+                                  >
+                                    Republic of Korea
+                                  </option>
+                                  <option
+                                    value="MDA"
+                                  >
+                                    Republic of Moldova
+                                  </option>
+                                  <option
+                                    value="REU"
+                                  >
+                                    Réunion
+                                  </option>
+                                  <option
+                                    value="ROU"
+                                  >
+                                    Romania
+                                  </option>
+                                  <option
+                                    value="RUS"
+                                  >
+                                    Russian Federation
+                                  </option>
+                                  <option
+                                    value="RWA"
+                                  >
+                                    Rwanda
+                                  </option>
+                                  <option
+                                    value="BLM"
+                                  >
+                                    Saint-Barthélemy
+                                  </option>
+                                  <option
+                                    value="SHN"
+                                  >
+                                    Saint Helena
+                                  </option>
+                                  <option
+                                    value="KNA"
+                                  >
+                                    Saint Kitts and Nevis
+                                  </option>
+                                  <option
+                                    value="LCA"
+                                  >
+                                    Saint Lucia
+                                  </option>
+                                  <option
+                                    value="MAF"
+                                  >
+                                    Saint-Martin (French part)
+                                  </option>
+                                  <option
+                                    value="SPM"
+                                  >
+                                    Saint Pierre and Miquelon
+                                  </option>
+                                  <option
+                                    value="VCT"
+                                  >
+                                    Saint Vincent and the Grenadines
+                                  </option>
+                                  <option
+                                    value="WSM"
+                                  >
+                                    Samoa
+                                  </option>
+                                  <option
+                                    value="SMR"
+                                  >
+                                    San Marino
+                                  </option>
+                                  <option
+                                    value="STP"
+                                  >
+                                    Sao Tome and Principe
+                                  </option>
+                                  <option
+                                    value="SAU"
+                                  >
+                                    Saudi Arabia
+                                  </option>
+                                  <option
+                                    value="SEN"
+                                  >
+                                    Senegal
+                                  </option>
+                                  <option
+                                    value="SRB"
+                                  >
+                                    Serbia
+                                  </option>
+                                  <option
+                                    value="SYC"
+                                  >
+                                    Seychelles
+                                  </option>
+                                  <option
+                                    value="SLE"
+                                  >
+                                    Sierra Leone
+                                  </option>
+                                  <option
+                                    value="SGP"
+                                  >
+                                    Singapore
+                                  </option>
+                                  <option
+                                    value="SXM"
+                                  >
+                                    Sint Maarten (Dutch part)
+                                  </option>
+                                  <option
+                                    value="SVK"
+                                  >
+                                    Slovakia
+                                  </option>
+                                  <option
+                                    value="SVN"
+                                  >
+                                    Slovenia
+                                  </option>
+                                  <option
+                                    value="SLB"
+                                  >
+                                    Solomon Islands
+                                  </option>
+                                  <option
+                                    value="SOM"
+                                  >
+                                    Somalia
+                                  </option>
+                                  <option
+                                    value="ZAF"
+                                  >
+                                    South Africa
+                                  </option>
+                                  <option
+                                    value="SSD"
+                                  >
+                                    South Sudan
+                                  </option>
+                                  <option
+                                    value="ESP"
+                                  >
+                                    Spain
+                                  </option>
+                                  <option
+                                    value="LKA"
+                                  >
+                                    Sri Lanka
+                                  </option>
+                                  <option
+                                    value="PSE"
+                                  >
+                                    State of Palestine
+                                  </option>
+                                  <option
+                                    value="SDN"
+                                  >
+                                    Sudan
+                                  </option>
+                                  <option
+                                    value="SUR"
+                                  >
+                                    Suriname
+                                  </option>
+                                  <option
+                                    value="SJM"
+                                  >
+                                    Svalbard and Jan Mayen Islands
+                                  </option>
+                                  <option
+                                    value="SWZ"
+                                  >
+                                    Swaziland
+                                  </option>
+                                  <option
+                                    value="SWE"
+                                  >
+                                    Sweden
+                                  </option>
+                                  <option
+                                    value="CHE"
+                                  >
+                                    Switzerland
+                                  </option>
+                                  <option
+                                    value="SYR"
+                                  >
+                                    Syrian Arab Republic
+                                  </option>
+                                  <option
+                                    value="TWAN"
+                                  >
+                                    Taiwan
+                                  </option>
+                                  <option
+                                    value="TJK"
+                                  >
+                                    Tajikistan
+                                  </option>
+                                  <option
+                                    value="THA"
+                                  >
+                                    Thailand
+                                  </option>
+                                  <option
+                                    value="MKD"
+                                  >
+                                    The former Yugoslav Republic of Macedonia
+                                  </option>
+                                  <option
+                                    value="TLS"
+                                  >
+                                    Timor-Leste
+                                  </option>
+                                  <option
+                                    value="TGO"
+                                  >
+                                    Togo
+                                  </option>
+                                  <option
+                                    value="TKL"
+                                  >
+                                    Tokelau
+                                  </option>
+                                  <option
+                                    value="TON"
+                                  >
+                                    Tonga
+                                  </option>
+                                  <option
+                                    value="TTO"
+                                  >
+                                    Trinidad and Tobago
+                                  </option>
+                                  <option
+                                    value="TUN"
+                                  >
+                                    Tunisia
+                                  </option>
+                                  <option
+                                    value="TUR"
+                                  >
+                                    Turkey
+                                  </option>
+                                  <option
+                                    value="TKM"
+                                  >
+                                    Turkmenistan
+                                  </option>
+                                  <option
+                                    value="TCA"
+                                  >
+                                    Turks and Caicos Islands
+                                  </option>
+                                  <option
+                                    value="TUV"
+                                  >
+                                    Tuvalu
+                                  </option>
+                                  <option
+                                    value="UGA"
+                                  >
+                                    Uganda
+                                  </option>
+                                  <option
+                                    value="UKR"
+                                  >
+                                    Ukraine
+                                  </option>
+                                  <option
+                                    value="ARE"
+                                  >
+                                    United Arab Emirates
+                                  </option>
+                                  <option
+                                    value="GBR"
+                                  >
+                                    United Kingdom of Great Britain and Northern Ireland
+                                  </option>
+                                  <option
+                                    value="TZA"
+                                  >
+                                    United Republic of Tanzania
+                                  </option>
+                                  <option
+                                    value="URY"
+                                  >
+                                    Uruguay
+                                  </option>
+                                  <option
+                                    value="UZB"
+                                  >
+                                    Uzbekistan
+                                  </option>
+                                  <option
+                                    value="VUT"
+                                  >
+                                    Vanuatu
+                                  </option>
+                                  <option
+                                    value="VEN"
+                                  >
+                                    Venezuela (Bolivarian Republic of)
+                                  </option>
+                                  <option
+                                    value="VNM"
+                                  >
+                                    Vietnam
+                                  </option>
+                                  <option
+                                    value="WLF"
+                                  >
+                                    Wallis and Futuna Islands
+                                  </option>
+                                  <option
+                                    value="ESH"
+                                  >
+                                    Western Sahara
+                                  </option>
+                                  <option
+                                    value="YEM"
+                                  >
+                                    Yemen
+                                  </option>
+                                  <option
+                                    value="ZMB"
+                                  >
+                                    Zambia
+                                  </option>
+                                  <option
+                                    value="ZWE"
+                                  >
+                                    Zimbabwe
+                                  </option>
+                                </select>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div
+                        className="emotion-7"
+                      >
+                        <div
+                          className="fs-c m-b300"
+                        >
+                          <div
+                            className="sel"
+                          >
+                            <div>
+                              <label
+                                className="txt-l "
+                                htmlFor="select-3699612000"
+                                style={Object {}}
+                              >
+                                <span
+                                  style={
+                                    Object {
+                                      "marginRight": "0.5em",
+                                      "whiteSpace": "nowrap",
+                                    }
+                                  }
+                                >
+                                  This Marriage is your ...
+                                </span>
+                              </label>
+                              <div
+                                className="sel-c  "
+                              >
+                                <select
+                                  aria-label=""
+                                  className="sel-f  "
+                                  id="select-3699612000"
+                                  name="partnerA_marriageNumb"
+                                  onChange={[Function]}
+                                  value=""
+                                >
+                                  <option />
+                                  <option
+                                    value="1st"
+                                  >
+                                    1st
+                                  </option>
+                                  <option
+                                    value="2nd"
+                                  >
+                                    2nd
+                                  </option>
+                                  <option
+                                    value="3rd"
+                                  >
+                                    3rd
+                                  </option>
+                                  <option
+                                    value="4th"
+                                  >
+                                    4th
+                                  </option>
+                                  <option
+                                    value="5th"
+                                  >
+                                    5th
+                                  </option>
+                                  <option
+                                    value="6th"
+                                  >
+                                    6th
+                                  </option>
+                                  <option
+                                    value="7th"
+                                  >
+                                    7th
+                                  </option>
+                                  <option
+                                    value="8th"
+                                  >
+                                    8th
+                                  </option>
+                                  <option
+                                    value="9th"
+                                  >
+                                    9th
+                                  </option>
+                                </select>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-29"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Were you ever a member of a ...
+                      </h2>
+                      <div
+                        className="emotion-28"
+                      >
+                        <div
+                          aria-label=""
+                          role="group"
+                        >
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_partnershipType"
+                              onChange={[Function]}
+                              type="radio"
+                              value="N/A"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Does Not Apply
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_partnershipType"
+                              onChange={[Function]}
+                              type="radio"
+                              value="CIV"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Civil Unions
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_partnershipType"
+                              onChange={[Function]}
+                              type="radio"
+                              value="DOM"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Domestic Partnership
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-32"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Parents
+                      </h2>
+                    </div>
+                    <div
+                      className="emotion-35"
+                      style={
+                        Object {
+                          "marginBottom": "2.5em",
+                        }
+                      }
+                    >
+                      <h4
+                        className="emotion-4"
+                      >
+                        Name of Parent 1/Mother
+                      </h4>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-2217447742"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1/Mother - First Middle Last
+                          </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-2217447742"
+                          maxLength={38}
+                          name="partnerA_parentA_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-1925864057"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1/Mother - Maiden Name/Surname at Birth or Adoption
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          This should be your parent's last name at the time of their birth or adoption.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-1925864057"
+                          maxLength={38}
+                          name="partnerA_parentA_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-35"
+                      style={
+                        Object {
+                          "marginBottom": "2.5em",
+                        }
+                      }
+                    >
+                      <h4
+                        className="emotion-4"
+                      >
+                        Name of Parent 2/Father
+                      </h4>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-738420088"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 2/Father - First Middle Last
+                          </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-738420088"
+                          maxLength={38}
+                          name="partnerA_parentB_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-2538005951"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 2/Father - Maiden Name/Surname at Birth or Adoption
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          This should be your parent's last name at the time of their birth or adoption.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-2538005951"
+                          maxLength={38}
+                          name="partnerA_parentB_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-19"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Were your parents married at the time of your birth?
+                      </h2>
+                      <div
+                        className="emotion-28"
+                      >
+                        <div
+                          className="emotion-41"
+                        >
+                          <div
+                            aria-label=""
+                            role="group"
+                          >
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_parentsMarriedAtBirth"
+                                onChange={[Function]}
+                                type="radio"
+                                value="1"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_parentsMarriedAtBirth"
+                                onChange={[Function]}
+                                type="radio"
+                                value="0"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-19"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Related by blood or marriage to Person B
+                      </h2>
+                      <div
+                        className="emotion-28"
+                      >
+                        <div
+                          className="emotion-41"
+                        >
+                          <div
+                            aria-label=""
+                            role="group"
+                          >
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_bloodRelation"
+                                onChange={[Function]}
+                                type="radio"
+                                value="1"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_bloodRelation"
+                                onChange={[Function]}
+                                type="radio"
+                                value="0"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div
+                className="g g--mr emotion-53"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                >
+                  <button
+                    className="lnk emotion-52"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "fontStyle": "italic",
+                          "whiteSpace": "nowrap",
+                        }
+                      }
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={
+                          Object {
+                            "fontStyle": "normal",
+                          }
+                        }
+                      >
+                        ←
+                      </span>
+                       
+                      Back
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={true}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    NEXT
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 3. Person 2 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-51 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-51 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-51 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-50 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-50 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-50 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-53 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-53 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-53 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-53 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-53 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-52 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-12 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-12 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-11 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-11 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-11 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-11 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-11 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-11 input::-ms-clear {
+  display: none;
+}
+
+.emotion-11 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-11.disabled {
+  opacity: 0.4;
+}
+
+.emotion-11.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed:hover,
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.completed .current,
+.emotion-3 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted,
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+.emotion-54 {
+  padding: 0px;
+}
+
+.emotion-9 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-9 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-9 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-9 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-9 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-9 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-7 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-7 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-7 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-7 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-7 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-7 .sel-c {
+  display: block;
+}
+
+.emotion-16 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-13 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-13 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-13 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-13 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-13 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-19 {
+  margin-top: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-19 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-19 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-19 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-19 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-19 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-29 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-29 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-29 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-29 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-29 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-29 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-29 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-29 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-28 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-top: 1em;
+}
+
+.emotion-28 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-28 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-28 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-32 {
+  margin-top: 1em;
+  padding-bottom: 2em;
+}
+
+.emotion-35 {
+  margin-bottom: 2.5em;
+}
+
+.emotion-35 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-35 h4 {
+  font-size: 1.25rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-35 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-35 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-35 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-35 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-35 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-35 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-35 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-41 {
+  margin-bottom: 1.5em;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 3 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Person 2
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-54"
+            >
+              <div
+                className="emotion-51"
+              >
+                <fieldset
+                  className=" emotion-50"
+                >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Person 
+                      B
+                    </h2>
+                  </legend>
+                  <div
+                    className="emotion-9"
+                  >
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2048906072"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          First Name
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2048906072"
+                        maxLength={100}
+                        name="partnerB_firstName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2852212527"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Middle Name
+                        </span>
+                      </label>
+                      <label
+                        className="notice emotion-5"
+                      >
+                        This is your current middle name if you have one. You may not list a new middle name.
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2852212527"
+                        maxLength={50}
+                        name="partnerB_middleName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-1103291528"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Last Name
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-1103291528"
+                        maxLength={100}
+                        name="partnerB_lastName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-7"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-1333361069"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Last Name / SURNAME to be used after marriage
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-1333361069"
+                          maxLength={50}
+                          name="partnerB_surName"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-7"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-2202529938"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Suffix
+                          </span>
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-2202529938"
+                            name="partnerB_suffix"
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="N/A"
+                            >
+                              Does Not Apply
+                            </option>
+                            <option
+                              value="I"
+                            >
+                              I
+                            </option>
+                            <option
+                              value="II"
+                            >
+                              II
+                            </option>
+                            <option
+                              value="III"
+                            >
+                              III
+                            </option>
+                            <option
+                              value="IV"
+                            >
+                              IV
+                            </option>
+                            <option
+                              value="V"
+                            >
+                              V
+                            </option>
+                            <option
+                              value="VI"
+                            >
+                              VI
+                            </option>
+                            <option
+                              value="Jr."
+                            >
+                              Jr.
+                            </option>
+                            <option
+                              value="Sr."
+                            >
+                              Sr.
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2786084594"
+                        style={Object {}}
+                      >
+                        <span
+                          style={
+                            Object {
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Occupation
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2786084594"
+                        maxLength={100}
+                        name="partnerB_occupation"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-13"
+                    >
+                      <h2
+                        className="emotion-4"
+                        style={
+                          Object {
+                            "marginBottom": "1.5rem",
+                          }
+                        }
+                      >
+                        Date of Birth
+                      </h2>
+                      <fieldset
+                        className="emotion-12"
+                      >
+                        <div>
+                          <legend
+                            style={
+                              Object {
+                                "display": "none",
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            Person B Date of Birth
+                          </legend>
+                          <div
+                            className=" emotion-11"
+                          >
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="dob-month"
+                              >
+                                Month
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="dob-month"
+                                max="12"
+                                maxLength={2}
+                                min="1"
+                                name="month"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="MM"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="dob-day"
+                              >
+                                Day
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="dob-day"
+                                max="31"
+                                maxLength={2}
+                                min="1"
+                                name="day"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="DD"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="dob-year"
+                              >
+                                Year
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="dob-year"
+                                max={2024}
+                                maxLength={4}
+                                min="1000"
+                                name="year"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="YYYY"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </fieldset>
+                    </div>
+                    <div
+                      className="emotion-13"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-193405638"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Age
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          Your age will be automatically calculated based on your date of birth.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          disabled={true}
+                          id="input-193405638"
+                          maxLength={2}
+                          name="partnerB_age"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-19"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Birthplace
+                      </h2>
+                      <div
+                        className="emotion-7"
+                      >
+                        <div>
+                          <label
+                            className="txt-l "
+                            htmlFor="select-1817836307"
+                            style={Object {}}
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              Birthplace Country
+                            </span>
+                          </label>
+                          <div
+                            className="sel-c  "
+                          >
+                            <select
+                              aria-label=""
+                              className="sel-f  "
+                              id="select-1817836307"
+                              name="partnerB_birthCountry"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              value=""
+                            >
+                              <option />
+                              <option
+                                value="USA"
+                              >
+                                United States of America
+                              </option>
+                              <option
+                                value="VIR"
+                              >
+                                United States Virgin Islands
+                              </option>
+                              <option
+                                value="AFG"
+                              >
+                                Afghanistan
+                              </option>
+                              <option
+                                value="ALA"
+                              >
+                                Åland Islands
+                              </option>
+                              <option
+                                value="ALB"
+                              >
+                                Albania
+                              </option>
+                              <option
+                                value="DZA"
+                              >
+                                Algeria
+                              </option>
+                              <option
+                                value="ASM"
+                              >
+                                American Samoa
+                              </option>
+                              <option
+                                value="AND"
+                              >
+                                Andorra
+                              </option>
+                              <option
+                                value="AGO"
+                              >
+                                Angola
+                              </option>
+                              <option
+                                value="AIA"
+                              >
+                                Anguilla
+                              </option>
+                              <option
+                                value="ATG"
+                              >
+                                Antigua and Barbuda
+                              </option>
+                              <option
+                                value="ARG"
+                              >
+                                Argentina
+                              </option>
+                              <option
+                                value="ARM"
+                              >
+                                Armenia
+                              </option>
+                              <option
+                                value="ABW"
+                              >
+                                Aruba
+                              </option>
+                              <option
+                                value="AUS"
+                              >
+                                Australia
+                              </option>
+                              <option
+                                value="AUT"
+                              >
+                                Austria
+                              </option>
+                              <option
+                                value="AZE"
+                              >
+                                Azerbaijan
+                              </option>
+                              <option
+                                value="BHS"
+                              >
+                                Bahamas
+                              </option>
+                              <option
+                                value="BHR"
+                              >
+                                Bahrain
+                              </option>
+                              <option
+                                value="BGD"
+                              >
+                                Bangladesh
+                              </option>
+                              <option
+                                value="BRB"
+                              >
+                                Barbados
+                              </option>
+                              <option
+                                value="BLR"
+                              >
+                                Belarus
+                              </option>
+                              <option
+                                value="BEL"
+                              >
+                                Belgium
+                              </option>
+                              <option
+                                value="BLZ"
+                              >
+                                Belize
+                              </option>
+                              <option
+                                value="BEN"
+                              >
+                                Benin
+                              </option>
+                              <option
+                                value="BMU"
+                              >
+                                Bermuda
+                              </option>
+                              <option
+                                value="BTN"
+                              >
+                                Bhutan
+                              </option>
+                              <option
+                                value="BOL"
+                              >
+                                Bolivia (Plurinational State of)
+                              </option>
+                              <option
+                                value="BES"
+                              >
+                                Bonaire, Saint Eustatius and Saba
+                              </option>
+                              <option
+                                value="BIH"
+                              >
+                                Bosnia and Herzegovina
+                              </option>
+                              <option
+                                value="BWA"
+                              >
+                                Botswana
+                              </option>
+                              <option
+                                value="BRA"
+                              >
+                                Brazil
+                              </option>
+                              <option
+                                value="VGB"
+                              >
+                                British Virgin Islands
+                              </option>
+                              <option
+                                value="BRN"
+                              >
+                                Brunei Darussalam
+                              </option>
+                              <option
+                                value="BGR"
+                              >
+                                Bulgaria
+                              </option>
+                              <option
+                                value="BFA"
+                              >
+                                Burkina Faso
+                              </option>
+                              <option
+                                value="BDI"
+                              >
+                                Burundi
+                              </option>
+                              <option
+                                value="CPV"
+                              >
+                                Cabo Verde
+                              </option>
+                              <option
+                                value="KHM"
+                              >
+                                Cambodia
+                              </option>
+                              <option
+                                value="CMR"
+                              >
+                                Cameroon
+                              </option>
+                              <option
+                                value="CAN"
+                              >
+                                Canada
+                              </option>
+                              <option
+                                value="CYM"
+                              >
+                                Cayman Islands
+                              </option>
+                              <option
+                                value="CAF"
+                              >
+                                Central African Republic
+                              </option>
+                              <option
+                                value="TCD"
+                              >
+                                Chad
+                              </option>
+                              <option
+                                value="CHL"
+                              >
+                                Chile
+                              </option>
+                              <option
+                                value="CHN"
+                              >
+                                China
+                              </option>
+                              <option
+                                value="HKG"
+                              >
+                                China, Hong Kong Special Administrative Region
+                              </option>
+                              <option
+                                value="MAC"
+                              >
+                                China, Macao Special Administrative Region
+                              </option>
+                              <option
+                                value="COL"
+                              >
+                                Colombia
+                              </option>
+                              <option
+                                value="COM"
+                              >
+                                Comoros
+                              </option>
+                              <option
+                                value="COG"
+                              >
+                                Congo
+                              </option>
+                              <option
+                                value="COK"
+                              >
+                                Cook Islands
+                              </option>
+                              <option
+                                value="CRI"
+                              >
+                                Costa Rica
+                              </option>
+                              <option
+                                value="CIV"
+                              >
+                                Côte d'Ivoire
+                              </option>
+                              <option
+                                value="HRV"
+                              >
+                                Croatia
+                              </option>
+                              <option
+                                value="CUB"
+                              >
+                                Cuba
+                              </option>
+                              <option
+                                value="CUW"
+                              >
+                                Curaçao
+                              </option>
+                              <option
+                                value="CYP"
+                              >
+                                Cyprus
+                              </option>
+                              <option
+                                value="CZE"
+                              >
+                                Czech Republic
+                              </option>
+                              <option
+                                value="PRK"
+                              >
+                                Democratic People's Republic of Korea
+                              </option>
+                              <option
+                                value="COD"
+                              >
+                                Democratic Republic of the Congo
+                              </option>
+                              <option
+                                value="DNK"
+                              >
+                                Denmark
+                              </option>
+                              <option
+                                value="DJI"
+                              >
+                                Djibouti
+                              </option>
+                              <option
+                                value="DMA"
+                              >
+                                Dominica
+                              </option>
+                              <option
+                                value="DOM"
+                              >
+                                Dominican Republic
+                              </option>
+                              <option
+                                value="ECU"
+                              >
+                                Ecuador
+                              </option>
+                              <option
+                                value="EGY"
+                              >
+                                Egypt
+                              </option>
+                              <option
+                                value="SLV"
+                              >
+                                El Salvador
+                              </option>
+                              <option
+                                value="GNQ"
+                              >
+                                Equatorial Guinea
+                              </option>
+                              <option
+                                value="ERI"
+                              >
+                                Eritrea
+                              </option>
+                              <option
+                                value="EST"
+                              >
+                                Estonia
+                              </option>
+                              <option
+                                value="ETH"
+                              >
+                                Ethiopia
+                              </option>
+                              <option
+                                value="FRO"
+                              >
+                                Faeroe Islands
+                              </option>
+                              <option
+                                value="FLK"
+                              >
+                                Falkland Islands (Malvinas)
+                              </option>
+                              <option
+                                value="FJI"
+                              >
+                                Fiji
+                              </option>
+                              <option
+                                value="FIN"
+                              >
+                                Finland
+                              </option>
+                              <option
+                                value="FRA"
+                              >
+                                France
+                              </option>
+                              <option
+                                value="GUF"
+                              >
+                                French Guiana
+                              </option>
+                              <option
+                                value="PYF"
+                              >
+                                French Polynesia
+                              </option>
+                              <option
+                                value="GAB"
+                              >
+                                Gabon
+                              </option>
+                              <option
+                                value="GMB"
+                              >
+                                Gambia
+                              </option>
+                              <option
+                                value="GEO"
+                              >
+                                Georgia
+                              </option>
+                              <option
+                                value="DEU"
+                              >
+                                Germany
+                              </option>
+                              <option
+                                value="GHA"
+                              >
+                                Ghana
+                              </option>
+                              <option
+                                value="GIB"
+                              >
+                                Gibraltar
+                              </option>
+                              <option
+                                value="GRC"
+                              >
+                                Greece
+                              </option>
+                              <option
+                                value="GRL"
+                              >
+                                Greenland
+                              </option>
+                              <option
+                                value="GRD"
+                              >
+                                Grenada
+                              </option>
+                              <option
+                                value="GLP"
+                              >
+                                Guadeloupe
+                              </option>
+                              <option
+                                value="GUM"
+                              >
+                                Guam
+                              </option>
+                              <option
+                                value="GTM"
+                              >
+                                Guatemala
+                              </option>
+                              <option
+                                value="GGY"
+                              >
+                                Guernsey
+                              </option>
+                              <option
+                                value="GIN"
+                              >
+                                Guinea
+                              </option>
+                              <option
+                                value="GNB"
+                              >
+                                Guinea-Bissau
+                              </option>
+                              <option
+                                value="GUY"
+                              >
+                                Guyana
+                              </option>
+                              <option
+                                value="HTI"
+                              >
+                                Haiti
+                              </option>
+                              <option
+                                value="VAT"
+                              >
+                                Holy See
+                              </option>
+                              <option
+                                value="HND"
+                              >
+                                Honduras
+                              </option>
+                              <option
+                                value="HUN"
+                              >
+                                Hungary
+                              </option>
+                              <option
+                                value="ISL"
+                              >
+                                Iceland
+                              </option>
+                              <option
+                                value="IND"
+                              >
+                                India
+                              </option>
+                              <option
+                                value="IDN"
+                              >
+                                Indonesia
+                              </option>
+                              <option
+                                value="IRN"
+                              >
+                                Iran (Islamic Republic of)
+                              </option>
+                              <option
+                                value="IRQ"
+                              >
+                                Iraq
+                              </option>
+                              <option
+                                value="IRL"
+                              >
+                                Ireland
+                              </option>
+                              <option
+                                value="IMN"
+                              >
+                                Isle of Man
+                              </option>
+                              <option
+                                value="ISR"
+                              >
+                                Israel
+                              </option>
+                              <option
+                                value="ITA"
+                              >
+                                Italy
+                              </option>
+                              <option
+                                value="JAM"
+                              >
+                                Jamaica
+                              </option>
+                              <option
+                                value="JPN"
+                              >
+                                Japan
+                              </option>
+                              <option
+                                value="JEY"
+                              >
+                                Jersey
+                              </option>
+                              <option
+                                value="JOR"
+                              >
+                                Jordan
+                              </option>
+                              <option
+                                value="KAZ"
+                              >
+                                Kazakhstan
+                              </option>
+                              <option
+                                value="KEN"
+                              >
+                                Kenya
+                              </option>
+                              <option
+                                value="KIR"
+                              >
+                                Kiribati
+                              </option>
+                              <option
+                                value="KWT"
+                              >
+                                Kuwait
+                              </option>
+                              <option
+                                value="KGZ"
+                              >
+                                Kyrgyzstan
+                              </option>
+                              <option
+                                value="LAO"
+                              >
+                                Lao People's Democratic Republic
+                              </option>
+                              <option
+                                value="LVA"
+                              >
+                                Latvia
+                              </option>
+                              <option
+                                value="LBN"
+                              >
+                                Lebanon
+                              </option>
+                              <option
+                                value="LSO"
+                              >
+                                Lesotho
+                              </option>
+                              <option
+                                value="LBR"
+                              >
+                                Liberia
+                              </option>
+                              <option
+                                value="LBY"
+                              >
+                                Libya
+                              </option>
+                              <option
+                                value="LIE"
+                              >
+                                Liechtenstein
+                              </option>
+                              <option
+                                value="LTU"
+                              >
+                                Lithuania
+                              </option>
+                              <option
+                                value="LUX"
+                              >
+                                Luxembourg
+                              </option>
+                              <option
+                                value="MDG"
+                              >
+                                Madagascar
+                              </option>
+                              <option
+                                value="MWI"
+                              >
+                                Malawi
+                              </option>
+                              <option
+                                value="MYS"
+                              >
+                                Malaysia
+                              </option>
+                              <option
+                                value="MDV"
+                              >
+                                Maldives
+                              </option>
+                              <option
+                                value="MLI"
+                              >
+                                Mali
+                              </option>
+                              <option
+                                value="MLT"
+                              >
+                                Malta
+                              </option>
+                              <option
+                                value="MHL"
+                              >
+                                Marshall Islands
+                              </option>
+                              <option
+                                value="MTQ"
+                              >
+                                Martinique
+                              </option>
+                              <option
+                                value="MRT"
+                              >
+                                Mauritania
+                              </option>
+                              <option
+                                value="MUS"
+                              >
+                                Mauritius
+                              </option>
+                              <option
+                                value="MYT"
+                              >
+                                Mayotte
+                              </option>
+                              <option
+                                value="MEX"
+                              >
+                                Mexico
+                              </option>
+                              <option
+                                value="FSM"
+                              >
+                                Micronesia (Federated States of)
+                              </option>
+                              <option
+                                value="MCO"
+                              >
+                                Monaco
+                              </option>
+                              <option
+                                value="MNG"
+                              >
+                                Mongolia
+                              </option>
+                              <option
+                                value="MNE"
+                              >
+                                Montenegro
+                              </option>
+                              <option
+                                value="MSR"
+                              >
+                                Montserrat
+                              </option>
+                              <option
+                                value="MAR"
+                              >
+                                Morocco
+                              </option>
+                              <option
+                                value="MOZ"
+                              >
+                                Mozambique
+                              </option>
+                              <option
+                                value="MMR"
+                              >
+                                Myanmar
+                              </option>
+                              <option
+                                value="NAM"
+                              >
+                                Namibia
+                              </option>
+                              <option
+                                value="NRU"
+                              >
+                                Nauru
+                              </option>
+                              <option
+                                value="NPL"
+                              >
+                                Nepal
+                              </option>
+                              <option
+                                value="NLD"
+                              >
+                                Netherlands
+                              </option>
+                              <option
+                                value="NCL"
+                              >
+                                New Caledonia
+                              </option>
+                              <option
+                                value="NZL"
+                              >
+                                New Zealand
+                              </option>
+                              <option
+                                value="NIC"
+                              >
+                                Nicaragua
+                              </option>
+                              <option
+                                value="NER"
+                              >
+                                Niger
+                              </option>
+                              <option
+                                value="NGA"
+                              >
+                                Nigeria
+                              </option>
+                              <option
+                                value="NIU"
+                              >
+                                Niue
+                              </option>
+                              <option
+                                value="NFK"
+                              >
+                                Norfolk Island
+                              </option>
+                              <option
+                                value="MNP"
+                              >
+                                Northern Mariana Islands
+                              </option>
+                              <option
+                                value="NOR"
+                              >
+                                Norway
+                              </option>
+                              <option
+                                value="OMN"
+                              >
+                                Oman
+                              </option>
+                              <option
+                                value="PAK"
+                              >
+                                Pakistan
+                              </option>
+                              <option
+                                value="PLW"
+                              >
+                                Palau
+                              </option>
+                              <option
+                                value="PAN"
+                              >
+                                Panama
+                              </option>
+                              <option
+                                value="PNG"
+                              >
+                                Papua New Guinea
+                              </option>
+                              <option
+                                value="PRY"
+                              >
+                                Paraguay
+                              </option>
+                              <option
+                                value="PER"
+                              >
+                                Peru
+                              </option>
+                              <option
+                                value="PHL"
+                              >
+                                Philippines
+                              </option>
+                              <option
+                                value="PCN"
+                              >
+                                Pitcairn
+                              </option>
+                              <option
+                                value="POL"
+                              >
+                                Poland
+                              </option>
+                              <option
+                                value="PRT"
+                              >
+                                Portugal
+                              </option>
+                              <option
+                                value="PRI"
+                              >
+                                Puerto Rico
+                              </option>
+                              <option
+                                value="QAT"
+                              >
+                                Qatar
+                              </option>
+                              <option
+                                value="KOR"
+                              >
+                                Republic of Korea
+                              </option>
+                              <option
+                                value="MDA"
+                              >
+                                Republic of Moldova
+                              </option>
+                              <option
+                                value="REU"
+                              >
+                                Réunion
+                              </option>
+                              <option
+                                value="ROU"
+                              >
+                                Romania
+                              </option>
+                              <option
+                                value="RUS"
+                              >
+                                Russian Federation
+                              </option>
+                              <option
+                                value="RWA"
+                              >
+                                Rwanda
+                              </option>
+                              <option
+                                value="BLM"
+                              >
+                                Saint-Barthélemy
+                              </option>
+                              <option
+                                value="SHN"
+                              >
+                                Saint Helena
+                              </option>
+                              <option
+                                value="KNA"
+                              >
+                                Saint Kitts and Nevis
+                              </option>
+                              <option
+                                value="LCA"
+                              >
+                                Saint Lucia
+                              </option>
+                              <option
+                                value="MAF"
+                              >
+                                Saint-Martin (French part)
+                              </option>
+                              <option
+                                value="SPM"
+                              >
+                                Saint Pierre and Miquelon
+                              </option>
+                              <option
+                                value="VCT"
+                              >
+                                Saint Vincent and the Grenadines
+                              </option>
+                              <option
+                                value="WSM"
+                              >
+                                Samoa
+                              </option>
+                              <option
+                                value="SMR"
+                              >
+                                San Marino
+                              </option>
+                              <option
+                                value="STP"
+                              >
+                                Sao Tome and Principe
+                              </option>
+                              <option
+                                value="SAU"
+                              >
+                                Saudi Arabia
+                              </option>
+                              <option
+                                value="SEN"
+                              >
+                                Senegal
+                              </option>
+                              <option
+                                value="SRB"
+                              >
+                                Serbia
+                              </option>
+                              <option
+                                value="SYC"
+                              >
+                                Seychelles
+                              </option>
+                              <option
+                                value="SLE"
+                              >
+                                Sierra Leone
+                              </option>
+                              <option
+                                value="SGP"
+                              >
+                                Singapore
+                              </option>
+                              <option
+                                value="SXM"
+                              >
+                                Sint Maarten (Dutch part)
+                              </option>
+                              <option
+                                value="SVK"
+                              >
+                                Slovakia
+                              </option>
+                              <option
+                                value="SVN"
+                              >
+                                Slovenia
+                              </option>
+                              <option
+                                value="SLB"
+                              >
+                                Solomon Islands
+                              </option>
+                              <option
+                                value="SOM"
+                              >
+                                Somalia
+                              </option>
+                              <option
+                                value="ZAF"
+                              >
+                                South Africa
+                              </option>
+                              <option
+                                value="SSD"
+                              >
+                                South Sudan
+                              </option>
+                              <option
+                                value="ESP"
+                              >
+                                Spain
+                              </option>
+                              <option
+                                value="LKA"
+                              >
+                                Sri Lanka
+                              </option>
+                              <option
+                                value="PSE"
+                              >
+                                State of Palestine
+                              </option>
+                              <option
+                                value="SDN"
+                              >
+                                Sudan
+                              </option>
+                              <option
+                                value="SUR"
+                              >
+                                Suriname
+                              </option>
+                              <option
+                                value="SJM"
+                              >
+                                Svalbard and Jan Mayen Islands
+                              </option>
+                              <option
+                                value="SWZ"
+                              >
+                                Swaziland
+                              </option>
+                              <option
+                                value="SWE"
+                              >
+                                Sweden
+                              </option>
+                              <option
+                                value="CHE"
+                              >
+                                Switzerland
+                              </option>
+                              <option
+                                value="SYR"
+                              >
+                                Syrian Arab Republic
+                              </option>
+                              <option
+                                value="TWAN"
+                              >
+                                Taiwan
+                              </option>
+                              <option
+                                value="TJK"
+                              >
+                                Tajikistan
+                              </option>
+                              <option
+                                value="THA"
+                              >
+                                Thailand
+                              </option>
+                              <option
+                                value="MKD"
+                              >
+                                The former Yugoslav Republic of Macedonia
+                              </option>
+                              <option
+                                value="TLS"
+                              >
+                                Timor-Leste
+                              </option>
+                              <option
+                                value="TGO"
+                              >
+                                Togo
+                              </option>
+                              <option
+                                value="TKL"
+                              >
+                                Tokelau
+                              </option>
+                              <option
+                                value="TON"
+                              >
+                                Tonga
+                              </option>
+                              <option
+                                value="TTO"
+                              >
+                                Trinidad and Tobago
+                              </option>
+                              <option
+                                value="TUN"
+                              >
+                                Tunisia
+                              </option>
+                              <option
+                                value="TUR"
+                              >
+                                Turkey
+                              </option>
+                              <option
+                                value="TKM"
+                              >
+                                Turkmenistan
+                              </option>
+                              <option
+                                value="TCA"
+                              >
+                                Turks and Caicos Islands
+                              </option>
+                              <option
+                                value="TUV"
+                              >
+                                Tuvalu
+                              </option>
+                              <option
+                                value="UGA"
+                              >
+                                Uganda
+                              </option>
+                              <option
+                                value="UKR"
+                              >
+                                Ukraine
+                              </option>
+                              <option
+                                value="ARE"
+                              >
+                                United Arab Emirates
+                              </option>
+                              <option
+                                value="GBR"
+                              >
+                                United Kingdom of Great Britain and Northern Ireland
+                              </option>
+                              <option
+                                value="TZA"
+                              >
+                                United Republic of Tanzania
+                              </option>
+                              <option
+                                value="URY"
+                              >
+                                Uruguay
+                              </option>
+                              <option
+                                value="UZB"
+                              >
+                                Uzbekistan
+                              </option>
+                              <option
+                                value="VUT"
+                              >
+                                Vanuatu
+                              </option>
+                              <option
+                                value="VEN"
+                              >
+                                Venezuela (Bolivarian Republic of)
+                              </option>
+                              <option
+                                value="VNM"
+                              >
+                                Vietnam
+                              </option>
+                              <option
+                                value="WLF"
+                              >
+                                Wallis and Futuna Islands
+                              </option>
+                              <option
+                                value="ESH"
+                              >
+                                Western Sahara
+                              </option>
+                              <option
+                                value="YEM"
+                              >
+                                Yemen
+                              </option>
+                              <option
+                                value="ZMB"
+                              >
+                                Zambia
+                              </option>
+                              <option
+                                value="ZWE"
+                              >
+                                Zimbabwe
+                              </option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-13"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Residence
+                      </h2>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-7"
+                      >
+                        <div
+                          className="fs-c m-b300"
+                        >
+                          <div
+                            className="sel"
+                          >
+                            <div>
+                              <label
+                                className="txt-l "
+                                htmlFor="select-3550464744"
+                                style={Object {}}
+                              >
+                                <span
+                                  style={
+                                    Object {
+                                      "marginRight": "0.5em",
+                                    }
+                                  }
+                                >
+                                  Select Country of Residence
+                                </span>
+                              </label>
+                              <div
+                                className="sel-c  "
+                              >
+                                <select
+                                  aria-label=""
+                                  className="sel-f  "
+                                  id="select-3550464744"
+                                  name="partnerB_residenceCountry"
+                                  onChange={[Function]}
+                                  value=""
+                                >
+                                  <option />
+                                  <option
+                                    value="USA"
+                                  >
+                                    United States of America
+                                  </option>
+                                  <option
+                                    value="VIR"
+                                  >
+                                    United States Virgin Islands
+                                  </option>
+                                  <option
+                                    value="AFG"
+                                  >
+                                    Afghanistan
+                                  </option>
+                                  <option
+                                    value="ALA"
+                                  >
+                                    Åland Islands
+                                  </option>
+                                  <option
+                                    value="ALB"
+                                  >
+                                    Albania
+                                  </option>
+                                  <option
+                                    value="DZA"
+                                  >
+                                    Algeria
+                                  </option>
+                                  <option
+                                    value="ASM"
+                                  >
+                                    American Samoa
+                                  </option>
+                                  <option
+                                    value="AND"
+                                  >
+                                    Andorra
+                                  </option>
+                                  <option
+                                    value="AGO"
+                                  >
+                                    Angola
+                                  </option>
+                                  <option
+                                    value="AIA"
+                                  >
+                                    Anguilla
+                                  </option>
+                                  <option
+                                    value="ATG"
+                                  >
+                                    Antigua and Barbuda
+                                  </option>
+                                  <option
+                                    value="ARG"
+                                  >
+                                    Argentina
+                                  </option>
+                                  <option
+                                    value="ARM"
+                                  >
+                                    Armenia
+                                  </option>
+                                  <option
+                                    value="ABW"
+                                  >
+                                    Aruba
+                                  </option>
+                                  <option
+                                    value="AUS"
+                                  >
+                                    Australia
+                                  </option>
+                                  <option
+                                    value="AUT"
+                                  >
+                                    Austria
+                                  </option>
+                                  <option
+                                    value="AZE"
+                                  >
+                                    Azerbaijan
+                                  </option>
+                                  <option
+                                    value="BHS"
+                                  >
+                                    Bahamas
+                                  </option>
+                                  <option
+                                    value="BHR"
+                                  >
+                                    Bahrain
+                                  </option>
+                                  <option
+                                    value="BGD"
+                                  >
+                                    Bangladesh
+                                  </option>
+                                  <option
+                                    value="BRB"
+                                  >
+                                    Barbados
+                                  </option>
+                                  <option
+                                    value="BLR"
+                                  >
+                                    Belarus
+                                  </option>
+                                  <option
+                                    value="BEL"
+                                  >
+                                    Belgium
+                                  </option>
+                                  <option
+                                    value="BLZ"
+                                  >
+                                    Belize
+                                  </option>
+                                  <option
+                                    value="BEN"
+                                  >
+                                    Benin
+                                  </option>
+                                  <option
+                                    value="BMU"
+                                  >
+                                    Bermuda
+                                  </option>
+                                  <option
+                                    value="BTN"
+                                  >
+                                    Bhutan
+                                  </option>
+                                  <option
+                                    value="BOL"
+                                  >
+                                    Bolivia (Plurinational State of)
+                                  </option>
+                                  <option
+                                    value="BES"
+                                  >
+                                    Bonaire, Saint Eustatius and Saba
+                                  </option>
+                                  <option
+                                    value="BIH"
+                                  >
+                                    Bosnia and Herzegovina
+                                  </option>
+                                  <option
+                                    value="BWA"
+                                  >
+                                    Botswana
+                                  </option>
+                                  <option
+                                    value="BRA"
+                                  >
+                                    Brazil
+                                  </option>
+                                  <option
+                                    value="VGB"
+                                  >
+                                    British Virgin Islands
+                                  </option>
+                                  <option
+                                    value="BRN"
+                                  >
+                                    Brunei Darussalam
+                                  </option>
+                                  <option
+                                    value="BGR"
+                                  >
+                                    Bulgaria
+                                  </option>
+                                  <option
+                                    value="BFA"
+                                  >
+                                    Burkina Faso
+                                  </option>
+                                  <option
+                                    value="BDI"
+                                  >
+                                    Burundi
+                                  </option>
+                                  <option
+                                    value="CPV"
+                                  >
+                                    Cabo Verde
+                                  </option>
+                                  <option
+                                    value="KHM"
+                                  >
+                                    Cambodia
+                                  </option>
+                                  <option
+                                    value="CMR"
+                                  >
+                                    Cameroon
+                                  </option>
+                                  <option
+                                    value="CAN"
+                                  >
+                                    Canada
+                                  </option>
+                                  <option
+                                    value="CYM"
+                                  >
+                                    Cayman Islands
+                                  </option>
+                                  <option
+                                    value="CAF"
+                                  >
+                                    Central African Republic
+                                  </option>
+                                  <option
+                                    value="TCD"
+                                  >
+                                    Chad
+                                  </option>
+                                  <option
+                                    value="CHL"
+                                  >
+                                    Chile
+                                  </option>
+                                  <option
+                                    value="CHN"
+                                  >
+                                    China
+                                  </option>
+                                  <option
+                                    value="HKG"
+                                  >
+                                    China, Hong Kong Special Administrative Region
+                                  </option>
+                                  <option
+                                    value="MAC"
+                                  >
+                                    China, Macao Special Administrative Region
+                                  </option>
+                                  <option
+                                    value="COL"
+                                  >
+                                    Colombia
+                                  </option>
+                                  <option
+                                    value="COM"
+                                  >
+                                    Comoros
+                                  </option>
+                                  <option
+                                    value="COG"
+                                  >
+                                    Congo
+                                  </option>
+                                  <option
+                                    value="COK"
+                                  >
+                                    Cook Islands
+                                  </option>
+                                  <option
+                                    value="CRI"
+                                  >
+                                    Costa Rica
+                                  </option>
+                                  <option
+                                    value="CIV"
+                                  >
+                                    Côte d'Ivoire
+                                  </option>
+                                  <option
+                                    value="HRV"
+                                  >
+                                    Croatia
+                                  </option>
+                                  <option
+                                    value="CUB"
+                                  >
+                                    Cuba
+                                  </option>
+                                  <option
+                                    value="CUW"
+                                  >
+                                    Curaçao
+                                  </option>
+                                  <option
+                                    value="CYP"
+                                  >
+                                    Cyprus
+                                  </option>
+                                  <option
+                                    value="CZE"
+                                  >
+                                    Czech Republic
+                                  </option>
+                                  <option
+                                    value="PRK"
+                                  >
+                                    Democratic People's Republic of Korea
+                                  </option>
+                                  <option
+                                    value="COD"
+                                  >
+                                    Democratic Republic of the Congo
+                                  </option>
+                                  <option
+                                    value="DNK"
+                                  >
+                                    Denmark
+                                  </option>
+                                  <option
+                                    value="DJI"
+                                  >
+                                    Djibouti
+                                  </option>
+                                  <option
+                                    value="DMA"
+                                  >
+                                    Dominica
+                                  </option>
+                                  <option
+                                    value="DOM"
+                                  >
+                                    Dominican Republic
+                                  </option>
+                                  <option
+                                    value="ECU"
+                                  >
+                                    Ecuador
+                                  </option>
+                                  <option
+                                    value="EGY"
+                                  >
+                                    Egypt
+                                  </option>
+                                  <option
+                                    value="SLV"
+                                  >
+                                    El Salvador
+                                  </option>
+                                  <option
+                                    value="GNQ"
+                                  >
+                                    Equatorial Guinea
+                                  </option>
+                                  <option
+                                    value="ERI"
+                                  >
+                                    Eritrea
+                                  </option>
+                                  <option
+                                    value="EST"
+                                  >
+                                    Estonia
+                                  </option>
+                                  <option
+                                    value="ETH"
+                                  >
+                                    Ethiopia
+                                  </option>
+                                  <option
+                                    value="FRO"
+                                  >
+                                    Faeroe Islands
+                                  </option>
+                                  <option
+                                    value="FLK"
+                                  >
+                                    Falkland Islands (Malvinas)
+                                  </option>
+                                  <option
+                                    value="FJI"
+                                  >
+                                    Fiji
+                                  </option>
+                                  <option
+                                    value="FIN"
+                                  >
+                                    Finland
+                                  </option>
+                                  <option
+                                    value="FRA"
+                                  >
+                                    France
+                                  </option>
+                                  <option
+                                    value="GUF"
+                                  >
+                                    French Guiana
+                                  </option>
+                                  <option
+                                    value="PYF"
+                                  >
+                                    French Polynesia
+                                  </option>
+                                  <option
+                                    value="GAB"
+                                  >
+                                    Gabon
+                                  </option>
+                                  <option
+                                    value="GMB"
+                                  >
+                                    Gambia
+                                  </option>
+                                  <option
+                                    value="GEO"
+                                  >
+                                    Georgia
+                                  </option>
+                                  <option
+                                    value="DEU"
+                                  >
+                                    Germany
+                                  </option>
+                                  <option
+                                    value="GHA"
+                                  >
+                                    Ghana
+                                  </option>
+                                  <option
+                                    value="GIB"
+                                  >
+                                    Gibraltar
+                                  </option>
+                                  <option
+                                    value="GRC"
+                                  >
+                                    Greece
+                                  </option>
+                                  <option
+                                    value="GRL"
+                                  >
+                                    Greenland
+                                  </option>
+                                  <option
+                                    value="GRD"
+                                  >
+                                    Grenada
+                                  </option>
+                                  <option
+                                    value="GLP"
+                                  >
+                                    Guadeloupe
+                                  </option>
+                                  <option
+                                    value="GUM"
+                                  >
+                                    Guam
+                                  </option>
+                                  <option
+                                    value="GTM"
+                                  >
+                                    Guatemala
+                                  </option>
+                                  <option
+                                    value="GGY"
+                                  >
+                                    Guernsey
+                                  </option>
+                                  <option
+                                    value="GIN"
+                                  >
+                                    Guinea
+                                  </option>
+                                  <option
+                                    value="GNB"
+                                  >
+                                    Guinea-Bissau
+                                  </option>
+                                  <option
+                                    value="GUY"
+                                  >
+                                    Guyana
+                                  </option>
+                                  <option
+                                    value="HTI"
+                                  >
+                                    Haiti
+                                  </option>
+                                  <option
+                                    value="VAT"
+                                  >
+                                    Holy See
+                                  </option>
+                                  <option
+                                    value="HND"
+                                  >
+                                    Honduras
+                                  </option>
+                                  <option
+                                    value="HUN"
+                                  >
+                                    Hungary
+                                  </option>
+                                  <option
+                                    value="ISL"
+                                  >
+                                    Iceland
+                                  </option>
+                                  <option
+                                    value="IND"
+                                  >
+                                    India
+                                  </option>
+                                  <option
+                                    value="IDN"
+                                  >
+                                    Indonesia
+                                  </option>
+                                  <option
+                                    value="IRN"
+                                  >
+                                    Iran (Islamic Republic of)
+                                  </option>
+                                  <option
+                                    value="IRQ"
+                                  >
+                                    Iraq
+                                  </option>
+                                  <option
+                                    value="IRL"
+                                  >
+                                    Ireland
+                                  </option>
+                                  <option
+                                    value="IMN"
+                                  >
+                                    Isle of Man
+                                  </option>
+                                  <option
+                                    value="ISR"
+                                  >
+                                    Israel
+                                  </option>
+                                  <option
+                                    value="ITA"
+                                  >
+                                    Italy
+                                  </option>
+                                  <option
+                                    value="JAM"
+                                  >
+                                    Jamaica
+                                  </option>
+                                  <option
+                                    value="JPN"
+                                  >
+                                    Japan
+                                  </option>
+                                  <option
+                                    value="JEY"
+                                  >
+                                    Jersey
+                                  </option>
+                                  <option
+                                    value="JOR"
+                                  >
+                                    Jordan
+                                  </option>
+                                  <option
+                                    value="KAZ"
+                                  >
+                                    Kazakhstan
+                                  </option>
+                                  <option
+                                    value="KEN"
+                                  >
+                                    Kenya
+                                  </option>
+                                  <option
+                                    value="KIR"
+                                  >
+                                    Kiribati
+                                  </option>
+                                  <option
+                                    value="KWT"
+                                  >
+                                    Kuwait
+                                  </option>
+                                  <option
+                                    value="KGZ"
+                                  >
+                                    Kyrgyzstan
+                                  </option>
+                                  <option
+                                    value="LAO"
+                                  >
+                                    Lao People's Democratic Republic
+                                  </option>
+                                  <option
+                                    value="LVA"
+                                  >
+                                    Latvia
+                                  </option>
+                                  <option
+                                    value="LBN"
+                                  >
+                                    Lebanon
+                                  </option>
+                                  <option
+                                    value="LSO"
+                                  >
+                                    Lesotho
+                                  </option>
+                                  <option
+                                    value="LBR"
+                                  >
+                                    Liberia
+                                  </option>
+                                  <option
+                                    value="LBY"
+                                  >
+                                    Libya
+                                  </option>
+                                  <option
+                                    value="LIE"
+                                  >
+                                    Liechtenstein
+                                  </option>
+                                  <option
+                                    value="LTU"
+                                  >
+                                    Lithuania
+                                  </option>
+                                  <option
+                                    value="LUX"
+                                  >
+                                    Luxembourg
+                                  </option>
+                                  <option
+                                    value="MDG"
+                                  >
+                                    Madagascar
+                                  </option>
+                                  <option
+                                    value="MWI"
+                                  >
+                                    Malawi
+                                  </option>
+                                  <option
+                                    value="MYS"
+                                  >
+                                    Malaysia
+                                  </option>
+                                  <option
+                                    value="MDV"
+                                  >
+                                    Maldives
+                                  </option>
+                                  <option
+                                    value="MLI"
+                                  >
+                                    Mali
+                                  </option>
+                                  <option
+                                    value="MLT"
+                                  >
+                                    Malta
+                                  </option>
+                                  <option
+                                    value="MHL"
+                                  >
+                                    Marshall Islands
+                                  </option>
+                                  <option
+                                    value="MTQ"
+                                  >
+                                    Martinique
+                                  </option>
+                                  <option
+                                    value="MRT"
+                                  >
+                                    Mauritania
+                                  </option>
+                                  <option
+                                    value="MUS"
+                                  >
+                                    Mauritius
+                                  </option>
+                                  <option
+                                    value="MYT"
+                                  >
+                                    Mayotte
+                                  </option>
+                                  <option
+                                    value="MEX"
+                                  >
+                                    Mexico
+                                  </option>
+                                  <option
+                                    value="FSM"
+                                  >
+                                    Micronesia (Federated States of)
+                                  </option>
+                                  <option
+                                    value="MCO"
+                                  >
+                                    Monaco
+                                  </option>
+                                  <option
+                                    value="MNG"
+                                  >
+                                    Mongolia
+                                  </option>
+                                  <option
+                                    value="MNE"
+                                  >
+                                    Montenegro
+                                  </option>
+                                  <option
+                                    value="MSR"
+                                  >
+                                    Montserrat
+                                  </option>
+                                  <option
+                                    value="MAR"
+                                  >
+                                    Morocco
+                                  </option>
+                                  <option
+                                    value="MOZ"
+                                  >
+                                    Mozambique
+                                  </option>
+                                  <option
+                                    value="MMR"
+                                  >
+                                    Myanmar
+                                  </option>
+                                  <option
+                                    value="NAM"
+                                  >
+                                    Namibia
+                                  </option>
+                                  <option
+                                    value="NRU"
+                                  >
+                                    Nauru
+                                  </option>
+                                  <option
+                                    value="NPL"
+                                  >
+                                    Nepal
+                                  </option>
+                                  <option
+                                    value="NLD"
+                                  >
+                                    Netherlands
+                                  </option>
+                                  <option
+                                    value="NCL"
+                                  >
+                                    New Caledonia
+                                  </option>
+                                  <option
+                                    value="NZL"
+                                  >
+                                    New Zealand
+                                  </option>
+                                  <option
+                                    value="NIC"
+                                  >
+                                    Nicaragua
+                                  </option>
+                                  <option
+                                    value="NER"
+                                  >
+                                    Niger
+                                  </option>
+                                  <option
+                                    value="NGA"
+                                  >
+                                    Nigeria
+                                  </option>
+                                  <option
+                                    value="NIU"
+                                  >
+                                    Niue
+                                  </option>
+                                  <option
+                                    value="NFK"
+                                  >
+                                    Norfolk Island
+                                  </option>
+                                  <option
+                                    value="MNP"
+                                  >
+                                    Northern Mariana Islands
+                                  </option>
+                                  <option
+                                    value="NOR"
+                                  >
+                                    Norway
+                                  </option>
+                                  <option
+                                    value="OMN"
+                                  >
+                                    Oman
+                                  </option>
+                                  <option
+                                    value="PAK"
+                                  >
+                                    Pakistan
+                                  </option>
+                                  <option
+                                    value="PLW"
+                                  >
+                                    Palau
+                                  </option>
+                                  <option
+                                    value="PAN"
+                                  >
+                                    Panama
+                                  </option>
+                                  <option
+                                    value="PNG"
+                                  >
+                                    Papua New Guinea
+                                  </option>
+                                  <option
+                                    value="PRY"
+                                  >
+                                    Paraguay
+                                  </option>
+                                  <option
+                                    value="PER"
+                                  >
+                                    Peru
+                                  </option>
+                                  <option
+                                    value="PHL"
+                                  >
+                                    Philippines
+                                  </option>
+                                  <option
+                                    value="PCN"
+                                  >
+                                    Pitcairn
+                                  </option>
+                                  <option
+                                    value="POL"
+                                  >
+                                    Poland
+                                  </option>
+                                  <option
+                                    value="PRT"
+                                  >
+                                    Portugal
+                                  </option>
+                                  <option
+                                    value="PRI"
+                                  >
+                                    Puerto Rico
+                                  </option>
+                                  <option
+                                    value="QAT"
+                                  >
+                                    Qatar
+                                  </option>
+                                  <option
+                                    value="KOR"
+                                  >
+                                    Republic of Korea
+                                  </option>
+                                  <option
+                                    value="MDA"
+                                  >
+                                    Republic of Moldova
+                                  </option>
+                                  <option
+                                    value="REU"
+                                  >
+                                    Réunion
+                                  </option>
+                                  <option
+                                    value="ROU"
+                                  >
+                                    Romania
+                                  </option>
+                                  <option
+                                    value="RUS"
+                                  >
+                                    Russian Federation
+                                  </option>
+                                  <option
+                                    value="RWA"
+                                  >
+                                    Rwanda
+                                  </option>
+                                  <option
+                                    value="BLM"
+                                  >
+                                    Saint-Barthélemy
+                                  </option>
+                                  <option
+                                    value="SHN"
+                                  >
+                                    Saint Helena
+                                  </option>
+                                  <option
+                                    value="KNA"
+                                  >
+                                    Saint Kitts and Nevis
+                                  </option>
+                                  <option
+                                    value="LCA"
+                                  >
+                                    Saint Lucia
+                                  </option>
+                                  <option
+                                    value="MAF"
+                                  >
+                                    Saint-Martin (French part)
+                                  </option>
+                                  <option
+                                    value="SPM"
+                                  >
+                                    Saint Pierre and Miquelon
+                                  </option>
+                                  <option
+                                    value="VCT"
+                                  >
+                                    Saint Vincent and the Grenadines
+                                  </option>
+                                  <option
+                                    value="WSM"
+                                  >
+                                    Samoa
+                                  </option>
+                                  <option
+                                    value="SMR"
+                                  >
+                                    San Marino
+                                  </option>
+                                  <option
+                                    value="STP"
+                                  >
+                                    Sao Tome and Principe
+                                  </option>
+                                  <option
+                                    value="SAU"
+                                  >
+                                    Saudi Arabia
+                                  </option>
+                                  <option
+                                    value="SEN"
+                                  >
+                                    Senegal
+                                  </option>
+                                  <option
+                                    value="SRB"
+                                  >
+                                    Serbia
+                                  </option>
+                                  <option
+                                    value="SYC"
+                                  >
+                                    Seychelles
+                                  </option>
+                                  <option
+                                    value="SLE"
+                                  >
+                                    Sierra Leone
+                                  </option>
+                                  <option
+                                    value="SGP"
+                                  >
+                                    Singapore
+                                  </option>
+                                  <option
+                                    value="SXM"
+                                  >
+                                    Sint Maarten (Dutch part)
+                                  </option>
+                                  <option
+                                    value="SVK"
+                                  >
+                                    Slovakia
+                                  </option>
+                                  <option
+                                    value="SVN"
+                                  >
+                                    Slovenia
+                                  </option>
+                                  <option
+                                    value="SLB"
+                                  >
+                                    Solomon Islands
+                                  </option>
+                                  <option
+                                    value="SOM"
+                                  >
+                                    Somalia
+                                  </option>
+                                  <option
+                                    value="ZAF"
+                                  >
+                                    South Africa
+                                  </option>
+                                  <option
+                                    value="SSD"
+                                  >
+                                    South Sudan
+                                  </option>
+                                  <option
+                                    value="ESP"
+                                  >
+                                    Spain
+                                  </option>
+                                  <option
+                                    value="LKA"
+                                  >
+                                    Sri Lanka
+                                  </option>
+                                  <option
+                                    value="PSE"
+                                  >
+                                    State of Palestine
+                                  </option>
+                                  <option
+                                    value="SDN"
+                                  >
+                                    Sudan
+                                  </option>
+                                  <option
+                                    value="SUR"
+                                  >
+                                    Suriname
+                                  </option>
+                                  <option
+                                    value="SJM"
+                                  >
+                                    Svalbard and Jan Mayen Islands
+                                  </option>
+                                  <option
+                                    value="SWZ"
+                                  >
+                                    Swaziland
+                                  </option>
+                                  <option
+                                    value="SWE"
+                                  >
+                                    Sweden
+                                  </option>
+                                  <option
+                                    value="CHE"
+                                  >
+                                    Switzerland
+                                  </option>
+                                  <option
+                                    value="SYR"
+                                  >
+                                    Syrian Arab Republic
+                                  </option>
+                                  <option
+                                    value="TWAN"
+                                  >
+                                    Taiwan
+                                  </option>
+                                  <option
+                                    value="TJK"
+                                  >
+                                    Tajikistan
+                                  </option>
+                                  <option
+                                    value="THA"
+                                  >
+                                    Thailand
+                                  </option>
+                                  <option
+                                    value="MKD"
+                                  >
+                                    The former Yugoslav Republic of Macedonia
+                                  </option>
+                                  <option
+                                    value="TLS"
+                                  >
+                                    Timor-Leste
+                                  </option>
+                                  <option
+                                    value="TGO"
+                                  >
+                                    Togo
+                                  </option>
+                                  <option
+                                    value="TKL"
+                                  >
+                                    Tokelau
+                                  </option>
+                                  <option
+                                    value="TON"
+                                  >
+                                    Tonga
+                                  </option>
+                                  <option
+                                    value="TTO"
+                                  >
+                                    Trinidad and Tobago
+                                  </option>
+                                  <option
+                                    value="TUN"
+                                  >
+                                    Tunisia
+                                  </option>
+                                  <option
+                                    value="TUR"
+                                  >
+                                    Turkey
+                                  </option>
+                                  <option
+                                    value="TKM"
+                                  >
+                                    Turkmenistan
+                                  </option>
+                                  <option
+                                    value="TCA"
+                                  >
+                                    Turks and Caicos Islands
+                                  </option>
+                                  <option
+                                    value="TUV"
+                                  >
+                                    Tuvalu
+                                  </option>
+                                  <option
+                                    value="UGA"
+                                  >
+                                    Uganda
+                                  </option>
+                                  <option
+                                    value="UKR"
+                                  >
+                                    Ukraine
+                                  </option>
+                                  <option
+                                    value="ARE"
+                                  >
+                                    United Arab Emirates
+                                  </option>
+                                  <option
+                                    value="GBR"
+                                  >
+                                    United Kingdom of Great Britain and Northern Ireland
+                                  </option>
+                                  <option
+                                    value="TZA"
+                                  >
+                                    United Republic of Tanzania
+                                  </option>
+                                  <option
+                                    value="URY"
+                                  >
+                                    Uruguay
+                                  </option>
+                                  <option
+                                    value="UZB"
+                                  >
+                                    Uzbekistan
+                                  </option>
+                                  <option
+                                    value="VUT"
+                                  >
+                                    Vanuatu
+                                  </option>
+                                  <option
+                                    value="VEN"
+                                  >
+                                    Venezuela (Bolivarian Republic of)
+                                  </option>
+                                  <option
+                                    value="VNM"
+                                  >
+                                    Vietnam
+                                  </option>
+                                  <option
+                                    value="WLF"
+                                  >
+                                    Wallis and Futuna Islands
+                                  </option>
+                                  <option
+                                    value="ESH"
+                                  >
+                                    Western Sahara
+                                  </option>
+                                  <option
+                                    value="YEM"
+                                  >
+                                    Yemen
+                                  </option>
+                                  <option
+                                    value="ZMB"
+                                  >
+                                    Zambia
+                                  </option>
+                                  <option
+                                    value="ZWE"
+                                  >
+                                    Zimbabwe
+                                  </option>
+                                </select>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div
+                        className="emotion-7"
+                      >
+                        <div
+                          className="fs-c m-b300"
+                        >
+                          <div
+                            className="sel"
+                          >
+                            <div>
+                              <label
+                                className="txt-l "
+                                htmlFor="select-3699612000"
+                                style={Object {}}
+                              >
+                                <span
+                                  style={
+                                    Object {
+                                      "marginRight": "0.5em",
+                                      "whiteSpace": "nowrap",
+                                    }
+                                  }
+                                >
+                                  This Marriage is your ...
+                                </span>
+                              </label>
+                              <div
+                                className="sel-c  "
+                              >
+                                <select
+                                  aria-label=""
+                                  className="sel-f  "
+                                  id="select-3699612000"
+                                  name="partnerB_marriageNumb"
+                                  onChange={[Function]}
+                                  value=""
+                                >
+                                  <option />
+                                  <option
+                                    value="1st"
+                                  >
+                                    1st
+                                  </option>
+                                  <option
+                                    value="2nd"
+                                  >
+                                    2nd
+                                  </option>
+                                  <option
+                                    value="3rd"
+                                  >
+                                    3rd
+                                  </option>
+                                  <option
+                                    value="4th"
+                                  >
+                                    4th
+                                  </option>
+                                  <option
+                                    value="5th"
+                                  >
+                                    5th
+                                  </option>
+                                  <option
+                                    value="6th"
+                                  >
+                                    6th
+                                  </option>
+                                  <option
+                                    value="7th"
+                                  >
+                                    7th
+                                  </option>
+                                  <option
+                                    value="8th"
+                                  >
+                                    8th
+                                  </option>
+                                  <option
+                                    value="9th"
+                                  >
+                                    9th
+                                  </option>
+                                </select>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-29"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Were you ever a member of a ...
+                      </h2>
+                      <div
+                        className="emotion-28"
+                      >
+                        <div
+                          aria-label=""
+                          role="group"
+                        >
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_partnershipType"
+                              onChange={[Function]}
+                              type="radio"
+                              value="N/A"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Does Not Apply
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_partnershipType"
+                              onChange={[Function]}
+                              type="radio"
+                              value="CIV"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Civil Unions
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_partnershipType"
+                              onChange={[Function]}
+                              type="radio"
+                              value="DOM"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Domestic Partnership
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-32"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Parents
+                      </h2>
+                    </div>
+                    <div
+                      className="emotion-35"
+                      style={
+                        Object {
+                          "marginBottom": "2.5em",
+                        }
+                      }
+                    >
+                      <h4
+                        className="emotion-4"
+                      >
+                        Name of Parent 1/Mother
+                      </h4>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-2217447742"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1/Mother - First Middle Last
+                          </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-2217447742"
+                          maxLength={38}
+                          name="partnerB_parentA_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-1925864057"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1/Mother - Maiden Name/Surname at Birth or Adoption
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          This should be your parent's last name at the time of their birth or adoption.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-1925864057"
+                          maxLength={38}
+                          name="partnerB_parentA_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-35"
+                      style={
+                        Object {
+                          "marginBottom": "2.5em",
+                        }
+                      }
+                    >
+                      <h4
+                        className="emotion-4"
+                      >
+                        Name of Parent 2/Father
+                      </h4>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-738420088"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 2/Father - First Middle Last
+                          </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-738420088"
+                          maxLength={38}
+                          name="partnerB_parentB_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-2538005951"
+                          style={Object {}}
+                        >
+                          <span
+                            style={
+                              Object {
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 2/Father - Maiden Name/Surname at Birth or Adoption
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-5"
+                        >
+                          This should be your parent's last name at the time of their birth or adoption.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-2538005951"
+                          maxLength={38}
+                          name="partnerB_parentB_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-19"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Were your parents married at the time of your birth?
+                      </h2>
+                      <div
+                        className="emotion-28"
+                      >
+                        <div
+                          className="emotion-41"
+                        >
+                          <div
+                            aria-label=""
+                            role="group"
+                          >
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_parentsMarriedAtBirth"
+                                onChange={[Function]}
+                                type="radio"
+                                value="1"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_parentsMarriedAtBirth"
+                                onChange={[Function]}
+                                type="radio"
+                                value="0"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-16"
+                  >
+                    <div
+                      className="emotion-19"
+                    >
+                      <h2
+                        className="emotion-4"
+                      >
+                        Related by blood or marriage to Person B
+                      </h2>
+                      <div
+                        className="emotion-28"
+                      >
+                        <div
+                          className="emotion-41"
+                        >
+                          <div
+                            aria-label=""
+                            role="group"
+                          >
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_bloodRelation"
+                                onChange={[Function]}
+                                type="radio"
+                                value="1"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_bloodRelation"
+                                onChange={[Function]}
+                                type="radio"
+                                value="0"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div
+                className="g g--mr emotion-53"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                >
+                  <button
+                    className="lnk emotion-52"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "fontStyle": "italic",
+                          "whiteSpace": "nowrap",
+                        }
+                      }
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={
+                          Object {
+                            "fontStyle": "normal",
+                          }
+                        }
+                      >
+                        ←
+                      </span>
+                       
+                      Back
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={true}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    NEXT
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 4. Contact Info 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-15 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-15 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-15 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-14 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-14 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-14 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-17 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-17 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-17 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-17 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-17 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-16 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-11 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-11 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-10 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-10 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-10 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-10 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-10 input::-ms-clear {
+  display: none;
+}
+
+.emotion-10 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-10.disabled {
+  opacity: 0.4;
+}
+
+.emotion-10.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed:hover,
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.completed .current,
+.emotion-3 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted,
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+.emotion-18 {
+  padding: 0px;
+}
+
+.css-1anrsns .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-908v3n .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-12 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-12 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-12 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-12 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-12 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-12 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-12 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1pys2nt .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-k0050r .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1n1xjtd .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-13 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-13 h4 {
+  font-size: 1.25rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-8 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 > div {
+    width: 50%;
+  }
+
+  .emotion-8 .txt-f {
+    width: 90%;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-8 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-8 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-8 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-8 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-8 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 4 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Contact Info
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-18"
+            >
+              <div
+                className="emotion-15"
+              >
+                <fieldset
+                  className=" emotion-14"
+                >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Contact Information
+                    </h2>
+                  </legend>
+                  <div
+                    className="emotion-13"
+                  >
+                    <div
+                      className="emotion-8"
+                    >
+                      <div>
+                        <div>
+                          <label
+                            className="txt-l "
+                            htmlFor="input-1267882554"
+                            style={Object {}}
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              Phone Number
+                            </span>
+                            <span
+                              aria-hidden="true"
+                              className="t--req"
+                            >
+                              Required
+                            </span>
+                          </label>
+                          <label
+                            className="notice emotion-5"
+                          >
+                            Numbers only, no spaces or dashes needed.
+                          </label>
+                          <input
+                            aria-label=""
+                            className="txt-f  "
+                            id="input-1267882554"
+                            maxLength={14}
+                            minLength={10}
+                            name="dayPhone"
+                            onChange={[Function]}
+                            onKeyDown={[Function]}
+                            placeholder="(___) ___-____"
+                            required={true}
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            className="t--subinfo t--err m-b100 m-t100"
+                          >
+                             
+                          </div>
+                        </div>
+                      </div>
+                      <div>
+                        <div>
+                          <label
+                            className="txt-l "
+                            htmlFor="input-2778663327"
+                            style={Object {}}
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              EMail Address
+                            </span>
+                            <span
+                              aria-hidden="true"
+                              className="t--req"
+                            >
+                              Required
+                            </span>
+                          </label>
+                          <label
+                            className="notice emotion-5"
+                          >
+                            
+                          </label>
+                          <input
+                            aria-label=""
+                            className="txt-f  "
+                            id="input-2778663327"
+                            name="email"
+                            onChange={[Function]}
+                            required={true}
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            className="t--subinfo t--err m-b100 m-t100"
+                          >
+                             
+                          </div>
+                        </div>
+                        <div>
+                          <label
+                            className="txt-l "
+                            htmlFor="input-1813726221"
+                            style={Object {}}
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              Confirm EMail Address
+                            </span>
+                            <span
+                              aria-hidden="true"
+                              className="t--req"
+                            >
+                              Required
+                            </span>
+                          </label>
+                          <label
+                            className="notice emotion-5"
+                          >
+                            
+                          </label>
+                          <input
+                            aria-label=""
+                            className="txt-f  "
+                            id="input-1813726221"
+                            name="emailConfirm"
+                            onChange={[Function]}
+                            required={true}
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            className="t--subinfo t--err m-b100 m-t100"
+                          >
+                             
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-12"
+                      style={
+                        Object {
+                          "paddingTop": "1.5rem",
+                        }
+                      }
+                    >
+                      <fieldset
+                        className="emotion-11"
+                      >
+                        <div>
+                          <legend
+                            style={
+                              Object {
+                                "width": "100%",
+                              }
+                            }
+                          >
+                            <h2
+                              className="emotion-4"
+                              style={
+                                Object {
+                                  "marginBottom": "1.5rem",
+                                }
+                              }
+                            >
+                              What is your appointment date?
+                            </h2>
+                          </legend>
+                          <div
+                            className=" emotion-10"
+                          >
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="appointmentDate-month"
+                              >
+                                Month
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="appointmentDate-month"
+                                max="12"
+                                maxLength={2}
+                                min="1"
+                                name="month"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="MM"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="appointmentDate-day"
+                              >
+                                Day
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="appointmentDate-day"
+                                max="31"
+                                maxLength={2}
+                                min="1"
+                                name="day"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="DD"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="appointmentDate-year"
+                              >
+                                Year
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="appointmentDate-year"
+                                max="9999"
+                                maxLength={4}
+                                min={2024}
+                                name="year"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="YYYY"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </fieldset>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div
+                className="g g--mr emotion-17"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                >
+                  <button
+                    className="lnk emotion-16"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "fontStyle": "italic",
+                          "whiteSpace": "nowrap",
+                        }
+                      }
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={
+                          Object {
+                            "fontStyle": "normal",
+                          }
+                        }
+                      >
+                        ←
+                      </span>
+                       
+                      Back
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={true}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    NEXT
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Full Form 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-74 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-74 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-74 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-76 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-76 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-76 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-76 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-76 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-75 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed:hover,
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.completed .current,
+.emotion-3 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted,
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+.emotion-77 {
+  padding: 0px;
+}
+
+.emotion-35 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-71 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-71 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-71 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-71 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-71 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-71 .notice {
+  font-size: 0.7em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 1% 0 1.5%;
+  line-height: 1.5em;
+}
+
+.emotion-71 .css-content-psedo:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-73 {
+  font-size: 1.5em;
+  line-height: 1.5em;
+  margin-top: 1em;
+  font-size: 1.35em;
+}
+
+.emotion-73 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-73 h4 {
+  font-size: 1.25rem;
+}
+
+.emotion-73 label {
+  font-weight: bold;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+  font-size: 2.5rem;
+  margin-bottom: 1em;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-5 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 0.5em;
+}
+
+.emotion-5.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-5.secondary em {
+  font-size: 1rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 {
+    clear: both;
+    min-height: 1px;
+    overflow: hidden;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 {
+    width: 49%;
+    float: left;
+    margin-right: 1%;
+    margin-bottom: 0.5em;
+  }
+}
+
+.emotion-16 {
+  margin-bottom: 0.5em;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-16 {
+    clear: both;
+    min-height: 1px;
+    overflow: hidden;
+  }
+}
+
+.emotion-16 h2 {
+  font-size: 1.25em;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-17 {
+  margin-bottom: 0.5em;
+}
+
+.emotion-34 {
+  margin-bottom: 0.5em;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-34 {
+    clear: both;
+    min-height: 1px;
+    overflow: hidden;
+  }
+}
+
+.emotion-34 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-34 h4 {
+  font-size: 1.25rem;
+}
+
+.emotion-34 h2 {
+  font-size: 1.25em;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="completed  "
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="completed  current"
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted focused "
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted  "
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 5 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Review
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-77"
+            >
+              <div
+                className="emotion-74"
+              >
+                <div
+                  className="emotion-73"
+                >
+                  <p>
+                    Please review the details below. If you notice any errors, click the "back" button at the bottom of your screen and correct your information before submitting this application.
+                  </p>
+                  <h1
+                    className="emotion-4"
+                  >
+                    Review Information
+                  </h1>
+                  <div>
+                    <div
+                      className="emotion-35"
+                    >
+                      <h2
+                        className="emotion-5"
+                        style={
+                          Object {
+                            "fontSize": "2rem",
+                            "textDecoration": "none",
+                          }
+                        }
+                      >
+                        Person 
+                        A
+                      </h2>
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            First Name: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Middle Name: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Name: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Name / Surname: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-16"
+                      >
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Date of Birth: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Age: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Occupation: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Address: 
+                          </label>
+                          
+              ,
+              
+               
+               
+              
+            
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-16"
+                      >
+                        <h2
+                          className="emotion-17"
+                        >
+                          Birthplace
+                        </h2>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            City: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Country: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-16"
+                      >
+                        <h2
+                          className="emotion-17"
+                        >
+                          Parents
+                        </h2>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Parent 1/Mother: 
+                          </label>
+                          /
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Parent 2/Father: 
+                          </label>
+                          /
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Were your parents married at the time of your birth?:
+                          </label>
+                           
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-34"
+                      >
+                        <h2
+                          className="emotion-17"
+                        >
+                          Marriage
+                        </h2>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Marriage Number: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Marriage Status: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Marriage Resolution: 
+                          </label>
+                          
+              
+            
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Current Partnership Type: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Civil Union Or Domestic Partnership Dissolved: 
+                          </label>
+                          
+              
+            
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Partnership State: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Blood Relation to Partner?: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <div
+                      className="emotion-35"
+                    >
+                      <h2
+                        className="emotion-5"
+                        style={
+                          Object {
+                            "fontSize": "2rem",
+                            "textDecoration": "none",
+                          }
+                        }
+                      >
+                        Person 
+                        B
+                      </h2>
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            First Name: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Middle Name: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Name: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Name / Surname: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-16"
+                      >
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Date of Birth: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Age: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Occupation: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Address: 
+                          </label>
+                          
+              ,
+              
+               
+               
+              
+            
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-16"
+                      >
+                        <h2
+                          className="emotion-17"
+                        >
+                          Birthplace
+                        </h2>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            City: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Country: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-16"
+                      >
+                        <h2
+                          className="emotion-17"
+                        >
+                          Parents
+                        </h2>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Parent 1/Mother: 
+                          </label>
+                          /
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Parent 2/Father: 
+                          </label>
+                          /
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Were your parents married at the time of your birth?:
+                          </label>
+                           
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-34"
+                      >
+                        <h2
+                          className="emotion-17"
+                        >
+                          Marriage
+                        </h2>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Marriage Number: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Marriage Status: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Last Marriage Resolution: 
+                          </label>
+                          
+              
+            
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Current Partnership Type: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Civil Union Or Domestic Partnership Dissolved: 
+                          </label>
+                          
+              
+            
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Partnership State: 
+                          </label>
+                          
+                        </div>
+                        <div
+                          className="emotion-6"
+                        >
+                          <label>
+                            Blood Relation to Partner?: 
+                          </label>
+                          
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <h1
+                    className="emotion-4"
+                  >
+                    Contact Information
+                  </h1>
+                  <div
+                    className="emotion-35"
+                  >
+                    <div
+                      className="emotion-8"
+                    >
+                      <div
+                        className="emotion-6"
+                      >
+                        <label>
+                          Email: 
+                        </label>
+                        
+                      </div>
+                      <div
+                        className="emotion-6"
+                      >
+                        <label>
+                          Phone #: 
+                        </label>
+                        
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-71"
+                    >
+                      <label>
+                        Appointment Date: 
+                      </label>
+                      
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="g g--mr emotion-76"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                >
+                  <button
+                    className="lnk emotion-75"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "fontStyle": "italic",
+                          "whiteSpace": "nowrap",
+                        }
+                      }
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={
+                          Object {
+                            "fontStyle": "normal",
+                          }
+                        }
+                      >
+                        ←
+                      </span>
+                       
+                      Back
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    Submit
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Person Info View 1`] = `
+.emotion-31 {
+  margin-bottom: 2.5em;
+}
+
+.emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 0.5em;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-3 {
+    clear: both;
+    min-height: 1px;
+    overflow: hidden;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-1 {
+    width: 49%;
+    float: left;
+    margin-right: 1%;
+    margin-bottom: 0.5em;
+  }
+}
+
+.emotion-11 {
+  margin-bottom: 0.5em;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    clear: both;
+    min-height: 1px;
+    overflow: hidden;
+  }
+}
+
+.emotion-11 h2 {
+  font-size: 1.25em;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.emotion-12 {
+  margin-bottom: 0.5em;
+}
+
+.emotion-30 {
+  margin-bottom: 0.5em;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-30 {
+    clear: both;
+    min-height: 1px;
+    overflow: hidden;
+  }
+}
+
+.emotion-30 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-30 h4 {
+  font-size: 1.25rem;
+}
+
+.emotion-30 h2 {
+  font-size: 1.25em;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+<div>
+  <div
+    className="emotion-31"
+  >
+    <h2
+      className="emotion-0"
+      style={
+        Object {
+          "fontSize": "2rem",
+          "textDecoration": "none",
+        }
+      }
+    >
+      Person 
+      A
+    </h2>
+    <div
+      className="emotion-3"
+    >
+      <div
+        className="emotion-1"
+      >
+        <label>
+          First Name: 
+        </label>
+        Phillip
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Middle Name: 
+        </label>
+        Benton
+      </div>
+    </div>
+    <div
+      className="emotion-3"
+    >
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Last Name: 
+        </label>
+        Kelly
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Last Name / Surname: 
+        </label>
+        Kelly
+      </div>
+    </div>
+    <div
+      className="emotion-11"
+    >
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Date of Birth: 
+        </label>
+        Sep 23, 1982
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Age: 
+        </label>
+        41
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Occupation: 
+        </label>
+        Developer
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Address: 
+        </label>
+        
+          100 Howard Ave. Apt 2,
+          Boston
+          MA 
+          02125 
+           USA
+        
+      </div>
+    </div>
+    <div
+      className="emotion-11"
+    >
+      <h2
+        className="emotion-12"
+      >
+        Birthplace
+      </h2>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          City: 
+        </label>
+        La Ceiba
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Country: 
+        </label>
+         HONDURAS
+      </div>
+    </div>
+    <div
+      className="emotion-11"
+    >
+      <h2
+        className="emotion-12"
+      >
+        Parents
+      </h2>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Parent 1/Mother: 
+        </label>
+        Mother F. Mother L.
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Parent 2/Father: 
+        </label>
+        Father F. Father L.
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Were your parents married at the time of your birth?:
+        </label>
+         No
+      </div>
+    </div>
+    <div
+      className="emotion-30"
+    >
+      <h2
+        className="emotion-12"
+      >
+        Marriage
+      </h2>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Marriage Number: 
+        </label>
+        2nd
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Last Marriage Status: 
+        </label>
+        Void or annulled by court order
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Last Marriage Resolution: 
+        </label>
+        Yes
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Current Partnership Type: 
+        </label>
+        Domestic Partnership
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Civil Union Or Domestic Partnership Dissolved: 
+        </label>
+        Yes
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Partnership State: 
+        </label>
+        Boston, USA
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Blood Relation to Partner?: 
+        </label>
+        Yes
+      </div>
+      <div
+        className="emotion-1"
+      >
+        <label>
+          Describe Blood Relation: 
+        </label>
+        Third Cousin's Removed
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 6. Submit 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-9 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-9 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-9 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-8 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-8 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-8 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-4 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Lora,Georgia,serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-4.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-4.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed:hover,
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-3 .progressbar .nav a.current,
+.emotion-3 .progressbar .nav a.completed .current,
+.emotion-3 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted,
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+.emotion-10 {
+  padding: 0px;
+}
+
+.emotion-7 {
+  padding: 3%;
+  font-size: 1em;
+  line-height: 1.7em;
+}
+
+.emotion-5 {
+  margin: 1.5em 0 0.7em;
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #091f2f;
+}
+
+.emotion-6 {
+  display: Flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-top: 2em;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed   done"
+                  onClick={[Function]}
+                  onMouseEnter={[Function]}
+                  onTouchMove={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed   done"
+                  onClick={[Function]}
+                  onMouseEnter={[Function]}
+                  onTouchMove={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="completed   done"
+                  onClick={[Function]}
+                  onMouseEnter={[Function]}
+                  onTouchMove={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="completed   done"
+                  onClick={[Function]}
+                  onMouseEnter={[Function]}
+                  onTouchMove={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="completed   done"
+                  onClick={[Function]}
+                  onMouseEnter={[Function]}
+                  onTouchMove={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="completed focused current done"
+                  onClick={[Function]}
+                  onMouseEnter={[Function]}
+                  onTouchMove={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 6 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Submit
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-10"
+            >
+              <div
+                className="emotion-9"
+              >
+                <fieldset
+                  className=" emotion-8"
+                >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Request Submitted
+                    </h2>
+                  </legend>
+                  <div
+                    className="emotion-7"
+                  >
+                    <p>
+                      We have your request!
+                    </p>
+                    <p>
+                      Thank you for your submission. You should receive a confirmation email from the City of Boston in a few minutes. Have questions? Contact us at 617-635-4175 or marriage@boston.gov.
+                    </p>
+                    <p
+                      className="emotion-5"
+                    >
+                      We need your feedback!
+                    </p>
+                    <p>
+                      We want to better understand the experience of our customers when scheduling marriage appointments. Please take our quick survey today:
+                    </p>
+                    <div
+                      className="ta-r m-b500 emotion-6"
+                    >
+                      <button
+                        className="btn btn--b-sm"
+                        onClick={[Function]}
+                        title="Take our Survey"
+                        type="button"
+                      >
+                        Take our Survey
+                      </button>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (default) 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 1 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Getting Started
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 2 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Person 1
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 3 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Person 2
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed focused "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed  current"
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 3 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Person 2
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 4 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Contact Info
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed  "
+          onClick={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed  "
+          onClick={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed  "
+          onClick={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="completed focused current"
+          onClick={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="uncompleted  "
+          onClick={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 5 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Review
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
+.emotion-0 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3; 1fr);
+}
+
+.emotion-0 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-0 .progressbar .nav {
+  display: table;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-family: Lora,serif;
+  color: #000;
+}
+
+.emotion-0 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0em;
+  min-width: 80px;
+  color: black;
+  background: #fff;
+  min-width: 120px;
+  font-size: 0.85em;
+}
+
+.emotion-0 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-0 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-0 .progressbar .nav a.completed,
+.emotion-0 .progressbar .nav a.completed:hover,
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.focused {
+  color: white;
+  cursor: pointer;
+  background: #1871bd;
+}
+
+.emotion-0 .progressbar .nav a.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
+  box-shadow: inset 0 0 0px 1px #fff;
+}
+
+.emotion-0 .progressbar .nav a.current,
+.emotion-0 .progressbar .nav a.completed .current,
+.emotion-0 .progressbar .nav a.completed .focused .current {
+  color: #000;
+  background: #fff;
+}
+
+.emotion-0 .progressbar .nav a.uncompleted,
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  color: #000;
+  background: #C8C8C8;
+}
+
+.emotion-0 .progressbar .nav a.done,
+.emotion-0 .progressbar .nav a.done:hover {
+  cursor: default;
+}
+
+.emotion-0 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-0 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-0 {
+    max-width: 25.875em;
+  }
+
+  .emotion-0 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-0 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="progressbar"
+    >
+      <div
+        className="nav"
+      >
+        <a
+          aria-label="Getting Started"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Getting Started"
+        >
+          Getting Started
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 1"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Person 1"
+        >
+          Person 1
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Person 2"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Person 2"
+        >
+          Person 2
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Contact Info"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Contact Info"
+        >
+          Contact Info
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Review"
+          className="completed   done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Review"
+        >
+          Review
+          <span
+            className="arrow"
+          />
+        </a>
+        <a
+          aria-label="Submit"
+          className="completed focused current done"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+          onTouchMove={[Function]}
+          title="Submit"
+        >
+          Submit
+          <span
+            className="arrow"
+          />
+        </a>
+      </div>
+      <div
+        className="progress-text"
+      >
+        <span>
+          Step 6 of 6
+        </span>
+        <span
+          className=""
+        >
+          : 
+           
+          Submit
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Marriage/CheckoutPage confirmation 1`] = `
 Array [
   <a
diff --git a/services-js/registry-certs/client/common/question-components/QuestionComponent.stories.tsx b/services-js/registry-certs/client/common/question-components/QuestionComponent.stories.tsx
index 46a1493d8..21d156600 100644
--- a/services-js/registry-certs/client/common/question-components/QuestionComponent.stories.tsx
+++ b/services-js/registry-certs/client/common/question-components/QuestionComponent.stories.tsx
@@ -6,7 +6,7 @@ import { Component } from 'react';
 
 import { storiesOf } from '@storybook/react';
 
-import { YesNoUnknownAnswer } from '../../types';
+import { yesNoUnknownAnswer } from '../../types';
 
 import QuestionComponent from './QuestionComponent';
 import FieldsetComponent from './FieldsetComponent';
@@ -16,7 +16,7 @@ import { SECTION_HEADING_STYLING } from './styling';
 
 interface Props {}
 interface State {
-  answer: YesNoUnknownAnswer;
+  answer: yesNoUnknownAnswer;
 }
 
 class PlaceholderQuestion extends Component<Props, State> {
diff --git a/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.stories.tsx b/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.stories.tsx
index 5066359ed..b47cfdfb9 100644
--- a/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.stories.tsx
+++ b/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.stories.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 
-import { YesNoUnknownAnswer } from '../../types';
+import { yesNoUnknownAnswer } from '../../types';
 
 import YesNoUnsureComponent from './YesNoUnsureComponent';
 
 interface Props {}
 
 interface State {
-  answer: YesNoUnknownAnswer;
+  answer: yesNoUnknownAnswer;
 }
 
 class YesNoUnsureComponentStories extends React.Component<Props, State> {
diff --git a/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.tsx b/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.tsx
index 5c41c2799..f8fc589ce 100644
--- a/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.tsx
+++ b/services-js/registry-certs/client/common/question-components/YesNoUnsureComponent.tsx
@@ -12,14 +12,14 @@ import AnswerIcon from '../icons/AnswerIcon';
 import {
   BirthQuestion,
   MarriageQuestion,
-  YesNoUnknownAnswer,
+  yesNoUnknownAnswer,
 } from '../../types';
 
 import { RADIOGROUP_STYLING } from './styling';
 
 interface Props {
   questionName: BirthQuestion | MarriageQuestion;
-  questionValue: YesNoUnknownAnswer;
+  questionValue: yesNoUnknownAnswer;
 
   handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
@@ -29,7 +29,7 @@ interface Props {
  */
 export default function YesNoUnsureComponent(props: Props): JSX.Element {
   function radioItem(
-    itemValue: YesNoUnknownAnswer,
+    itemValue: yesNoUnknownAnswer,
     itemText: string
   ): ReactChild {
     // map values to the icons to use
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
new file mode 100644
index 000000000..04ad157db
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { MarriageIntentionCertificateRequestInformation } from '../../types';
+import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
+
+import { GaSiteAnalytics } from '@cityofboston/next-client-common';
+import MarriageIntentionDao from '../../dao/MarriageIntentionDao';
+
+import IndexPage from '../index';
+import PartnerView from '../forms/partnerView';
+import {
+  formatDate,
+  getStateFullName,
+  getCountryFullName,
+  yesNoAnswer,
+} from '../helpers/formUtils';
+
+function makeMarriageIntentionCertificateRequest(
+  answers: Partial<MarriageIntentionCertificateRequestInformation> = {}
+): MarriageIntentionCertificateRequest {
+  const marriageIntentionCertificateRequest = new MarriageIntentionCertificateRequest();
+
+  marriageIntentionCertificateRequest.answerQuestion(answers, '');
+
+  return marriageIntentionCertificateRequest;
+}
+
+storiesOf('Marriage Intention/Form Pages', module)
+  .add('Step 1. Instructions', () => (
+    <IndexPage
+      currentStep="instructions"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0])}
+    />
+  ))
+  .add('Step 2. Person 1', () => (
+    <IndexPage
+      currentStep="partnerFormA"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1])}
+    />
+  ))
+  .add('Step 3. Person 2', () => (
+    <IndexPage
+      currentStep="partnerFormB"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2])}
+    />
+  ))
+  .add('Step 4. Contact Info', () => (
+    <IndexPage
+      currentStep="contactInfo"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2, 3])}
+    />
+  ))
+  .add('Step 5. Review/Full Form', () => (
+    <IndexPage
+      currentStep="reviewForms"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2, 3])}
+    />
+  ))
+  .add('Step 5. Review/Person Info View', () => {
+    const marriageIntentionCertificateRequest = makeMarriageIntentionCertificateRequest();
+
+    return (
+      <PartnerView
+        marriageIntentionCertificateRequest={
+          marriageIntentionCertificateRequest
+        }
+        partyLabel={'A'}
+        firstName={`Phillip`}
+        lastName={`Kelly`}
+        suffix={``}
+        middleName={`Benton`}
+        surName={`Kelly`}
+        dob={formatDate(new Date(`1982-09-23T00:00:00.000Z`))}
+        age={`41`}
+        occupation={`Developer`}
+        address={`
+          ${`100 Howard Ave. Apt 2`},
+          ${`Boston`}
+          ${getStateFullName(`MA`)} 
+          ${`02125`} 
+          ${getCountryFullName(`USA`)}
+        `}
+        birthCity={`La Ceiba`}
+        birthState={getStateFullName(`Atlantida`)}
+        birthCountry={getCountryFullName(`HND`)}
+        marriageNumb={`2nd`}
+        lastMarriageStatus={`CRT`}
+        partnerShipType={`DOM`}
+        partnerShipDissolve={`Yes`}
+        parentA={`Mother F. Mother L.`}
+        parentB={`Father F. Father L.`}
+        parentsMarriedAtBirth={yesNoAnswer('0')}
+        bloodRelation={yesNoAnswer(`1`)}
+        bloodRelationDesc={`Third Cousin's Removed`}
+        partnershipState={`Boston, USA`}
+      />
+    );
+  })
+  .add('Step 6. Submit', () => (
+    <IndexPage
+      currentStep="reviewRequest"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2, 3, 4, 5])}
+    />
+  ));
diff --git a/services-js/registry-certs/client/marriageintention/forms/Nav.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/Nav.stories.tsx
new file mode 100644
index 000000000..61b9163e9
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/Nav.stories.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { withKnobs, button } from '@storybook/addon-knobs';
+
+import { NarrowWrapper } from '@cityofboston/storybook-common';
+
+import { ProgressNav } from '@cityofboston/react-fleet';
+
+// import { ProgressNavProps } from '../../../lib/interfaces';
+
+// interface Props {
+//   progressNav: ProgressNavProps;
+// }
+
+interface Props {
+  steps: Array<string>;
+  totalSteps: number;
+  currentStep: number;
+  showStepName?: boolean;
+  offset?: number;
+  completed?: Array<number>;
+  clickHandler?: any;
+  blockStepBackAfterLastNav?: boolean;
+}
+
+interface State {
+  completed: boolean;
+}
+
+const taskList: Array<string> = [
+  'Getting Started',
+  'Person 1',
+  'Person 2',
+  'Contact Info',
+  'Review',
+  'Submit',
+];
+const clickHandler = (key: number = 0): void => {
+  console.log(`Step Click: #${key}`);
+};
+
+class InteractiveStep extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      completed: false,
+    };
+  }
+
+  render() {
+    const label = 'Marriage Intention Application';
+    const handler = () => this.setState({ completed: true });
+
+    button(label, handler);
+
+    return <ProgressNav {...this.props} />;
+  }
+}
+
+storiesOf('Marriage Intention/ProgressNav', module)
+  .addDecorator(story => <NarrowWrapper>{story()}</NarrowWrapper>)
+  .addDecorator(withKnobs)
+  .add('Step 1: Getting Started (default)', () => (
+    <ProgressNav
+      steps={taskList}
+      totalSteps={taskList.length}
+      currentStep={0}
+      showStepName={true}
+      offset={0}
+      completed={[0]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 2: Person 1', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={1}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 3: Person 2', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={2}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 4: Contact Info', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={3}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 4: Contact Info - Nav one step back', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={2}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ))
+  .add('Step 5: Review', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={4}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3, 4]}
+      clickHandler={clickHandler}
+    />
+  ))
+  .add('Step 6: Submit', () => (
+    <InteractiveStep
+      steps={taskList}
+      currentStep={5}
+      totalSteps={taskList.length}
+      showStepName={true}
+      offset={0}
+      completed={[0, 1, 2, 3, 4, 5]}
+      clickHandler={clickHandler}
+      blockStepBackAfterLastNav={true}
+    />
+  ));
diff --git a/services-js/registry-certs/client/marriageintention/forms/inputData.tsx b/services-js/registry-certs/client/marriageintention/forms/inputData.tsx
index dbded42b3..dd30bfd5a 100644
--- a/services-js/registry-certs/client/marriageintention/forms/inputData.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/inputData.tsx
@@ -184,58 +184,58 @@ export const BOSTON_NEIGHBORHOODS = [
 ];
 
 export const US_STATES = [
-  { label: '--', value: '' },
-  { label: 'AL', value: 'AL' },
-  { label: 'AK', value: 'AK' },
-  { label: 'AZ', value: 'AZ' },
-  { label: 'AR', value: 'AR' },
-  { label: 'CA', value: 'CA' },
-  { label: 'CO', value: 'CO' },
-  { label: 'CT', value: 'CT' },
-  { label: 'DE', value: 'DE' },
-  { label: 'DC', value: 'DC' },
-  { label: 'FL', value: 'FL' },
-  { label: 'GA', value: 'GA' },
-  { label: 'HI', value: 'HI' },
-  { label: 'ID', value: 'ID' },
-  { label: 'IL', value: 'IL' },
-  { label: 'IN', value: 'IN' },
-  { label: 'IA', value: 'IA' },
-  { label: 'KS', value: 'KS' },
-  { label: 'KY', value: 'KY' },
-  { label: 'LA', value: 'LA' },
-  { label: 'ME', value: 'ME' },
-  { label: 'MD', value: 'MD' },
-  { label: 'MA', value: 'MA' },
-  { label: 'MI', value: 'MI' },
-  { label: 'MN', value: 'MN' },
-  { label: 'MS', value: 'MS' },
-  { label: 'MO', value: 'MO' },
-  { label: 'MT', value: 'MT' },
-  { label: 'NE', value: 'NE' },
-  { label: 'NV', value: 'NV' },
-  { label: 'NH', value: 'NH' },
-  { label: 'NJ', value: 'NJ' },
-  { label: 'NM', value: 'NM' },
-  { label: 'NY', value: 'NY' },
-  { label: 'NC', value: 'NC' },
-  { label: 'ND', value: 'ND' },
-  { label: 'OH', value: 'OH' },
-  { label: 'OK', value: 'OK' },
-  { label: 'OR', value: 'OR' },
-  { label: 'PA', value: 'PA' },
-  { label: 'RI', value: 'RI' },
-  { label: 'SC', value: 'SC' },
-  { label: 'SD', value: 'SD' },
-  { label: 'TN', value: 'TN' },
-  { label: 'TX', value: 'TX' },
-  { label: 'UT', value: 'UT' },
-  { label: 'VT', value: 'VT' },
-  { label: 'VA', value: 'VA' },
-  { label: 'WA', value: 'WA' },
-  { label: 'WV', value: 'WV' },
-  { label: 'WI', value: 'WI' },
-  { label: 'WY', value: 'WY' },
+  { label: '--', value: '', field: '' },
+  { label: 'AL', value: 'AL', field: '' },
+  { label: 'AK', value: 'AK', field: '' },
+  { label: 'AZ', value: 'AZ', field: '' },
+  { label: 'AR', value: 'AR', field: '' },
+  { label: 'CA', value: 'CA', field: '' },
+  { label: 'CO', value: 'CO', field: '' },
+  { label: 'CT', value: 'CT', field: '' },
+  { label: 'DE', value: 'DE', field: '' },
+  { label: 'DC', value: 'DC', field: '' },
+  { label: 'FL', value: 'FL', field: '' },
+  { label: 'GA', value: 'GA', field: '' },
+  { label: 'HI', value: 'HI', field: '' },
+  { label: 'ID', value: 'ID', field: '' },
+  { label: 'IL', value: 'IL', field: '' },
+  { label: 'IN', value: 'IN', field: '' },
+  { label: 'IA', value: 'IA', field: '' },
+  { label: 'KS', value: 'KS', field: '' },
+  { label: 'KY', value: 'KY', field: '' },
+  { label: 'LA', value: 'LA', field: '' },
+  { label: 'ME', value: 'ME', field: '' },
+  { label: 'MD', value: 'MD', field: '' },
+  { label: 'MA', value: 'MA', field: '' },
+  { label: 'MI', value: 'MI', field: '' },
+  { label: 'MN', value: 'MN', field: '' },
+  { label: 'MS', value: 'MS', field: '' },
+  { label: 'MO', value: 'MO', field: '' },
+  { label: 'MT', value: 'MT', field: '' },
+  { label: 'NE', value: 'NE', field: '' },
+  { label: 'NV', value: 'NV', field: '' },
+  { label: 'NH', value: 'NH', field: '' },
+  { label: 'NJ', value: 'NJ', field: '' },
+  { label: 'NM', value: 'NM', field: '' },
+  { label: 'NY', value: 'NY', field: '' },
+  { label: 'NC', value: 'NC', field: '' },
+  { label: 'ND', value: 'ND', field: '' },
+  { label: 'OH', value: 'OH', field: '' },
+  { label: 'OK', value: 'OK', field: '' },
+  { label: 'OR', value: 'OR', field: '' },
+  { label: 'PA', value: 'PA', field: '' },
+  { label: 'RI', value: 'RI', field: '' },
+  { label: 'SC', value: 'SC', field: '' },
+  { label: 'SD', value: 'SD', field: '' },
+  { label: 'TN', value: 'TN', field: '' },
+  { label: 'TX', value: 'TX', field: '' },
+  { label: 'UT', value: 'UT', field: '' },
+  { label: 'VT', value: 'VT', field: '' },
+  { label: 'VA', value: 'VA', field: '' },
+  { label: 'WA', value: 'WA', field: '' },
+  { label: 'WV', value: 'WV', field: '' },
+  { label: 'WI', value: 'WI', field: '' },
+  { label: 'WY', value: 'WY', field: '' },
 ];
 
 export const COUNTRIES = [
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
index 4b18da489..ebaeffca3 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
@@ -58,14 +58,7 @@ export default class PartnerView extends Component<Props> {
   }
 
   public render() {
-    const {
-      // marriageIntentionCertificateRequest,
-      suffix,
-    } = this.props;
-    // const genderObj = marriageIntentionCertificateRequest.getGenderLabel(
-    //   this.props.sex
-    // );
-    // const genderLabel = genderObj && genderObj.value ? genderObj.label : 'N/A';
+    const { suffix } = this.props;
 
     const partnerShipTypeObj = PARTNERSHIP_TYPE.find(
       entry => entry.value === this.props.partnerShipType
@@ -78,14 +71,17 @@ export default class PartnerView extends Component<Props> {
     const lastMarriageStatusObj = LAST_MARRIAGE_STATUS.find(
       entry => entry.value === this.props.lastMarriageStatus
     );
+
     const lastMarriageStatus =
       lastMarriageStatusObj && lastMarriageStatusObj.value
         ? lastMarriageStatusObj.label
         : '';
+
     const lastName =
       suffix && suffix !== 'N/A'
         ? `${this.props.lastName} ${suffix}`
         : `${this.props.lastName}`;
+
     return (
       <div>
         <div css={SECTION_WRAPPER_STYLING}>
@@ -141,11 +137,6 @@ export default class PartnerView extends Component<Props> {
               {this.props.age}
             </div>
 
-            {/* <div css={COLUMNS_STYLING}>
-              <label>Sex: </label>
-              {genderLabel}
-            </div> */}
-
             <div css={COLUMNS_STYLING}>
               <label>Occupation: </label>
               {this.props.occupation}
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
index 6af929257..b8f7b2868 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
@@ -8,24 +8,22 @@ import { observer } from 'mobx-react';
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 import QuestionComponent from '../../common/question-components/QuestionComponent';
 
-import { COUNTRIES, US_STATES } from './inputData';
-
+import { MI_REVIEW_STYLING } from './styling';
 import {
-  SECTION_HEADING_STYLING,
-  SECTION_WRAPPER_STYLING,
   MARRIAGE_INTENTION_FORM_STYLING,
   MARRIAGE_INTENTION_INTRO_STYLING,
-  NAME_FIELDS_BASIC_CONTAINER_STYLING,
 } from '../../common/question-components/styling';
 
 import {
-  MAIN_HEADING_STYLING,
-  MI_REVIEW_STYLING,
-  PAIRED_COLUMNS_STYLING,
-  COLUMNS_STYLING,
-} from './styling';
+  formatDate,
+  getStateFullName,
+  getCountryFullName,
+  yesNoAnswer,
+} from '../helpers/formUtils';
 
 import PartnerView from './partnerView';
+import ContactUX from './reviewUI/contact';
+import HeaderUX from './reviewUI/header';
 
 interface Props {
   handleProceed: (ev: MouseEvent) => void;
@@ -44,70 +42,30 @@ export default class ReviewForms extends Component<Props> {
     };
   }
 
-  private adjustForTimezone(date: Date): Date {
-    var timeOffsetInMS: number = date.getTimezoneOffset() * 60000;
-    date.setTime(date.getTime() + timeOffsetInMS);
-    return date;
-  }
-
-  private formatDate(_dateObj): any {
-    const dateObj = new Date(this.adjustForTimezone(_dateObj));
-    const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(
-      dateObj
-    );
-    const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(
-      dateObj
-    );
-    const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(
-      dateObj
-    );
-
-    return `${month} ${day}, ${year}`;
-  }
-
   public render() {
     const {
       requestInformation,
     } = this.props.marriageIntentionCertificateRequest;
 
-    const appointmentDateTime = `${this.formatDate(
+    const appointmentDateTime = `${formatDate(
       requestInformation.appointmentDate
     )}`;
 
-    const YesNoAnswer = (val: any) => {
-      return parseInt(val) === 1 ? 'Yes' : 'No';
-    };
-
     const partnerA_parentA = `${requestInformation.partnerA_parentA_Name}/${
       requestInformation.partnerA_parentA_Surname
     }`;
+
     const partnerA_parentB = `${requestInformation.partnerA_parentB_Name}/${
       requestInformation.partnerA_parentB_Surname
     }`;
+
     const partnerB_parentA = `${requestInformation.partnerB_parentA_Name}/${
       requestInformation.partnerB_parentA_Surname
     }`;
+
     const partnerB_parentB = `${requestInformation.partnerB_parentB_Name}/${
       requestInformation.partnerB_parentB_Surname
     }`;
-    const getCountryFullName = (Name: string) => {
-      const countryObj = COUNTRIES.find(entry => entry.value === Name);
-      let retVal = '';
-
-      if (countryObj && countryObj.label) {
-        retVal = ` ${countryObj.label.toLocaleUpperCase()}`;
-        if (countryObj.shortLabel)
-          retVal = ` ${countryObj.shortLabel.toLocaleUpperCase()}`;
-      }
-
-      return retVal;
-    };
-    const getStateFullName = (Name: string) => {
-      const countryObj = US_STATES.find(entry => entry.value === Name);
-      return countryObj && countryObj.label && countryObj.label !== '--'
-        ? countryObj.label
-        : '';
-    };
 
     return (
       <QuestionComponent
@@ -123,15 +81,7 @@ export default class ReviewForms extends Component<Props> {
             MI_REVIEW_STYLING,
           ]}
         >
-          <p>
-            Please review the details below. If you notice any errors, click the
-            "back" button at the bottom of your screen and correct your
-            information before submitting this application.
-          </p>
-
-          <h1 css={[SECTION_HEADING_STYLING, MAIN_HEADING_STYLING]}>
-            Review Information
-          </h1>
+          <HeaderUX />
 
           {/* PARTY A */}
           <PartnerView
@@ -144,7 +94,7 @@ export default class ReviewForms extends Component<Props> {
             suffix={requestInformation.partnerA_suffix}
             middleName={requestInformation.partnerA_middleName}
             surName={requestInformation.partnerA_surName}
-            dob={this.formatDate(requestInformation.partnerA_dob)}
+            dob={formatDate(requestInformation.partnerA_dob)}
             age={requestInformation.partnerA_age}
             occupation={requestInformation.partnerA_occupation}
             // sex={requestInformation.partnerA_sex}
@@ -174,10 +124,10 @@ export default class ReviewForms extends Component<Props> {
             `}
             parentA={partnerA_parentA}
             parentB={partnerA_parentB}
-            parentsMarriedAtBirth={YesNoAnswer(
+            parentsMarriedAtBirth={yesNoAnswer(
               requestInformation.partnerA_parentsMarriedAtBirth
             )}
-            bloodRelation={YesNoAnswer(
+            bloodRelation={yesNoAnswer(
               requestInformation.partnerA_bloodRelation
             )}
             bloodRelationDesc={`
@@ -197,7 +147,7 @@ export default class ReviewForms extends Component<Props> {
             suffix={requestInformation.partnerB_suffix}
             middleName={requestInformation.partnerB_middleName}
             surName={requestInformation.partnerB_surName}
-            dob={this.formatDate(requestInformation.partnerB_dob)}
+            dob={formatDate(requestInformation.partnerB_dob)}
             age={requestInformation.partnerB_age}
             occupation={requestInformation.partnerB_occupation}
             // sex={requestInformation.partnerB_sex}
@@ -227,10 +177,10 @@ export default class ReviewForms extends Component<Props> {
             `}
             parentA={partnerB_parentA}
             parentB={partnerB_parentB}
-            parentsMarriedAtBirth={YesNoAnswer(
+            parentsMarriedAtBirth={yesNoAnswer(
               requestInformation.partnerB_parentsMarriedAtBirth
             )}
-            bloodRelation={YesNoAnswer(
+            bloodRelation={yesNoAnswer(
               requestInformation.partnerB_bloodRelation
             )}
             bloodRelationDesc={`
@@ -239,28 +189,10 @@ export default class ReviewForms extends Component<Props> {
             partnershipState={requestInformation.partnerB_partnershipState}
           />
 
-          <h1 css={[SECTION_HEADING_STYLING, MAIN_HEADING_STYLING]}>
-            Contact Information
-          </h1>
-
-          <div css={SECTION_WRAPPER_STYLING}>
-            <div css={PAIRED_COLUMNS_STYLING}>
-              <div css={COLUMNS_STYLING}>
-                <label>Email: </label>
-                {requestInformation.email}
-              </div>
-
-              <div css={COLUMNS_STYLING}>
-                <label>Phone #: </label>
-                {requestInformation.dayPhone}
-              </div>
-            </div>
-
-            <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-              <label>Appointment Date: </label>
-              {appointmentDateTime}
-            </div>
-          </div>
+          <ContactUX
+            appointmentDateTime={appointmentDateTime}
+            requestInformation={requestInformation}
+          />
         </div>
       </QuestionComponent>
     );
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
new file mode 100644
index 000000000..ea553e67e
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
@@ -0,0 +1,63 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/core';
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+
+import {
+  SECTION_HEADING_STYLING,
+  SECTION_WRAPPER_STYLING,
+  NAME_FIELDS_BASIC_CONTAINER_STYLING,
+} from '../../../common/question-components/styling';
+
+import {
+  MAIN_HEADING_STYLING,
+  PAIRED_COLUMNS_STYLING,
+  COLUMNS_STYLING,
+} from '../styling';
+
+interface Props {
+  appointmentDateTime: string;
+  requestInformation: {
+    email: string;
+    dayPhone: string;
+  };
+}
+
+@observer
+export default class ContactUX extends Component<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render() {
+    const { appointmentDateTime, requestInformation } = this.props;
+
+    return (
+      <>
+        <h1 css={[SECTION_HEADING_STYLING, MAIN_HEADING_STYLING]}>
+          Contact Information
+        </h1>
+
+        <div css={SECTION_WRAPPER_STYLING}>
+          <div css={PAIRED_COLUMNS_STYLING}>
+            <div css={COLUMNS_STYLING}>
+              <label>Email: </label>
+              {requestInformation.email}
+            </div>
+
+            <div css={COLUMNS_STYLING}>
+              <label>Phone #: </label>
+              {requestInformation.dayPhone}
+            </div>
+          </div>
+
+          <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+            <label>Appointment Date: </label>
+            {appointmentDateTime}
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
new file mode 100644
index 000000000..1e9c656db
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
@@ -0,0 +1,26 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/core';
+import { Component } from 'react';
+
+import { SECTION_HEADING_STYLING } from '../../../common/question-components/styling';
+
+import { MAIN_HEADING_STYLING } from '../styling';
+
+export default class HeaderUX extends Component {
+  public render() {
+    return (
+      <>
+        <p>
+          Please review the details below. If you notice any errors, click the
+          "back" button at the bottom of your screen and correct your
+          information before submitting this application.
+        </p>
+
+        <h1 css={[SECTION_HEADING_STYLING, MAIN_HEADING_STYLING]}>
+          Review Information
+        </h1>
+      </>
+    );
+  }
+}
diff --git a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
new file mode 100644
index 000000000..81ed5a00d
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
@@ -0,0 +1,85 @@
+import { COUNTRIES, US_STATES } from '../forms/inputData';
+
+/**
+ * @name adjustForTimezone
+ * @description Adjust a date to the client (browser, etc) Timezone
+ * @param {date} date Date (JS) object
+ * @returns Date - Date (JS) object
+ * @example adjustForTimezone(new Date("Sun Jan 28 2024 19:43:53 GMT-0500 (Eastern Standard Time)")) = 1706507033000
+ */
+export const adjustForTimezone = (date: Date): Date => {
+  const timeOffsetInMS: number = date.getTimezoneOffset() * 60000;
+  date.setTime(date.getTime() + timeOffsetInMS);
+  return date;
+};
+
+/**
+ * @name formatDate
+ * @description Format date to the following style: `mmm dd, yyyy`
+ * @returns {string} Date string in the format of `mmm dd, yyyy`
+ * @example formatDate(new Date('12/1/2023')) = `Dec 01, 2023`
+ */
+export const formatDate = (date_Obj: Date | null | undefined): any => {
+  if (!date_Obj) return ``;
+
+  const dateObj = new Date(adjustForTimezone(date_Obj));
+  const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(
+    dateObj
+  );
+  const month = new Intl.DateTimeFormat('en', { month: 'short' }).format(
+    dateObj
+  );
+  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateObj);
+
+  return `${month} ${day}, ${year}`;
+};
+
+/**
+ * @name getCountryFullName
+ * @description Convert a 2-3 letter Country Code into the full country name
+ * @param {name} string Country Code
+ * @returns {string} Country Full Name
+ * @example getCountryFullName('USA') = 'United States of America'
+ */
+export const getCountryFullName = (name: string) => {
+  const countryObj = COUNTRIES.find(entry => entry.value === name);
+  let retVal = '';
+
+  if (countryObj && countryObj.label) {
+    retVal = ` ${countryObj.label.toLocaleUpperCase()}`;
+    if (countryObj.shortLabel)
+      retVal = ` ${countryObj.shortLabel.toLocaleUpperCase()}`;
+  }
+
+  return retVal;
+};
+
+/**
+ * @name getStateFullName
+ * @description Convert a State Code into state name
+ * @param {name} string State Code
+ * @returns {string} State Name
+ * @example getStateFullName('MA') = 'MA'
+ */
+export const getStateFullName = (name: string) => {
+  const countryObj = US_STATES.find(entry => entry.value === name);
+  return countryObj && countryObj.label && countryObj.label !== '--'
+    ? countryObj.label
+    : '';
+};
+
+/**
+ * @name yesNoUnknownAnswer
+ * @description Convert boolean (true bool, numeric bool, string bool) into Y|N string
+ * @param {val} string | boolean | 1 | 2 | '1' | '2'
+ * @returns {string} Yes|No
+ * @example yesNoUnknownAnswer('1') = 'Yes'
+ */
+export const yesNoAnswer = (
+  val: '1' | '2' | 1 | 2 | string | boolean
+): string => {
+  if (!val) return ``;
+  if (typeof val === 'boolean') return val === true ? 'Yes' : 'No';
+  if (typeof val === 'number') return val === 1 ? 'Yes' : 'No';
+  return parseInt(val) === 1 ? 'Yes' : 'No';
+};
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index 8bfd46621..dbedac273 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -38,6 +38,7 @@ interface Props
       | 'marriageIntentionCertificateRequest'
       | 'siteAnalytics'
       | 'marriageIntentionDao'
+      | 'completedSteps'
     > {}
 
 interface State {
@@ -129,7 +130,7 @@ export default class IndexPage extends React.Component<Props, State> {
       globalMarriageIntentionCertificateRequest:
         props.marriageIntentionCertificateRequest,
       currentStep: props.currentStep,
-      completedSteps: new Set([0]),
+      completedSteps: this.props.completedSteps || new Set([0]),
     };
   }
 
@@ -398,12 +399,6 @@ export default class IndexPage extends React.Component<Props, State> {
     return (
       <PageWrapper
         certificateType="intention"
-        // progress={{
-        //   totalSteps: steps.length,
-        //   currentStep: steps.indexOf(currentStep) + 1,
-        //   currentStepCompleted: isStepComplete,
-        //   offset: -1,
-        // }}
         progressNav={{
           steps: labels,
           totalSteps: steps.length,
@@ -413,7 +408,6 @@ export default class IndexPage extends React.Component<Props, State> {
           completed: Array.from(completedSteps),
           clickHandler: this.progressNavClick,
           blockStepBackAfterLastNav: true,
-          // disableOnEnd: true,
         }}
         classString={'b-c'}
         mainHeadline={'Marriage Intention Application'}
@@ -424,9 +418,6 @@ export default class IndexPage extends React.Component<Props, State> {
           </Head>
 
           {questionsEl}
-
-          {/* DIG-2105 */}
-          {/* {emailContentBlock()} */}
         </div>
       </PageWrapper>
     );
diff --git a/services-js/registry-certs/client/types.ts b/services-js/registry-certs/client/types.ts
index 8fd12ca9a..1448fe05b 100644
--- a/services-js/registry-certs/client/types.ts
+++ b/services-js/registry-certs/client/types.ts
@@ -36,7 +36,7 @@ export type Relation =
   | 'other'
   | '';
 
-export type YesNoUnknownAnswer = 'yes' | 'no' | 'unknown' | '';
+export type yesNoUnknownAnswer = 'yes' | 'no' | 'unknown' | '';
 
 // Death-specific
 export interface DeathCertificate
@@ -134,13 +134,13 @@ export type MarriageStep =
 export type BirthCertificateRequestInformation = {
   forSelf: boolean | null;
   howRelated?: Relation;
-  bornInBoston: YesNoUnknownAnswer;
-  parentsLivedInBoston?: YesNoUnknownAnswer;
+  bornInBoston: yesNoUnknownAnswer;
+  parentsLivedInBoston?: yesNoUnknownAnswer;
   firstName: string;
   lastName: string;
   altSpelling: string;
   birthDate?: Date | null;
-  parentsMarried: YesNoUnknownAnswer;
+  parentsMarried: yesNoUnknownAnswer;
   parent1FirstName: string;
   parent1LastName: string;
   parent2FirstName: string;
@@ -232,7 +232,7 @@ export type MarriageIntentionCertificateRequestInformation = {
 export type MarriageCertificateRequestInformation = {
   forSelf: boolean | null;
   howRelated?: Relation;
-  filedInBoston: YesNoUnknownAnswer;
+  filedInBoston: yesNoUnknownAnswer;
   dateOfMarriageExact?: Date | null;
   dateOfMarriageUnsure?: string;
   fullName1: string;
@@ -241,8 +241,8 @@ export type MarriageCertificateRequestInformation = {
   maidenName2?: string;
   altSpellings1?: string;
   altSpellings2?: string;
-  parentsMarried1: YesNoUnknownAnswer;
-  parentsMarried2: YesNoUnknownAnswer;
+  parentsMarried1: yesNoUnknownAnswer;
+  parentsMarried2: yesNoUnknownAnswer;
   // customerNotes?: string;
 
   // only required if parentsMarried[1, 2] !== true:
diff --git a/services-js/registry-certs/pages/_app.tsx b/services-js/registry-certs/pages/_app.tsx
index 296d39334..762f2b68e 100644
--- a/services-js/registry-certs/pages/_app.tsx
+++ b/services-js/registry-certs/pages/_app.tsx
@@ -88,6 +88,7 @@ export interface PageDependencies extends GetInitialPropsDependencies {
   routerListener: RouterListener;
   orderProvider: OrderProvider;
   siteAnalytics: GaSiteAnalytics;
+  completedSteps: Set<number> | null;
 }
 
 // It’s important to cache the dependencies passed to getInitialProps because
@@ -180,6 +181,7 @@ export default class RegistryCertsApp extends App {
       stripe,
       checkoutDao: new CheckoutDao(fetchGraphql, stripe),
       marriageIntentionDao: new MarriageIntentionDao(fetchGraphql),
+      completedSteps: null,
       routerListener: new RouterListener(),
       screenReaderSupport: new ScreenReaderSupport(),
       siteAnalytics,

From 0173c480f3e44a1b627d0d8ffe1646c7bef9ff35 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Thu, 8 Feb 2024 11:19:03 -0500
Subject: [PATCH 06/28] DIG-3665(v2): Marriage Intention Updates - Steps Nav

---
 .../src/__snapshots__/Storyshots.test.ts.snap | 347 +++++-----
 .../src/components/ProgressNav.tsx            |  71 +-
 .../__snapshots__/Storyshots.test.ts.snap     |   4 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 645 ++++++++++--------
 4 files changed, 590 insertions(+), 477 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 194fa6b66..0323c4665 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -4695,8 +4695,9 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -4722,36 +4723,40 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -4816,7 +4821,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Person 1"
         >
@@ -4827,7 +4832,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Person 2"
         >
@@ -4838,7 +4843,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -4849,7 +4854,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -4860,7 +4865,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -4925,8 +4930,9 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -4952,36 +4958,40 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -5035,7 +5045,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -5057,7 +5067,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Person 2"
         >
@@ -5068,7 +5078,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -5079,7 +5089,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -5090,7 +5100,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -5155,8 +5165,9 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -5182,36 +5193,40 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -5265,7 +5280,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -5276,7 +5291,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -5298,7 +5313,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -5309,7 +5324,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -5320,7 +5335,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -5385,8 +5400,9 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -5412,36 +5428,40 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -5495,7 +5515,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -5506,7 +5526,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -5517,7 +5537,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed focused "
+          className="completed focused"
           onClick={[Function]}
           title="Person 2"
         >
@@ -5528,7 +5548,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="completed  current"
+          className="completed current"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -5539,7 +5559,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -5550,7 +5570,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -5615,8 +5635,9 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -5642,36 +5663,40 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -5725,7 +5750,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -5736,7 +5761,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -5747,7 +5772,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 2"
         >
@@ -5769,7 +5794,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -5780,7 +5805,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -5845,8 +5870,9 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -5872,36 +5898,40 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -5955,7 +5985,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -5966,7 +5996,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -5977,7 +6007,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 2"
         >
@@ -5988,7 +6018,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -6010,7 +6040,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -6075,8 +6105,9 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -6102,36 +6133,40 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -6185,7 +6220,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -6198,7 +6233,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -6211,7 +6246,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -6224,7 +6259,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -6237,7 +6272,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -6250,7 +6285,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="completed focused current done"
+          className="completed focused done current"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
diff --git a/modules-js/react-fleet/src/components/ProgressNav.tsx b/modules-js/react-fleet/src/components/ProgressNav.tsx
index 77f91bc68..ea94caad2 100644
--- a/modules-js/react-fleet/src/components/ProgressNav.tsx
+++ b/modules-js/react-fleet/src/components/ProgressNav.tsx
@@ -37,14 +37,25 @@ export default function ProgressNav(props: Props): JSX.Element {
   } = props;
   const [focused, setFocus] = useState<number>(currentStep);
   const stepElem = (step: string, key: number, index: any) => {
-    const completedCss =
-      index && index.indexOf(key) > -1 ? `completed` : `uncompleted`;
-    const focusedCss = currentStep === key ? ` focused` : ` `;
     const formDone = completed && completed.length === totalSteps;
-    const doneCss = formDone ? ` done` : ``;
-    const disableCss =
-      disableOnEnd && disableOnEnd === true ? ` disabled` : ` `;
-    const currentCss = key === index[index.length - 1] ? `current` : ``;
+    let cssObj = {
+      completedCss:
+        index && index.indexOf(key) > -1 ? `completed` : `uncompleted`,
+      focusedCss: currentStep === key ? `focused` : ``,
+      doneCss: formDone ? `done` : ``,
+      disableCss: disableOnEnd && disableOnEnd === true ? `disabled` : ``,
+      currentCss: key === index[index.length - 1] ? `current` : ``,
+    };
+
+    // Filter out object key/value with empty strings eq. ``
+    Object.keys(cssObj).forEach(k => cssObj[k] == '' && delete cssObj[k]);
+
+    // Output obj values as string of classNames
+    let cssArrToString: string = Object.keys(cssObj)
+      .map(obj => cssObj[obj])
+      .toString()
+      .replace(/,/g, ' ');
+
     const set_Focus =
       index && index.indexOf(key) > -1 && !formDone
         ? () => setFocus(key)
@@ -59,13 +70,13 @@ export default function ProgressNav(props: Props): JSX.Element {
       currentStep < evalCurrStep &&
       blockStepBack
         ? () => clickHandler(key)
-        : e => e.preventDefault();
+        : (e: { preventDefault: () => void }) => e.preventDefault();
     let linkParam = {
       key: key,
       title: `${step}`,
       onClick: on_Click,
       'aria-label': `${step}`,
-      className: `${completedCss}${focusedCss}${disableCss}${currentCss}${doneCss}`,
+      className: `${cssArrToString}`,
     };
     if (formDone) {
       linkParam['onTouchMove'] = set_Focus;
@@ -135,9 +146,9 @@ const PROGRESSBAR_STYLE = css`
       text-align: center;
       line-height: normal;
       font-style: normal;
+      font-weight: bold;
       font-family: Lora, serif;
-      color: ${BLACK};
-      // background: green;
+      color: '#58585B';
 
       a {
         display: table-cell;
@@ -162,36 +173,40 @@ const PROGRESSBAR_STYLE = css`
         }
 
         &.completed,
-        &.completed:hover,
-        &.current,
-        &.focused {
-          color: white;
+        &.completed.current {
           cursor: pointer;
+          color: ${WHITE};
           background: ${OPTIMISTIC_BLUE_DARK};
         }
 
-        &.focused,
-        &.completed:hover {
-          box-shadow: inset 0 0 0px 1px #fff;
+        &.uncompleted {
+          background: ${GRAY_200};
         }
 
-        &.current,
-        &.completed .current,
-        &.completed .focused .current {
+        &.completed.focused.current {
           color: ${BLACK};
-          background: ${WHITE};
+          cursor: pointer;
+          background: #f2f2f2;
         }
 
-        &.uncompleted,
-        &.done,
-        &.done:hover {
+        &.completed.focused,
+        &.completed:hover {
           color: ${BLACK};
-          background: ${GRAY_200};
+          cursor: pointer;
+          background: #b0d9ff;
         }
 
         &.done,
-        &.done:hover {
+        &.done:hover,
+        &.completed.focused.done.current {
+          color: ${BLACK};
           cursor: default;
+          background: #f2f2f2;
+        }
+
+        &.completed.current {
+          color: ${BLACK};
+          background: #f2f2f2;
         }
       }
     }
@@ -201,10 +216,8 @@ const PROGRESSBAR_STYLE = css`
       font-style: italic;
       font-size: 1rem;
       margin-top: 0.5rem;
-      // background-color: purple;
 
       .mobile {
-        // background-color: red;
         display: none;
       }
     }
diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
index d236b20d6..c9057de21 100644
--- a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -3578,7 +3578,7 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                         className="txt-f"
                         disabled={true}
                         id="dob-year"
-                        max={2023}
+                        max={2024}
                         maxLength={4}
                         min="1000"
                         name="year"
@@ -4005,7 +4005,7 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                       <input
                         className="txt-f"
                         id="dob-year"
-                        max={2023}
+                        max={2024}
                         maxLength={4}
                         min="1000"
                         name="year"
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 7dfa00b8f..bcb13d61f 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -63101,8 +63101,9 @@ Array [
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-3 .progressbar .nav a {
@@ -63128,36 +63129,40 @@ Array [
 }
 
 .emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed:hover,
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.focused {
-  color: white;
+.emotion-3 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-3 .progressbar .nav a.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.completed .current,
-.emotion-3 .progressbar .nav a.completed .focused .current {
+.emotion-3 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted,
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-3 .progressbar .progress-text {
@@ -63442,7 +63447,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 1"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Person 1"
                 >
@@ -63453,7 +63458,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Person 2"
                 >
@@ -63464,7 +63469,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -63475,7 +63480,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -63486,7 +63491,7 @@ Array [
                 </a>
                 <a
                   aria-label="Submit"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Submit"
                 >
@@ -63947,8 +63952,9 @@ Array [
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-3 .progressbar .nav a {
@@ -63974,36 +63980,40 @@ Array [
 }
 
 .emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed:hover,
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.focused {
-  color: white;
+.emotion-3 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-3 .progressbar .nav a.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.completed .current,
-.emotion-3 .progressbar .nav a.completed .focused .current {
+.emotion-3 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted,
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-3 .progressbar .progress-text {
@@ -64575,7 +64585,7 @@ Array [
               >
                 <a
                   aria-label="Getting Started"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Getting Started"
                 >
@@ -64597,7 +64607,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Person 2"
                 >
@@ -64608,7 +64618,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -64619,7 +64629,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -64630,7 +64640,7 @@ Array [
                 </a>
                 <a
                   aria-label="Submit"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Submit"
                 >
@@ -68431,8 +68441,9 @@ Array [
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-3 .progressbar .nav a {
@@ -68458,36 +68469,40 @@ Array [
 }
 
 .emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed:hover,
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.focused {
-  color: white;
+.emotion-3 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-3 .progressbar .nav a.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.completed .current,
-.emotion-3 .progressbar .nav a.completed .focused .current {
+.emotion-3 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted,
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-3 .progressbar .progress-text {
@@ -69059,7 +69074,7 @@ Array [
               >
                 <a
                   aria-label="Getting Started"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Getting Started"
                 >
@@ -69070,7 +69085,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 1"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Person 1"
                 >
@@ -69092,7 +69107,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -69103,7 +69118,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -69114,7 +69129,7 @@ Array [
                 </a>
                 <a
                   aria-label="Submit"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Submit"
                 >
@@ -72915,8 +72930,9 @@ Array [
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-3 .progressbar .nav a {
@@ -72942,36 +72958,40 @@ Array [
 }
 
 .emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed:hover,
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.focused {
-  color: white;
+.emotion-3 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-3 .progressbar .nav a.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.completed .current,
-.emotion-3 .progressbar .nav a.completed .focused .current {
+.emotion-3 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted,
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-3 .progressbar .progress-text {
@@ -73364,7 +73384,7 @@ Array [
               >
                 <a
                   aria-label="Getting Started"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Getting Started"
                 >
@@ -73375,7 +73395,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 1"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Person 1"
                 >
@@ -73386,7 +73406,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Person 2"
                 >
@@ -73408,7 +73428,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -73419,7 +73439,7 @@ Array [
                 </a>
                 <a
                   aria-label="Submit"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Submit"
                 >
@@ -73999,8 +74019,9 @@ Array [
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-3 .progressbar .nav a {
@@ -74026,36 +74047,40 @@ Array [
 }
 
 .emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed:hover,
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.focused {
-  color: white;
+.emotion-3 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-3 .progressbar .nav a.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.completed .current,
-.emotion-3 .progressbar .nav a.completed .focused .current {
+.emotion-3 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted,
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-3 .progressbar .progress-text {
@@ -74465,7 +74490,7 @@ Array [
               >
                 <a
                   aria-label="Getting Started"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Getting Started"
                 >
@@ -74476,7 +74501,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 1"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Person 1"
                 >
@@ -74487,7 +74512,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="completed  "
+                  className="completed"
                   onClick={[Function]}
                   title="Person 2"
                 >
@@ -74498,7 +74523,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="completed  current"
+                  className="completed current"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -74509,7 +74534,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="uncompleted focused "
+                  className="uncompleted focused"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -74520,7 +74545,7 @@ Array [
                 </a>
                 <a
                   aria-label="Submit"
-                  className="uncompleted  "
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Submit"
                 >
@@ -75675,8 +75700,9 @@ Array [
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-3 .progressbar .nav a {
@@ -75702,36 +75728,40 @@ Array [
 }
 
 .emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed:hover,
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.focused {
-  color: white;
+.emotion-3 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-3 .progressbar .nav a.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-3 .progressbar .nav a.current,
-.emotion-3 .progressbar .nav a.completed .current,
-.emotion-3 .progressbar .nav a.completed .focused .current {
+.emotion-3 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted,
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover {
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-3 .progressbar .progress-text {
@@ -75985,7 +76015,7 @@ Array [
               >
                 <a
                   aria-label="Getting Started"
-                  className="completed   done"
+                  className="completed done"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   onTouchMove={[Function]}
@@ -75998,7 +76028,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 1"
-                  className="completed   done"
+                  className="completed done"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   onTouchMove={[Function]}
@@ -76011,7 +76041,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="completed   done"
+                  className="completed done"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   onTouchMove={[Function]}
@@ -76024,7 +76054,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="completed   done"
+                  className="completed done"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   onTouchMove={[Function]}
@@ -76037,7 +76067,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="completed   done"
+                  className="completed done"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   onTouchMove={[Function]}
@@ -76050,7 +76080,7 @@ Array [
                 </a>
                 <a
                   aria-label="Submit"
-                  className="completed focused current done"
+                  className="completed focused done current"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   onTouchMove={[Function]}
@@ -76221,8 +76251,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -76248,36 +76279,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -76342,7 +76377,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
         </a>
         <a
           aria-label="Person 1"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Person 1"
         >
@@ -76353,7 +76388,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
         </a>
         <a
           aria-label="Person 2"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Person 2"
         >
@@ -76364,7 +76399,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
         </a>
         <a
           aria-label="Contact Info"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -76375,7 +76410,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -76386,7 +76421,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -76451,8 +76486,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -76478,36 +76514,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -76561,7 +76601,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -76583,7 +76623,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Person 2"
         >
@@ -76594,7 +76634,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -76605,7 +76645,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -76616,7 +76656,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -76681,8 +76721,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -76708,36 +76749,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -76791,7 +76836,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -76802,7 +76847,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -76824,7 +76869,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -76835,7 +76880,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -76846,7 +76891,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -76911,8 +76956,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -76938,36 +76984,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -77021,7 +77071,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -77032,7 +77082,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -77043,7 +77093,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
         </a>
         <a
           aria-label="Person 2"
-          className="completed focused "
+          className="completed focused"
           onClick={[Function]}
           title="Person 2"
         >
@@ -77054,7 +77104,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
         </a>
         <a
           aria-label="Contact Info"
-          className="completed  current"
+          className="completed current"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -77065,7 +77115,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -77076,7 +77126,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -77141,8 +77191,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -77168,36 +77219,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -77251,7 +77306,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -77262,7 +77317,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -77273,7 +77328,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 2"
         >
@@ -77295,7 +77350,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Review"
         >
@@ -77306,7 +77361,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -77371,8 +77426,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -77398,36 +77454,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -77481,7 +77541,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Getting Started"
         >
@@ -77492,7 +77552,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 1"
         >
@@ -77503,7 +77563,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Person 2"
         >
@@ -77514,7 +77574,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="completed  "
+          className="completed"
           onClick={[Function]}
           title="Contact Info"
         >
@@ -77536,7 +77596,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="uncompleted  "
+          className="uncompleted"
           onClick={[Function]}
           title="Submit"
         >
@@ -77601,8 +77661,9 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
   text-align: center;
   line-height: normal;
   font-style: normal;
+  font-weight: bold;
   font-family: Lora,serif;
-  color: #000;
+  color: '#58585B';
 }
 
 .emotion-0 .progressbar .nav a {
@@ -77628,36 +77689,40 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
 }
 
 .emotion-0 .progressbar .nav a.completed,
-.emotion-0 .progressbar .nav a.completed:hover,
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.focused {
-  color: white;
+.emotion-0 .progressbar .nav a.completed.current {
   cursor: pointer;
+  color: #fff;
   background: #1871bd;
 }
 
-.emotion-0 .progressbar .nav a.focused,
-.emotion-0 .progressbar .nav a.completed:hover {
-  box-shadow: inset 0 0 0px 1px #fff;
+.emotion-0 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
 }
 
-.emotion-0 .progressbar .nav a.current,
-.emotion-0 .progressbar .nav a.completed .current,
-.emotion-0 .progressbar .nav a.completed .focused .current {
+.emotion-0 .progressbar .nav a.completed.focused.current {
   color: #000;
-  background: #fff;
+  cursor: pointer;
+  background: #f2f2f2;
 }
 
-.emotion-0 .progressbar .nav a.uncompleted,
-.emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.completed.focused,
+.emotion-0 .progressbar .nav a.completed:hover {
   color: #000;
-  background: #C8C8C8;
+  cursor: pointer;
+  background: #b0d9ff;
 }
 
 .emotion-0 .progressbar .nav a.done,
-.emotion-0 .progressbar .nav a.done:hover {
+.emotion-0 .progressbar .nav a.done:hover,
+.emotion-0 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
   cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-0 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
 }
 
 .emotion-0 .progressbar .progress-text {
@@ -77711,7 +77776,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
       >
         <a
           aria-label="Getting Started"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -77724,7 +77789,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Person 1"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -77737,7 +77802,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Person 2"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -77750,7 +77815,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Contact Info"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -77763,7 +77828,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Review"
-          className="completed   done"
+          className="completed done"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}
@@ -77776,7 +77841,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
         </a>
         <a
           aria-label="Submit"
-          className="completed focused current done"
+          className="completed focused done current"
           onClick={[Function]}
           onMouseEnter={[Function]}
           onTouchMove={[Function]}

From bc0f6de1a5179370430ce407bd5fbd3e6e5440ab Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Thu, 8 Feb 2024 17:56:24 -0500
Subject: [PATCH 07/28] DIG-3256: UI/UX Update Registry Marriage Intention -
 Review Form

---
 .../src/components/ProgressNav.tsx            |    1 -
 .../__snapshots__/Storyshots.test.ts.snap     | 1669 ++++++++++-------
 .../question-components/QuestionComponent.tsx |   39 +-
 .../question-components/SurveyComponent.tsx   |   39 +-
 .../common/question-components/styling.tsx    |   35 +
 .../forms/FormPages.stories.tsx               |   15 +-
 .../marriageintention/forms/partnerView.tsx   |  306 ++-
 .../marriageintention/forms/reviewForms.tsx   |   11 +-
 .../forms/reviewUI/components.tsx             |   59 +
 .../forms/reviewUI/contact.tsx                |   62 +-
 .../forms/reviewUI/header.tsx                 |   26 +-
 .../forms/reviewUI/reviewStying.tsx           |  100 +
 .../marriageintention/forms/styling.tsx       |    3 +-
 .../marriageintention/helpers/formUtils.ts    |   17 +
 14 files changed, 1387 insertions(+), 995 deletions(-)
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx

diff --git a/modules-js/react-fleet/src/components/ProgressNav.tsx b/modules-js/react-fleet/src/components/ProgressNav.tsx
index ea94caad2..c77616d04 100644
--- a/modules-js/react-fleet/src/components/ProgressNav.tsx
+++ b/modules-js/react-fleet/src/components/ProgressNav.tsx
@@ -128,7 +128,6 @@ const PROGRESSBAR_STYLE = css`
   display: grid;
   margin: auto;
   margin-top: 0.75rem;
-  // max-width: 46rem;
 
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index bcb13d61f..20c7c3a21 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -73853,6 +73853,169 @@ Array [
 ]
 `;
 
+exports[`Storyshots Marriage Intention/Form Pages Step 5. Review - Contact [Section] 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 1em 0;
+  color: #fff;
+}
+
+.emotion-0 .wrapper-title {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-0 .wrapper-title h1,
+.emotion-0 .wrapper-title h2 {
+  color: #091f2f;
+  font-size: 1.5625em;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  line-height: 1.875em;
+}
+
+.emotion-0 .wrapper-title h2 {
+  font-size: 1.125;
+}
+
+.emotion-0 .wrapper-btn .btn {
+  color: #091f2f;
+  background: #fff;
+  border: 2px solid #091f2f;
+}
+
+.emotion-0 .wrapper-btn .btn:hover {
+  color: #fff;
+  background: #1871bd;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-0 .wrapper-title h1 {
+    line-height: 1.25em;
+  }
+}
+
+.emotion-1 .section-wrapper {
+  font-size: 0.9375em;
+  font-family: Montserrat,Arial,sans-serif;
+  margin-bottom: 1em;
+}
+
+.emotion-1 .section-wrapper h2 {
+  font-size: 1.125em;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 0.5em;
+}
+
+.emotion-1 .section-wrapper .field-value-pair .field {
+  color: #091f2f;
+  font-size: 0.9375em;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.emotion-1 .section-wrapper .field-value-pair .value {
+  font-weight: normal;
+}
+
+<div>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="wrapper-title"
+    >
+      <h1>
+        Contact Information
+      </h1>
+    </div>
+    <div
+      className="wrapper-btn"
+    >
+      <button
+        className="btn btn--b-sm"
+        onClick={[Function]}
+        type="button"
+      >
+        Edit This Page
+      </button>
+    </div>
+  </div>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Personal Information
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Email
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          phillip.kelly@boston.gov
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Phone #
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          (617) 000-1111
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Appointment Date
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Sep 23, 1982
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Full Form 1`] = `
 Array [
   <a
@@ -73929,47 +74092,47 @@ Array [
   color: #d22d23;
 }
 
-.emotion-74 fieldset + fieldset {
+.emotion-12 fieldset + fieldset {
   margin-top: 2rem;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-74 fieldset + fieldset {
+  .emotion-12 fieldset + fieldset {
     margin-top: 4rem;
   }
 
-  .emotion-74 fieldset + fieldset .lnk {
+  .emotion-12 fieldset + fieldset .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-76 {
+.emotion-14 {
   text-align: center;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-76 {
+  .emotion-14 {
     margin-top: 2.5rem;
     text-align: left;
   }
 
-  .emotion-76 > div {
+  .emotion-14 > div {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 
-  .emotion-76 > div.ta-r > button {
+  .emotion-14 > div.ta-r > button {
     margin-left: auto;
   }
 
-  .emotion-76 .lnk {
+  .emotion-14 .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-75 {
+.emotion-13 {
   padding: 1.25rem !important;
   padding-left: 0 !important;
 }
@@ -74115,186 +74278,124 @@ Array [
   }
 }
 
-.emotion-77 {
+.emotion-15 {
   padding: 0px;
 }
 
-.emotion-35 {
-  margin-bottom: 2.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-71 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-71 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-71 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-71 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-71 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-71 .notice {
-  font-size: 0.7em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 1% 0 1.5%;
-  line-height: 1.5em;
-}
-
-.emotion-71 .css-content-psedo:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-73 {
+.emotion-11 {
   font-size: 1.5em;
   line-height: 1.5em;
   margin-top: 1em;
-  font-size: 1.35em;
+  font-size: 0.9378em;
 }
 
-.emotion-73 h2 {
+.emotion-11 h2 {
   font-size: 1.5rem;
 }
 
-.emotion-73 h4 {
+.emotion-11 h4 {
   font-size: 1.25rem;
 }
 
-.emotion-73 label {
+.emotion-11 label {
   font-weight: bold;
 }
 
 .emotion-4 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
+  font-size: 0.9378rem;
+  margin-bottom: 2em;
+  line-height: 1.4em;
   color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-  font-size: 2.5rem;
-  margin-bottom: 1em;
-}
-
-.emotion-4.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
+  font-family: Lora;
 }
 
-.emotion-4.secondary em {
-  font-size: 1rem;
+.emotion-4 H1 {
+  font-weight: 700;
+  font-size: 1.88em;
+  text-transform: uppercase;
+  font-family: Montserrat !important;
+  line-height: 1.21em;
+  margin-bottom: 0em;
 }
 
 .emotion-5 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-  margin-bottom: 0.5em;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 1em 0;
+  color: #fff;
 }
 
-.emotion-5.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
+.emotion-5 .wrapper-title {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
-.emotion-5.secondary em {
-  font-size: 1rem;
+.emotion-5 .wrapper-title h1,
+.emotion-5 .wrapper-title h2 {
+  color: #091f2f;
+  font-size: 1.5625em;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  line-height: 1.875em;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-8 {
-    clear: both;
-    min-height: 1px;
-    overflow: hidden;
-  }
+.emotion-5 .wrapper-title h2 {
+  font-size: 1.125;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-6 {
-    width: 49%;
-    float: left;
-    margin-right: 1%;
-    margin-bottom: 0.5em;
-  }
+.emotion-5 .wrapper-btn .btn {
+  color: #091f2f;
+  background: #fff;
+  border: 2px solid #091f2f;
 }
 
-.emotion-16 {
-  margin-bottom: 0.5em;
-  margin-bottom: 1em;
+.emotion-5 .wrapper-btn .btn:hover {
+  color: #fff;
+  background: #1871bd;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-16 {
-    clear: both;
-    min-height: 1px;
-    overflow: hidden;
+@media screen and (max-width:480px) {
+  .emotion-5 .wrapper-title h1 {
+    line-height: 1.25em;
   }
 }
 
-.emotion-16 h2 {
-  font-size: 1.25em;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-17 {
-  margin-bottom: 0.5em;
+.emotion-6 .section-wrapper {
+  font-size: 0.9375em;
+  font-family: Montserrat,Arial,sans-serif;
+  margin-bottom: 1em;
 }
 
-.emotion-34 {
+.emotion-6 .section-wrapper h2 {
+  font-size: 1.125em;
+  font-weight: bold;
+  text-transform: uppercase;
   margin-bottom: 0.5em;
-  margin-bottom: 1em;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-34 {
-    clear: both;
-    min-height: 1px;
-    overflow: hidden;
-  }
+.emotion-6 .section-wrapper .field-value-pair .field {
+  color: #091f2f;
+  font-size: 0.9375em;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
-.emotion-34 h2 {
-  font-size: 1.5rem;
-}
-
-.emotion-34 h4 {
-  font-size: 1.25rem;
-}
-
-.emotion-34 h2 {
-  font-size: 1.25em;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
+.emotion-6 .section-wrapper .field-value-pair .value {
+  font-weight: normal;
 }
 
 <div
@@ -74575,523 +74676,680 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-77"
+              className="b-c b-c--nbp emotion-15"
             >
               <div
-                className="emotion-74"
+                className="emotion-12"
               >
                 <div
-                  className="emotion-73"
+                  className="emotion-11"
                 >
-                  <p>
-                    Please review the details below. If you notice any errors, click the "back" button at the bottom of your screen and correct your information before submitting this application.
-                  </p>
-                  <h1
+                  <div
                     className="emotion-4"
                   >
-                    Review Information
-                  </h1>
+                    <h1>
+                      Review Information
+                    </h1>
+                    <p>
+                      <label>
+                        Before you submit your application, please check your responses.
+                      </label>
+                       
+                      you need to make any changes, you can go back and edit the previous pages. Please make sure your information is accurate. During your appointment, we will review and finalize the information you share here and make sure everything’s set before it is printed onto your marriage intention form.
+                    </p>
+                  </div>
                   <div>
                     <div
-                      className="emotion-35"
+                      className="emotion-5"
                     >
-                      <h2
-                        className="emotion-5"
-                        style={
-                          Object {
-                            "fontSize": "2rem",
-                            "textDecoration": "none",
-                          }
-                        }
+                      <div
+                        className="wrapper-title"
                       >
-                        Person 
-                        A
-                      </h2>
+                        <h1>
+                          Person A
+                        </h1>
+                      </div>
                       <div
-                        className="emotion-8"
+                        className="wrapper-btn"
                       >
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            First Name: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
+                        <button
+                          className="btn btn--b-sm"
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <label>
-                            Middle Name: 
-                          </label>
-                          
-                        </div>
+                          Edit This Page
+                        </button>
                       </div>
+                    </div>
+                    <div
+                      className="emotion-6"
+                    >
                       <div
-                        className="emotion-8"
+                        className="section-wrapper"
                       >
+                        <h2>
+                          Personal Information
+                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Last Name: 
+                          <label
+                            className="field"
+                          >
+                            Legal Name
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                             
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Last Name / Surname: 
+                          <label
+                            className="field"
+                          >
+                            Last Name to be Used After Marriage
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
-                      </div>
-                      <div
-                        className="emotion-16"
-                      >
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Date of Birth: 
+                          <label
+                            className="field"
+                          >
+                            Occupation
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Date and Place of Birth
+                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Age: 
+                          <label
+                            className="field"
+                          >
+                            Date of Birth
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Occupation: 
+                          <label
+                            className="field"
+                          >
+                            BirthPlace
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            , 
+                          </span>
                         </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Residence
+                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Address: 
+                          <label
+                            className="field"
+                          >
+                            Address
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
               ,
               
                
                
               
             
+                          </span>
                         </div>
                       </div>
                       <div
-                        className="emotion-16"
+                        className="section-wrapper"
                       >
-                        <h2
-                          className="emotion-17"
-                        >
-                          Birthplace
+                        <h2>
+                          Marriage
                         </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            City: 
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Blood Relation To Current Partner
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Country: 
+                          <label
+                            className="field"
+                          >
+                            Marriage Number
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
-                      </div>
-                      <div
-                        className="emotion-16"
-                      >
-                        <h2
-                          className="emotion-17"
-                        >
-                          Parents
-                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Parent 1/Mother: 
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Last Marriage
+                            : 
                           </label>
-                          /
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Parent 2/Father: 
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Civil Union or Domestic Partnership
+                            : 
                           </label>
-                          /
+                          <span
+                            className="value"
+                          >
+                            
+              
+            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Were your parents married at the time of your birth?:
+                          <label
+                            className="field"
+                          >
+                            If Applicable, State of Civil Union or Domestic Partnership
+                            : 
                           </label>
-                           
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                       </div>
                       <div
-                        className="emotion-34"
+                        className="section-wrapper"
                       >
-                        <h2
-                          className="emotion-17"
-                        >
-                          Marriage
+                        <h2>
+                          Parents
                         </h2>
                         <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Marriage Number: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Last Marriage Status: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Last Marriage Resolution: 
-                          </label>
-                          
-              
-            
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Current Partnership Type: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Civil Union Or Domestic Partnership Dissolved: 
+                          <label
+                            className="field"
+                          >
+                            Parent 1
+                            : 
                           </label>
-                          
-              
-            
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Partnership State: 
+                          <label
+                            className="field"
+                          >
+                            Parent 2
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Blood Relation to Partner?: 
+                          <label
+                            className="field"
+                          >
+                            Status of Marriage at Time of Birth
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div>
                     <div
-                      className="emotion-35"
+                      className="emotion-5"
                     >
-                      <h2
-                        className="emotion-5"
-                        style={
-                          Object {
-                            "fontSize": "2rem",
-                            "textDecoration": "none",
-                          }
-                        }
+                      <div
+                        className="wrapper-title"
                       >
-                        Person 
-                        B
-                      </h2>
+                        <h1>
+                          Person B
+                        </h1>
+                      </div>
                       <div
-                        className="emotion-8"
+                        className="wrapper-btn"
                       >
-                        <div
-                          className="emotion-6"
+                        <button
+                          className="btn btn--b-sm"
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <label>
-                            First Name: 
-                          </label>
-                          
-                        </div>
+                          Edit This Page
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-6"
+                    >
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Personal Information
+                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Middle Name: 
+                          <label
+                            className="field"
+                          >
+                            Legal Name
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                             
+                          </span>
                         </div>
-                      </div>
-                      <div
-                        className="emotion-8"
-                      >
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Last Name: 
+                          <label
+                            className="field"
+                          >
+                            Last Name to be Used After Marriage
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Last Name / Surname: 
+                          <label
+                            className="field"
+                          >
+                            Occupation
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                       </div>
                       <div
-                        className="emotion-16"
+                        className="section-wrapper"
                       >
+                        <h2>
+                          Date and Place of Birth
+                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Date of Birth: 
+                          <label
+                            className="field"
+                          >
+                            Date of Birth
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Age: 
+                          <label
+                            className="field"
+                          >
+                            BirthPlace
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            , 
+                          </span>
                         </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Residence
+                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Occupation: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Address: 
+                          <label
+                            className="field"
+                          >
+                            Address
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
               ,
               
                
                
               
             
+                          </span>
                         </div>
                       </div>
                       <div
-                        className="emotion-16"
+                        className="section-wrapper"
                       >
-                        <h2
-                          className="emotion-17"
-                        >
-                          Birthplace
+                        <h2>
+                          Marriage
                         </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            City: 
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Blood Relation To Current Partner
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Country: 
+                          <label
+                            className="field"
+                          >
+                            Marriage Number
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
-                      </div>
-                      <div
-                        className="emotion-16"
-                      >
-                        <h2
-                          className="emotion-17"
-                        >
-                          Parents
-                        </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Parent 1/Mother: 
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Last Marriage
+                            : 
                           </label>
-                          /
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Parent 2/Father: 
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Civil Union or Domestic Partnership
+                            : 
                           </label>
-                          /
+                          <span
+                            className="value"
+                          >
+                            
+              
+            
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Were your parents married at the time of your birth?:
+                          <label
+                            className="field"
+                          >
+                            If Applicable, State of Civil Union or Domestic Partnership
+                            : 
                           </label>
-                           
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                       </div>
                       <div
-                        className="emotion-34"
+                        className="section-wrapper"
                       >
-                        <h2
-                          className="emotion-17"
-                        >
-                          Marriage
+                        <h2>
+                          Parents
                         </h2>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Marriage Number: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Last Marriage Status: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Last Marriage Resolution: 
-                          </label>
-                          
-              
-            
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Current Partnership Type: 
-                          </label>
-                          
-                        </div>
-                        <div
-                          className="emotion-6"
-                        >
-                          <label>
-                            Civil Union Or Domestic Partnership Dissolved: 
+                          <label
+                            className="field"
+                          >
+                            Parent 1
+                            : 
                           </label>
-                          
-              
-            
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Partnership State: 
+                          <label
+                            className="field"
+                          >
+                            Parent 2
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
                         </div>
                         <div
-                          className="emotion-6"
+                          className="field-value-pair"
                         >
-                          <label>
-                            Blood Relation to Partner?: 
+                          <label
+                            className="field"
+                          >
+                            Status of Marriage at Time of Birth
+                            : 
                           </label>
-                          
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
                         </div>
                       </div>
                     </div>
                   </div>
-                  <h1
-                    className="emotion-4"
-                  >
-                    Contact Information
-                  </h1>
-                  <div
-                    className="emotion-35"
-                  >
+                  <div>
                     <div
-                      className="emotion-8"
+                      className="emotion-5"
                     >
                       <div
-                        className="emotion-6"
+                        className="wrapper-title"
                       >
-                        <label>
-                          Email: 
-                        </label>
-                        
+                        <h1>
+                          Contact Information
+                        </h1>
                       </div>
                       <div
-                        className="emotion-6"
+                        className="wrapper-btn"
                       >
-                        <label>
-                          Phone #: 
-                        </label>
-                        
+                        <button
+                          className="btn btn--b-sm"
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          Edit This Page
+                        </button>
                       </div>
                     </div>
                     <div
-                      className="emotion-71"
+                      className="emotion-6"
                     >
-                      <label>
-                        Appointment Date: 
-                      </label>
-                      
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Personal Information
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Email
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Phone #
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Appointment Date
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
               <div
-                className="g g--mr emotion-76"
+                className="g g--mr emotion-14"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-75"
+                    className="lnk emotion-13"
                     onClick={[Function]}
                     type="button"
                   >
@@ -75201,325 +75459,376 @@ Array [
 `;
 
 exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Person Info View 1`] = `
-.emotion-31 {
-  margin-bottom: 2.5em;
-}
-
 .emotion-0 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-  margin-bottom: 0.5em;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 1em 0;
+  color: #fff;
 }
 
-.emotion-0.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
+.emotion-0 .wrapper-title {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
-.emotion-0.secondary em {
-  font-size: 1rem;
+.emotion-0 .wrapper-title h1,
+.emotion-0 .wrapper-title h2 {
+  color: #091f2f;
+  font-size: 1.5625em;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  line-height: 1.875em;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-3 {
-    clear: both;
-    min-height: 1px;
-    overflow: hidden;
-  }
+.emotion-0 .wrapper-title h2 {
+  font-size: 1.125;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-1 {
-    width: 49%;
-    float: left;
-    margin-right: 1%;
-    margin-bottom: 0.5em;
-  }
+.emotion-0 .wrapper-btn .btn {
+  color: #091f2f;
+  background: #fff;
+  border: 2px solid #091f2f;
 }
 
-.emotion-11 {
-  margin-bottom: 0.5em;
-  margin-bottom: 1em;
+.emotion-0 .wrapper-btn .btn:hover {
+  color: #fff;
+  background: #1871bd;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-11 {
-    clear: both;
-    min-height: 1px;
-    overflow: hidden;
+@media screen and (max-width:480px) {
+  .emotion-0 .wrapper-title h1 {
+    line-height: 1.25em;
   }
 }
 
-.emotion-11 h2 {
-  font-size: 1.25em;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-12 {
-  margin-bottom: 0.5em;
-}
-
-.emotion-30 {
-  margin-bottom: 0.5em;
+.emotion-1 .section-wrapper {
+  font-size: 0.9375em;
+  font-family: Montserrat,Arial,sans-serif;
   margin-bottom: 1em;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-30 {
-    clear: both;
-    min-height: 1px;
-    overflow: hidden;
-  }
-}
-
-.emotion-30 h2 {
-  font-size: 1.5rem;
+.emotion-1 .section-wrapper h2 {
+  font-size: 1.125em;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 0.5em;
 }
 
-.emotion-30 h4 {
-  font-size: 1.25rem;
+.emotion-1 .section-wrapper .field-value-pair .field {
+  color: #091f2f;
+  font-size: 0.9375em;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
-.emotion-30 h2 {
-  font-size: 1.25em;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
+.emotion-1 .section-wrapper .field-value-pair .value {
+  font-weight: normal;
 }
 
 <div>
   <div
-    className="emotion-31"
+    className="emotion-0"
   >
-    <h2
-      className="emotion-0"
-      style={
-        Object {
-          "fontSize": "2rem",
-          "textDecoration": "none",
-        }
-      }
-    >
-      Person 
-      A
-    </h2>
     <div
-      className="emotion-3"
+      className="wrapper-title"
     >
-      <div
-        className="emotion-1"
-      >
-        <label>
-          First Name: 
-        </label>
-        Phillip
-      </div>
-      <div
-        className="emotion-1"
-      >
-        <label>
-          Middle Name: 
-        </label>
-        Benton
-      </div>
+      <h1>
+        Person A
+      </h1>
     </div>
     <div
-      className="emotion-3"
+      className="wrapper-btn"
     >
-      <div
-        className="emotion-1"
-      >
-        <label>
-          Last Name: 
-        </label>
-        Kelly
-      </div>
-      <div
-        className="emotion-1"
+      <button
+        className="btn btn--b-sm"
+        onClick={[Function]}
+        type="button"
       >
-        <label>
-          Last Name / Surname: 
-        </label>
-        Kelly
-      </div>
+        Edit This Page
+      </button>
     </div>
+  </div>
+  <div
+    className="emotion-1"
+  >
     <div
-      className="emotion-11"
+      className="section-wrapper"
     >
+      <h2>
+        Personal Information
+      </h2>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Date of Birth: 
-        </label>
-        Sep 23, 1982
-      </div>
-      <div
-        className="emotion-1"
-      >
-        <label>
-          Age: 
+        <label
+          className="field"
+        >
+          Legal Name
+          : 
         </label>
-        41
+        <span
+          className="value"
+        >
+          Phillip Kelly
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Occupation: 
+        <label
+          className="field"
+        >
+          Last Name to be Used After Marriage
+          : 
         </label>
-        Developer
+        <span
+          className="value"
+        >
+          Kelly
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Address: 
+        <label
+          className="field"
+        >
+          Occupation
+          : 
         </label>
-        
-          100 Howard Ave. Apt 2,
-          Boston
-          MA 
-          02125 
-           USA
-        
+        <span
+          className="value"
+        >
+          Developer
+        </span>
       </div>
     </div>
     <div
-      className="emotion-11"
+      className="section-wrapper"
     >
-      <h2
-        className="emotion-12"
-      >
-        Birthplace
+      <h2>
+        Date and Place of Birth
       </h2>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          City: 
+        <label
+          className="field"
+        >
+          Date of Birth
+          : 
         </label>
-        La Ceiba
+        <span
+          className="value"
+        >
+          Sep 23, 1982
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Country: 
+        <label
+          className="field"
+        >
+          BirthPlace
+          : 
         </label>
-         HONDURAS
+        <span
+          className="value"
+        >
+          La Ceiba,  HONDURAS
+        </span>
       </div>
     </div>
     <div
-      className="emotion-11"
+      className="section-wrapper"
     >
-      <h2
-        className="emotion-12"
-      >
-        Parents
+      <h2>
+        Residence
       </h2>
       <div
-        className="emotion-1"
-      >
-        <label>
-          Parent 1/Mother: 
-        </label>
-        Mother F. Mother L.
-      </div>
-      <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Parent 2/Father: 
-        </label>
-        Father F. Father L.
-      </div>
-      <div
-        className="emotion-1"
-      >
-        <label>
-          Were your parents married at the time of your birth?:
+        <label
+          className="field"
+        >
+          Address
+          : 
         </label>
-         No
+        <span
+          className="value"
+        >
+          
+          100 Howard Ave. Apt 2,
+          Boston
+          MA 
+          02125 
+           USA
+        
+        </span>
       </div>
     </div>
     <div
-      className="emotion-30"
+      className="section-wrapper"
     >
-      <h2
-        className="emotion-12"
-      >
+      <h2>
         Marriage
       </h2>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Marriage Number: 
+        <label
+          className="field"
+        >
+          If Applicable, Blood Relation To Current Partner
+          : 
         </label>
-        2nd
+        <span
+          className="value"
+        >
+          Yes
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Last Marriage Status: 
+        <label
+          className="field"
+        >
+          Blood Relation Description
+          : 
         </label>
-        Void or annulled by court order
+        <span
+          className="value"
+        >
+          Third Cousin's Removed
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Last Marriage Resolution: 
+        <label
+          className="field"
+        >
+          Marriage Number
+          : 
         </label>
-        Yes
+        <span
+          className="value"
+        >
+          2nd
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Current Partnership Type: 
+        <label
+          className="field"
+        >
+          If Applicable, Status of Last Marriage
+          : 
         </label>
-        Domestic Partnership
+        <span
+          className="value"
+        >
+          Void or annulled by court order
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Civil Union Or Domestic Partnership Dissolved: 
+        <label
+          className="field"
+        >
+          If Applicable, Status of Civil Union or Domestic Partnership
+          : 
         </label>
-        Yes
+        <span
+          className="value"
+        >
+          Yes
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          If Applicable, State of Civil Union or Domestic Partnership
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Domestic Partnership
+        </span>
+      </div>
+    </div>
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Parents
+      </h2>
+      <div
+        className="field-value-pair"
       >
-        <label>
-          Partnership State: 
+        <label
+          className="field"
+        >
+          Parent 1
+          : 
         </label>
-        Boston, USA
+        <span
+          className="value"
+        >
+          Mother F. Mother L.
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Blood Relation to Partner?: 
+        <label
+          className="field"
+        >
+          Parent 2
+          : 
         </label>
-        Yes
+        <span
+          className="value"
+        >
+          Father F. Father L.
+        </span>
       </div>
       <div
-        className="emotion-1"
+        className="field-value-pair"
       >
-        <label>
-          Describe Blood Relation: 
+        <label
+          className="field"
+        >
+          Status of Marriage at Time of Birth
+          : 
         </label>
-        Third Cousin's Removed
+        <span
+          className="value"
+        >
+          No
+        </span>
       </div>
     </div>
   </div>
diff --git a/services-js/registry-certs/client/common/question-components/QuestionComponent.tsx b/services-js/registry-certs/client/common/question-components/QuestionComponent.tsx
index bc031db9b..94f054522 100644
--- a/services-js/registry-certs/client/common/question-components/QuestionComponent.tsx
+++ b/services-js/registry-certs/client/common/question-components/QuestionComponent.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/core';
+import { jsx } from '@emotion/core';
 
 import { MouseEvent, ReactNode } from 'react';
 
-import { MEDIA_SMALL } from '@cityofboston/react-fleet';
+import { CONTAINER_STYLING, BUTTON_CONTAINER_STYLING } from './styling';
 
 import BackButton from './BackButton';
 
@@ -63,38 +63,3 @@ export default function QuestionComponent(props: Props): JSX.Element {
     </>
   );
 }
-
-const CONTAINER_STYLING = css({
-  'fieldset + fieldset': {
-    marginTop: '2rem',
-
-    [MEDIA_SMALL]: {
-      marginTop: '4rem',
-
-      '.lnk': {
-        paddingLeft: 0,
-      },
-    },
-  },
-});
-
-const BUTTON_CONTAINER_STYLING = css({
-  textAlign: 'center',
-
-  [MEDIA_SMALL]: {
-    marginTop: '2.5rem',
-    textAlign: 'left',
-
-    '> div': {
-      display: 'flex',
-
-      '&.ta-r > button': {
-        marginLeft: 'auto',
-      },
-    },
-
-    '.lnk': {
-      paddingLeft: 0,
-    },
-  },
-});
diff --git a/services-js/registry-certs/client/common/question-components/SurveyComponent.tsx b/services-js/registry-certs/client/common/question-components/SurveyComponent.tsx
index c1c7b3c0b..33ab40dc5 100644
--- a/services-js/registry-certs/client/common/question-components/SurveyComponent.tsx
+++ b/services-js/registry-certs/client/common/question-components/SurveyComponent.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 
-import { css, jsx } from '@emotion/core';
+import { jsx } from '@emotion/core';
 
 import { MouseEvent, ReactNode } from 'react';
 
-import { MEDIA_SMALL } from '@cityofboston/react-fleet';
+import { BUTTON_CONTAINER_STYLING, CONTAINER_STYLING } from './styling';
 
 import BackButton from './BackButton';
 
@@ -66,38 +66,3 @@ export default function QuestionComponent(props: Props): JSX.Element {
     </>
   );
 }
-
-const CONTAINER_STYLING = css({
-  'fieldset + fieldset': {
-    marginTop: '2rem',
-
-    [MEDIA_SMALL]: {
-      marginTop: '4rem',
-
-      '.lnk': {
-        paddingLeft: 0,
-      },
-    },
-  },
-});
-
-const BUTTON_CONTAINER_STYLING = css({
-  textAlign: 'center',
-
-  [MEDIA_SMALL]: {
-    marginTop: '2.5rem',
-    textAlign: 'left',
-
-    '> div': {
-      display: 'flex',
-
-      '&.ta-r > button': {
-        marginLeft: 'auto',
-      },
-    },
-
-    '.lnk': {
-      paddingLeft: 0,
-    },
-  },
-});
diff --git a/services-js/registry-certs/client/common/question-components/styling.tsx b/services-js/registry-certs/client/common/question-components/styling.tsx
index 198b6dcbe..a093c409f 100644
--- a/services-js/registry-certs/client/common/question-components/styling.tsx
+++ b/services-js/registry-certs/client/common/question-components/styling.tsx
@@ -293,6 +293,41 @@ export const OVERRIDE_SELECT_DISPLAY_STYLING = css({
   },
 });
 
+export const CONTAINER_STYLING = css({
+  'fieldset + fieldset': {
+    marginTop: '2rem',
+
+    [MEDIA_SMALL]: {
+      marginTop: '4rem',
+
+      '.lnk': {
+        paddingLeft: 0,
+      },
+    },
+  },
+});
+
+export const BUTTON_CONTAINER_STYLING = css({
+  textAlign: 'center',
+
+  [MEDIA_SMALL]: {
+    marginTop: '2.5rem',
+    textAlign: 'left',
+
+    '> div': {
+      display: 'flex',
+
+      '&.ta-r > button': {
+        marginLeft: 'auto',
+      },
+    },
+
+    '.lnk': {
+      paddingLeft: 0,
+    },
+  },
+});
+
 export const NOTE_BOX_CLASSNAME = 'm-v500 p-a300 br br-a200 br--r lh--300';
 export const SUPPORTING_TEXT_CLASSNAME = 'lh--400 t--s400 m-b500';
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
index 04ad157db..f16fd80c0 100644
--- a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -15,6 +15,7 @@ import {
   getCountryFullName,
   yesNoAnswer,
 } from '../helpers/formUtils';
+import ContactUX from './reviewUI/contact';
 
 function makeMarriageIntentionCertificateRequest(
   answers: Partial<MarriageIntentionCertificateRequestInformation> = {}
@@ -80,7 +81,7 @@ storiesOf('Marriage Intention/Form Pages', module)
         marriageIntentionCertificateRequest={
           marriageIntentionCertificateRequest
         }
-        partyLabel={'A'}
+        partnerLabel={'A'}
         firstName={`Phillip`}
         lastName={`Kelly`}
         suffix={``}
@@ -109,6 +110,18 @@ storiesOf('Marriage Intention/Form Pages', module)
         bloodRelation={yesNoAnswer(`1`)}
         bloodRelationDesc={`Third Cousin's Removed`}
         partnershipState={`Boston, USA`}
+        stepStr={`partnerFormA`}
+      />
+    );
+  })
+  .add('Step 5. Review - Contact [Section]', () => {
+    return (
+      <ContactUX
+        appointmentDateTime={formatDate(new Date(`1982-09-23T00:00:00.000Z`))}
+        requestInformation={{
+          email: 'phillip.kelly@boston.gov',
+          dayPhone: '6170001111',
+        }}
       />
     );
   })
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
index ebaeffca3..756d39346 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
@@ -7,25 +7,18 @@ import { observer } from 'mobx-react';
 
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 
-import {
-  SECTION_HEADING_STYLING,
-  SECTION_WRAPPER_STYLING,
-  MARRIAGE_INTENTION_FORM_STYLING,
-} from '../../common/question-components/styling';
+import { REVIEW_FORM_STYLING } from './reviewUI/reviewStying';
 
 import {
-  BOTTOM_SPACING_STYLING,
-  PAIRED_COLUMNS_STYLING,
-  COLUMNS_STYLING,
-  REVIEW_BOTTOM_SPACING_STYLING,
-  REVIEW_SUB_HEADING_STYLING,
-} from './styling';
+  $ReviewControlHeader,
+  $ReviewFieldValuePair,
+} from './reviewUI/components';
 
 import { PARTNERSHIP_TYPE, LAST_MARRIAGE_STATUS } from './inputData';
 
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
-  partyLabel: string;
+  partnerLabel: string;
   firstName: string;
   lastName: string;
   middleName: string;
@@ -49,6 +42,7 @@ interface Props {
   bloodRelationDesc: string;
   suffix: string;
   partnershipState: string;
+  stepStr: string;
 }
 
 @observer
@@ -58,7 +52,25 @@ export default class PartnerView extends Component<Props> {
   }
 
   public render() {
-    const { suffix } = this.props;
+    const {
+      suffix,
+      firstName,
+      lastName,
+      surName,
+      occupation,
+      dob,
+      birthCity,
+      birthCountry,
+      address,
+      bloodRelation,
+      bloodRelationDesc,
+      marriageNumb,
+      partnerShipDissolve,
+      parentA,
+      parentB,
+      parentsMarriedAtBirth,
+      stepStr,
+    } = this.props;
 
     const partnerShipTypeObj = PARTNERSHIP_TYPE.find(
       entry => entry.value === this.props.partnerShipType
@@ -77,194 +89,112 @@ export default class PartnerView extends Component<Props> {
         ? lastMarriageStatusObj.label
         : '';
 
-    const lastName =
-      suffix && suffix !== 'N/A'
-        ? `${this.props.lastName} ${suffix}`
-        : `${this.props.lastName}`;
+    const lastNameStr =
+      suffix && suffix !== 'N/A' ? `${lastName} ${suffix}` : `${lastName}`;
 
     return (
       <div>
-        <div css={SECTION_WRAPPER_STYLING}>
-          <h2
-            css={[SECTION_HEADING_STYLING, BOTTOM_SPACING_STYLING]}
-            style={{
-              fontSize: '2rem',
-              textDecoration: 'none',
-            }}
-          >
-            Person {this.props.partyLabel}
-          </h2>
-
-          <div css={PAIRED_COLUMNS_STYLING}>
-            <div css={COLUMNS_STYLING}>
-              <label>First Name: </label>
-              {this.props.firstName}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Middle Name: </label>
-              {this.props.middleName}
-            </div>
+        {$ReviewControlHeader({
+          title: `Person ${this.props.partnerLabel}`,
+          btnStr: `Edit This Page`,
+          routeStep: `${stepStr}`,
+        })}
+
+        <div css={REVIEW_FORM_STYLING}>
+          <div className="section-wrapper">
+            <h2>Personal Information</h2>
+
+            {$ReviewFieldValuePair({
+              field: `Legal Name`,
+              value: `${firstName} ${lastNameStr}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `Last Name to be Used After Marriage`,
+              value: `${surName}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `Occupation`,
+              value: `${occupation}`,
+            })}
           </div>
 
-          <div css={PAIRED_COLUMNS_STYLING}>
-            <div css={COLUMNS_STYLING}>
-              <label>Last Name: </label>
-              {lastName}
-            </div>
+          <div className="section-wrapper">
+            <h2>Date and Place of Birth</h2>
 
-            <div css={COLUMNS_STYLING}>
-              <label>Last Name / Surname: </label>
-              {this.props.surName}
-            </div>
-          </div>
+            {$ReviewFieldValuePair({
+              field: `Date of Birth`,
+              value: `${dob}`,
+            })}
 
-          <div
-            css={[
-              BOTTOM_SPACING_STYLING,
-              PAIRED_COLUMNS_STYLING,
-              REVIEW_BOTTOM_SPACING_STYLING,
-              REVIEW_SUB_HEADING_STYLING,
-            ]}
-          >
-            <div css={COLUMNS_STYLING}>
-              <label>Date of Birth: </label>
-              {this.props.dob}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Age: </label>
-              {this.props.age}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Occupation: </label>
-              {this.props.occupation}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Address: </label>
-              {this.props.address}
-            </div>
+            {$ReviewFieldValuePair({
+              field: `BirthPlace`,
+              value: `${birthCity}, ${birthCountry}`,
+            })}
           </div>
 
-          <div
-            css={[
-              BOTTOM_SPACING_STYLING,
-              PAIRED_COLUMNS_STYLING,
-              REVIEW_BOTTOM_SPACING_STYLING,
-              REVIEW_SUB_HEADING_STYLING,
-            ]}
-          >
-            <h2 css={BOTTOM_SPACING_STYLING}>Birthplace</h2>
-
-            <div css={COLUMNS_STYLING}>
-              <label>City: </label>
-              {this.props.birthCity}
-            </div>
-
-            {this.props.birthState.length > 0 &&
-              this.props.birthState !== '--' && (
-                <div css={COLUMNS_STYLING}>
-                  <label>State: </label>
-                  {this.props.birthState}
-                </div>
-              )}
-
-            <div css={COLUMNS_STYLING}>
-              <label>Country: </label>
-              {this.props.birthCountry}
-            </div>
+          <div className="section-wrapper">
+            <h2>Residence</h2>
+
+            {$ReviewFieldValuePair({
+              field: `Address`,
+              value: `${address}`,
+            })}
           </div>
 
-          <div
-            css={[
-              BOTTOM_SPACING_STYLING,
-              PAIRED_COLUMNS_STYLING,
-              REVIEW_BOTTOM_SPACING_STYLING,
-              REVIEW_SUB_HEADING_STYLING,
-            ]}
-          >
-            <h2 css={BOTTOM_SPACING_STYLING}>Parents</h2>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Parent 1/Mother: </label>
-              {this.props.parentA}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Parent 2/Father: </label>
-              {this.props.parentB}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>
-                Were your parents married at the time of your birth?:
-              </label>
-              {` ${this.props.parentsMarriedAtBirth}`}
-            </div>
+          <div className="section-wrapper">
+            <h2>Marriage</h2>
+
+            {$ReviewFieldValuePair({
+              field: `If Applicable, Blood Relation To Current Partner`,
+              value: `${bloodRelation}`,
+            })}
+
+            {bloodRelation === 'Yes' &&
+              $ReviewFieldValuePair({
+                field: `Blood Relation Description`,
+                value: `${bloodRelationDesc}`,
+              })}
+
+            {$ReviewFieldValuePair({
+              field: `Marriage Number`,
+              value: `${marriageNumb}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `If Applicable, Status of Last Marriage`,
+              value: `${lastMarriageStatus}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `If Applicable, Status of Civil Union or Domestic Partnership`,
+              value: `${partnerShipDissolve}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `If Applicable, State of Civil Union or Domestic Partnership`,
+              value: `${partnerShipType}`,
+            })}
           </div>
 
-          <div
-            css={[
-              BOTTOM_SPACING_STYLING,
-              PAIRED_COLUMNS_STYLING,
-              REVIEW_BOTTOM_SPACING_STYLING,
-              MARRIAGE_INTENTION_FORM_STYLING,
-              REVIEW_SUB_HEADING_STYLING,
-            ]}
-          >
-            <h2 css={BOTTOM_SPACING_STYLING}>Marriage</h2>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Marriage Number: </label>
-              {this.props.marriageNumb}
-            </div>
-
-            {this.props.marriageNumb !== '1st' && (
-              <div css={COLUMNS_STYLING}>
-                <label>Last Marriage Status: </label>
-                {lastMarriageStatus}
-              </div>
-            )}
-
-            {this.props.marriageNumb !== '1st' && (
-              <div css={COLUMNS_STYLING}>
-                <label>Last Marriage Resolution: </label>
-                {this.props.partnerShipDissolve}
-              </div>
-            )}
-
-            <div css={COLUMNS_STYLING}>
-              <label>Current Partnership Type: </label>
-              {partnerShipType}
-            </div>
-
-            {this.props.partnerShipType !== 'N/A' && (
-              <div css={COLUMNS_STYLING}>
-                <label>Civil Union Or Domestic Partnership Dissolved: </label>
-                {this.props.partnerShipDissolve}
-              </div>
-            )}
-
-            {this.props.partnerShipType !== 'N/A' && (
-              <div css={COLUMNS_STYLING}>
-                <label>Partnership State: </label>
-                {this.props.partnershipState}
-              </div>
-            )}
-
-            <div css={COLUMNS_STYLING}>
-              <label>Blood Relation to Partner?: </label>
-              {this.props.bloodRelation}
-            </div>
-
-            {this.props.bloodRelation === 'Yes' && (
-              <div css={COLUMNS_STYLING}>
-                <label>Describe Blood Relation: </label>
-                {this.props.bloodRelationDesc}
-              </div>
-            )}
+          <div className="section-wrapper">
+            <h2>Parents</h2>
+
+            {$ReviewFieldValuePair({
+              field: `Parent 1`,
+              value: `${parentA}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `Parent 2`,
+              value: `${parentB}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `Status of Marriage at Time of Birth`,
+              value: `${parentsMarriedAtBirth}`,
+            })}
           </div>
         </div>
       </div>
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
index b8f7b2868..19ab48097 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
@@ -88,7 +88,7 @@ export default class ReviewForms extends Component<Props> {
             marriageIntentionCertificateRequest={
               this.props.marriageIntentionCertificateRequest
             }
-            partyLabel={'A'}
+            partnerLabel={'A'}
             firstName={requestInformation.partnerA_firstName}
             lastName={requestInformation.partnerA_lastName}
             suffix={requestInformation.partnerA_suffix}
@@ -134,6 +134,7 @@ export default class ReviewForms extends Component<Props> {
               ${requestInformation.partnerA_bloodRelationDesc}
             `}
             partnershipState={requestInformation.partnerA_partnershipState}
+            stepStr={`partnerFormA`}
           />
 
           {/* PARTY B */}
@@ -141,7 +142,7 @@ export default class ReviewForms extends Component<Props> {
             marriageIntentionCertificateRequest={
               this.props.marriageIntentionCertificateRequest
             }
-            partyLabel={'B'}
+            partnerLabel={'B'}
             firstName={requestInformation.partnerB_firstName}
             lastName={requestInformation.partnerB_lastName}
             suffix={requestInformation.partnerB_suffix}
@@ -187,11 +188,15 @@ export default class ReviewForms extends Component<Props> {
               ${requestInformation.partnerB_bloodRelationDesc}
             `}
             partnershipState={requestInformation.partnerB_partnershipState}
+            stepStr={`partnerFormB`}
           />
 
           <ContactUX
             appointmentDateTime={appointmentDateTime}
-            requestInformation={requestInformation}
+            requestInformation={{
+              email: requestInformation.email,
+              dayPhone: requestInformation.dayPhone,
+            }}
           />
         </div>
       </QuestionComponent>
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx
new file mode 100644
index 000000000..f252dfe2f
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx
@@ -0,0 +1,59 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/core';
+import Router from 'next/router';
+
+import { REVIEW_CONTROL_STYLING } from './reviewStying';
+
+/**
+ * @name $ReviewControlHeader
+ * @param {Object} params
+ * @param {String} params.title Header title
+ * @param {String} params.btnStr Button label/text
+ * @param {String} params.routeStep Router param(step as string)
+ * @returns JSX(HTML)
+ */
+export const $ReviewControlHeader = (params: {
+  title: string;
+  btnStr: string;
+  routeStep: string;
+}) => {
+  const { title, btnStr, routeStep } = params;
+  const stepBack = () => {
+    Router.push(`/marriageintention?step=${routeStep}`);
+  };
+
+  return (
+    <div css={REVIEW_CONTROL_STYLING}>
+      <div className="wrapper-title">
+        <h1>{title}</h1>
+      </div>
+
+      <div className="wrapper-btn">
+        <button type="button" className="btn btn--b-sm" onClick={stepBack}>
+          {btnStr}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * @name ReviewFieldValuePair
+ * @param {Object} params
+ * @param {String} params.field
+ * @param {String} params.value
+ * @returns JSX(HTML)
+ */
+export const $ReviewFieldValuePair = (params: {
+  field: string;
+  value: string;
+}) => {
+  const { field, value } = params;
+  return (
+    <div className="field-value-pair">
+      <label className="field">{field}: </label>
+      <span className="value">{value}</span>
+    </div>
+  );
+};
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
index ea553e67e..5130f3701 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
@@ -4,17 +4,9 @@ import { jsx } from '@emotion/core';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 
-import {
-  SECTION_HEADING_STYLING,
-  SECTION_WRAPPER_STYLING,
-  NAME_FIELDS_BASIC_CONTAINER_STYLING,
-} from '../../../common/question-components/styling';
-
-import {
-  MAIN_HEADING_STYLING,
-  PAIRED_COLUMNS_STYLING,
-  COLUMNS_STYLING,
-} from '../styling';
+import { REVIEW_FORM_STYLING } from './reviewStying';
+import { formatPhoneNumber } from '../../helpers/formUtils';
+import { $ReviewControlHeader, $ReviewFieldValuePair } from './components';
 
 interface Props {
   appointmentDateTime: string;
@@ -34,30 +26,34 @@ export default class ContactUX extends Component<Props> {
     const { appointmentDateTime, requestInformation } = this.props;
 
     return (
-      <>
-        <h1 css={[SECTION_HEADING_STYLING, MAIN_HEADING_STYLING]}>
-          Contact Information
-        </h1>
-
-        <div css={SECTION_WRAPPER_STYLING}>
-          <div css={PAIRED_COLUMNS_STYLING}>
-            <div css={COLUMNS_STYLING}>
-              <label>Email: </label>
-              {requestInformation.email}
-            </div>
-
-            <div css={COLUMNS_STYLING}>
-              <label>Phone #: </label>
-              {requestInformation.dayPhone}
-            </div>
-          </div>
-
-          <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-            <label>Appointment Date: </label>
-            {appointmentDateTime}
+      <div>
+        {$ReviewControlHeader({
+          title: `Contact Information`,
+          btnStr: `Edit This Page`,
+          routeStep: `contactInfo`,
+        })}
+
+        <div css={REVIEW_FORM_STYLING}>
+          <div className="section-wrapper">
+            <h2>Personal Information</h2>
+
+            {$ReviewFieldValuePair({
+              field: `Email`,
+              value: `${requestInformation.email}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `Phone #`,
+              value: `${formatPhoneNumber(requestInformation.dayPhone)}`,
+            })}
+
+            {$ReviewFieldValuePair({
+              field: `Appointment Date`,
+              value: `${appointmentDateTime}`,
+            })}
           </div>
         </div>
-      </>
+      </div>
     );
   }
 }
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
index 1e9c656db..03070a5f5 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
@@ -2,25 +2,25 @@
 
 import { jsx } from '@emotion/core';
 import { Component } from 'react';
-
-import { SECTION_HEADING_STYLING } from '../../../common/question-components/styling';
-
-import { MAIN_HEADING_STYLING } from '../styling';
+import { REVIEW_INTRO_HEADER_STYLING } from './reviewStying';
 
 export default class HeaderUX extends Component {
   public render() {
     return (
-      <>
+      <div css={[REVIEW_INTRO_HEADER_STYLING]}>
+        <h1>Review Information</h1>
+
         <p>
-          Please review the details below. If you notice any errors, click the
-          "back" button at the bottom of your screen and correct your
-          information before submitting this application.
+          <label>
+            Before you submit your application, please check your responses.
+          </label>{' '}
+          you need to make any changes, you can go back and edit the previous
+          pages. Please make sure your information is accurate. During your
+          appointment, we will review and finalize the information you share
+          here and make sure everything’s set before it is printed onto your
+          marriage intention form.
         </p>
-
-        <h1 css={[SECTION_HEADING_STYLING, MAIN_HEADING_STYLING]}>
-          Review Information
-        </h1>
-      </>
+      </div>
     );
   }
 }
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
new file mode 100644
index 000000000..1f47aff95
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
@@ -0,0 +1,100 @@
+import { css } from '@emotion/core';
+import {
+  CHARLES_BLUE,
+  OPTIMISTIC_BLUE_DARK,
+  WHITE,
+  SANS,
+  MEDIA_SMALL_MAX,
+} from '@cityofboston/react-fleet';
+
+export const REVIEW_INTRO_HEADER_STYLING = css({
+  fontSize: '0.9378rem',
+  marginBottom: '2em',
+  lineHeight: '1.4em',
+  color: `${CHARLES_BLUE}`,
+  fontFamily: 'Lora',
+
+  H1: {
+    fontWeight: 700,
+    fontSize: '1.88em',
+    textTransform: 'uppercase',
+    fontFamily: 'Montserrat !important',
+    lineHeight: '1.21em',
+    marginBottom: '0em',
+  },
+});
+
+export const REVIEW_CONTROL_STYLING = css(`
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  align-items: center;
+  margin: 1em 0;
+  color: #fff;
+
+  .wrapper-title {
+    flex-grow: 1;
+    
+    h1, h2 {
+      color: ${CHARLES_BLUE};
+      font-size: 1.5625em;
+      font-weight: 700;
+      text-transform: uppercase;
+      font-family: ${SANS};
+      line-height: 1.875em;
+    }
+
+    h2 {
+      font-size: 1.125;
+    }
+  }
+
+  .wrapper-btn {
+    .btn {
+      color: ${CHARLES_BLUE};
+      background: ${WHITE};
+      border: 2px solid ${CHARLES_BLUE};
+
+      &:hover {
+        color: ${WHITE};
+        background: ${OPTIMISTIC_BLUE_DARK};
+      }
+    }
+  }
+
+  ${MEDIA_SMALL_MAX} {
+    .wrapper-title {
+      h1 {
+        line-height: 1.25em;
+      }
+    }
+  }
+`);
+
+export const REVIEW_FORM_STYLING = css(`
+  .section-wrapper {
+    font-size: 0.9375em;
+    font-family: ${SANS};
+    margin-bottom: 1em;
+
+    h2 {
+      font-size: 1.125em;
+      font-weight: bold;
+      text-transform: uppercase;
+      margin-bottom: 0.5em;
+    }
+
+    .field-value-pair {
+      .field {
+        color: ${CHARLES_BLUE};
+        font-size: 0.9375em;
+        font-weight: 700;
+        text-transform: uppercase;
+      }
+
+      .value {
+        font-weight: normal;
+      }
+    }
+  }
+`);
diff --git a/services-js/registry-certs/client/marriageintention/forms/styling.tsx b/services-js/registry-certs/client/marriageintention/forms/styling.tsx
index 048140076..1c0e4a4f0 100644
--- a/services-js/registry-certs/client/marriageintention/forms/styling.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/styling.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/core';
 import { MEDIA_MEDIUM } from '@cityofboston/react-fleet';
 
 export const MI_REVIEW_STYLING = css({
-  fontSize: '1.35em',
+  fontSize: '0.9378em',
 
   label: {
     fontWeight: 'bold',
@@ -24,7 +24,6 @@ export const PAIRED_COLUMNS_STYLING = css({
     clear: 'both',
     minHeight: '1px',
     overflow: 'hidden',
-    // background: 'yellow',
   },
 });
 
diff --git a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
index 81ed5a00d..56813819c 100644
--- a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
+++ b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
@@ -83,3 +83,20 @@ export const yesNoAnswer = (
   if (typeof val === 'number') return val === 1 ? 'Yes' : 'No';
   return parseInt(val) === 1 ? 'Yes' : 'No';
 };
+
+/**
+ * @name formatPhoneNumber
+ * @description Format Phone number in US standard + country code
+ * @param phoneStr Phone # as a string
+ * @returns {string}
+ * @example formatPhoneNumber("16174450011") = "1 (617) 445-0011"
+ */
+export const formatPhoneNumber = (phoneStr: string): string => {
+  const cleaned = ('' + phoneStr).replace(/\D/g, '');
+  const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    const intlCode = match[1] ? '+1 ' : '';
+    return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
+  }
+  return '';
+};

From 6415eb39c51be3de581b8ae8c6657d8c472fdc9f Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Thu, 15 Feb 2024 21:49:07 -0500
Subject: [PATCH 08/28] DIG-3649: UI/UX Update Registry Marriage Intention -
 Contact Information

---
 .../src/form-elements/inputs/TextInput.tsx    |   4 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 708 ++++++++++++++----
 .../question-components/FieldsetComponent.tsx |  27 +-
 .../forms/FormPages.stories.tsx               |   2 +-
 .../marriageintention/forms/contactInfo.tsx   |  78 +-
 .../forms/contactUI/contactFormStyling.tsx    |  33 +
 .../forms/reviewUI/header.tsx                 |   2 +-
 .../forms/reviewUI/reviewStying.tsx           |  14 +-
 8 files changed, 700 insertions(+), 168 deletions(-)
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx

diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 0d027cf3c..7aee1b0fa 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -85,6 +85,7 @@ export default function TextInput(props: Props): JSX.Element {
       return label;
     }
   };
+  console.log('optionalDescription: ', props.optionalDescription);
 
   const optionalDescriptionElem = optionalDescription => {
     const cont = 'notice css-content-psedo';
@@ -127,7 +128,8 @@ export default function TextInput(props: Props): JSX.Element {
     <div className={props.className} style={props.style}>
       {!props.labelBelowInput && labelElem()}
       {props.labelBelowInput && spacer()}
-      {typeof props.optionalDescription !== 'undefined' &&
+      {props.optionalDescription &&
+        props.optionalDescription.length > 0 &&
         optionalDescriptionElem(props.optionalDescription)}
 
       <input
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 20c7c3a21..805f31543 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -4028,6 +4028,15 @@ exports[`Storyshots Birth/Question Components/BornInBoston initial question 1`]
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -4463,6 +4472,15 @@ exports[`Storyshots Birth/Question Components/BornInBoston may not have record 1
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -5051,6 +5069,15 @@ exports[`Storyshots Birth/Question Components/BornInBoston secondary question 1`
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -5619,6 +5646,15 @@ exports[`Storyshots Birth/Question Components/BornInBoston will not have record
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -6373,6 +6409,15 @@ exports[`Storyshots Birth/Question Components/ForWhom default 1`] = `
   color: #091f2f;
 }
 
+.emotion-6 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -6741,6 +6786,15 @@ exports[`Storyshots Birth/Question Components/ForWhom someone else’s 1`] = `
   color: #091f2f;
 }
 
+.emotion-6 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -7554,6 +7608,15 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
   color: #091f2f;
 }
 
+.emotion-7 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -7812,6 +7875,15 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
   color: #091f2f;
 }
 
+.emotion-3 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 <div
   className="b-c b-c--hsm"
 >
@@ -8243,6 +8315,15 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
   color: #091f2f;
 }
 
+.emotion-7 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -8501,6 +8582,15 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
   color: #091f2f;
 }
 
+.emotion-3 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 <div
   className="b-c b-c--hsm"
 >
@@ -8960,6 +9050,15 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
   color: #091f2f;
 }
 
+.emotion-7 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -9218,6 +9317,15 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
   color: #091f2f;
 }
 
+.emotion-3 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 <div
   className="b-c b-c--hsm"
 >
@@ -9675,6 +9783,15 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
   color: #091f2f;
 }
 
+.emotion-2 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -10179,6 +10296,15 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
   color: #091f2f;
 }
 
+.emotion-2 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -10658,6 +10784,15 @@ exports[`Storyshots Birth/Question Components/VerifyIdentification default 1`] =
   color: #091f2f;
 }
 
+.emotion-16 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -11392,6 +11527,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-10 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -12686,6 +12830,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-12 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -13502,6 +13655,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-6 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -14350,6 +14512,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-11 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -14608,6 +14779,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-7 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 <div
     className="mn--full-ie"
   >
@@ -15432,6 +15612,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-20 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -42238,6 +42427,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -42635,6 +42833,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -43065,6 +43272,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -44317,6 +44533,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-4 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -44928,6 +45153,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-6 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -45695,6 +45929,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-6 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -46471,6 +46714,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-9 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -63796,6 +64048,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-50 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -68285,6 +68546,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-50 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -72741,102 +73011,91 @@ Array [
   color: #d22d23;
 }
 
-.emotion-15 fieldset + fieldset {
+.emotion-14 fieldset + fieldset {
   margin-top: 2rem;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-15 fieldset + fieldset {
+  .emotion-14 fieldset + fieldset {
     margin-top: 4rem;
   }
 
-  .emotion-15 fieldset + fieldset .lnk {
+  .emotion-14 fieldset + fieldset .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-14 {
+.emotion-13 {
   margin: 0;
   padding: 0;
   border: none;
 }
 
-.emotion-14 legend {
+.emotion-13 legend {
   padding-left: 0;
   padding-right: 0;
   width: 100%;
 }
 
-.emotion-14 h2 {
+.emotion-13 h2 {
   margin-bottom: 0;
   font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   color: #091f2f;
 }
 
-.emotion-4 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-4.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
-}
-
-.emotion-4.secondary em {
-  font-size: 1rem;
+.emotion-13 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
 }
 
-.emotion-17 {
+.emotion-16 {
   text-align: center;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-17 {
+  .emotion-16 {
     margin-top: 2.5rem;
     text-align: left;
   }
 
-  .emotion-17 > div {
+  .emotion-16 > div {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 
-  .emotion-17 > div.ta-r > button {
+  .emotion-16 > div.ta-r > button {
     margin-left: auto;
   }
 
-  .emotion-17 .lnk {
+  .emotion-16 .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-16 {
+.emotion-15 {
   padding: 1.25rem !important;
   padding-left: 0 !important;
 }
 
-.emotion-11 {
+.emotion-10 {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-.emotion-11 legend {
+.emotion-10 legend {
   padding-left: 0;
   font-size: 120%;
 }
 
-.emotion-10 {
+.emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -72849,39 +73108,39 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-10 > div {
+.emotion-9 > div {
   -webkit-flex: 0 0 24%;
   -ms-flex: 0 0 24%;
   flex: 0 0 24%;
 }
 
-.emotion-10 > div:last-of-type {
+.emotion-9 > div:last-of-type {
   -webkit-flex: 0 0 50%;
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
 }
 
-.emotion-10 input {
+.emotion-9 input {
   -moz-appearance: textfield;
 }
 
-.emotion-10 input::-webkit-inner-spin-button {
+.emotion-9 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.emotion-10 input::-ms-clear {
+.emotion-9 input::-ms-clear {
   display: none;
 }
 
-.emotion-10 label {
+.emotion-9 label {
   margin-top: 0.5rem;
 }
 
-.emotion-10.disabled {
+.emotion-9.disabled {
   opacity: 0.4;
 }
 
-.emotion-10.disabled * {
+.emotion-9.disabled * {
   cursor: not-allowed;
 }
 
@@ -73026,7 +73285,7 @@ Array [
   }
 }
 
-.emotion-18 {
+.emotion-17 {
   padding: 0px;
 }
 
@@ -73041,18 +73300,18 @@ Array [
 }
 
 @media screen and (min-width:768px) {
-  .emotion-12 {
+  .emotion-11 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-12 > div {
+.emotion-11 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-12 > div {
+  .emotion-11 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -73060,17 +73319,17 @@ Array [
   }
 }
 
-.emotion-12 > .RADIOGROUP label {
+.emotion-11 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-12 h3 {
+.emotion-11 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-12 .notice {
+.emotion-11 .notice {
   font-size: 0.7em;
   clear: both;
   min-height: 1px;
@@ -73080,7 +73339,7 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-12 .emotion-5:after {
+.emotion-11 .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -73100,16 +73359,26 @@ Array [
   opacity: 0;
 }
 
-.emotion-13 h2 {
+.emotion-4 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125em;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  border-bottom: 4px solid #091f2f;
+  padding-bottom: 0.25em;
+}
+
+.emotion-12 h2 {
   font-size: 1.5rem;
 }
 
-.emotion-13 h4 {
+.emotion-12 h4 {
   font-size: 1.25rem;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 {
+  .emotion-7 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -73123,12 +73392,12 @@ Array [
   }
 }
 
-.emotion-8 > div {
+.emotion-7 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 > div {
+  .emotion-7 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -73137,28 +73406,28 @@ Array [
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 > div {
+  .emotion-7 > div {
     width: 50%;
   }
 
-  .emotion-8 .txt-f {
+  .emotion-7 .txt-f {
     width: 90%;
   }
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 {
+  .emotion-7 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-8 > div {
+.emotion-7 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 > div {
+  .emotion-7 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -73166,17 +73435,17 @@ Array [
   }
 }
 
-.emotion-8 > .RADIOGROUP label {
+.emotion-7 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-8 h3 {
+.emotion-7 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-8 .notice {
+.emotion-7 .notice {
   font-size: 0.7em;
   clear: both;
   min-height: 1px;
@@ -73186,11 +73455,49 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-8 .emotion-5:after {
+.emotion-7 .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-6 .contact-fields {
+  width: calc(50% - 10px);
+  margin-bottom: 10px;
+}
+
+.emotion-6 .contact-fields label:first-child {
+  margin-top: 1em;
+}
+
+.emotion-6 .contact-fields input.txt-f {
+  width: 100%;
+}
+
+.emotion-8 {
+  padding-bottom: 0.25rem;
+  marginBottom: 0;
+  font-weight: 700;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  font-size: 1.125rem !important;
+}
+
 <div
     className="mn--full-ie"
   >
@@ -73469,32 +73776,41 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-18"
+              className="b-c b-c--nbp emotion-17"
             >
               <div
-                className="emotion-15"
+                className="emotion-14"
               >
                 <fieldset
-                  className=" emotion-14"
+                  className=" emotion-13"
                 >
                   <legend>
                     <h2
                       className="emotion-4"
                     >
-                      Contact Information
+                      Contact Info
                     </h2>
                   </legend>
                   <div
-                    className="emotion-13"
+                    className="desc"
+                  >
+                    Please share the best email and phone number to get in contact with you. This will be used to contact you about your appointment.
+                  </div>
+                  <div
+                    className="emotion-12"
                   >
                     <div
-                      className="emotion-8"
+                      className="emotion-7"
                     >
-                      <div>
-                        <div>
+                      <div
+                        className="emotion-6"
+                      >
+                        <div
+                          className="contact-fields"
+                        >
                           <label
                             className="txt-l "
-                            htmlFor="input-1267882554"
+                            htmlFor="input-2778663327"
                             style={Object {}}
                           >
                             <span
@@ -73505,7 +73821,7 @@ Array [
                                 }
                               }
                             >
-                              Phone Number
+                              EMail Address
                             </span>
                             <span
                               aria-hidden="true"
@@ -73514,21 +73830,13 @@ Array [
                               Required
                             </span>
                           </label>
-                          <label
-                            className="notice emotion-5"
-                          >
-                            Numbers only, no spaces or dashes needed.
-                          </label>
+                          
                           <input
                             aria-label=""
                             className="txt-f  "
-                            id="input-1267882554"
-                            maxLength={14}
-                            minLength={10}
-                            name="dayPhone"
+                            id="input-2778663327"
+                            name="email"
                             onChange={[Function]}
-                            onKeyDown={[Function]}
-                            placeholder="(___) ___-____"
                             required={true}
                             type="text"
                             value=""
@@ -73539,12 +73847,12 @@ Array [
                              
                           </div>
                         </div>
-                      </div>
-                      <div>
-                        <div>
+                        <div
+                          className="contact-fields"
+                        >
                           <label
                             className="txt-l "
-                            htmlFor="input-2778663327"
+                            htmlFor="input-1813726221"
                             style={Object {}}
                           >
                             <span
@@ -73555,7 +73863,7 @@ Array [
                                 }
                               }
                             >
-                              EMail Address
+                              Confirm EMail Address
                             </span>
                             <span
                               aria-hidden="true"
@@ -73564,16 +73872,12 @@ Array [
                               Required
                             </span>
                           </label>
-                          <label
-                            className="notice emotion-5"
-                          >
-                            
-                          </label>
+                          
                           <input
                             aria-label=""
                             className="txt-f  "
-                            id="input-2778663327"
-                            name="email"
+                            id="input-1813726221"
+                            name="emailConfirm"
                             onChange={[Function]}
                             required={true}
                             type="text"
@@ -73585,10 +73889,12 @@ Array [
                              
                           </div>
                         </div>
-                        <div>
+                        <div
+                          className="contact-fields"
+                        >
                           <label
                             className="txt-l "
-                            htmlFor="input-1813726221"
+                            htmlFor="input-1267882554"
                             style={Object {}}
                           >
                             <span
@@ -73599,7 +73905,7 @@ Array [
                                 }
                               }
                             >
-                              Confirm EMail Address
+                              Phone Number
                             </span>
                             <span
                               aria-hidden="true"
@@ -73611,14 +73917,18 @@ Array [
                           <label
                             className="notice emotion-5"
                           >
-                            
+                            Numbers only, no spaces or dashes needed.
                           </label>
                           <input
                             aria-label=""
                             className="txt-f  "
-                            id="input-1813726221"
-                            name="emailConfirm"
+                            id="input-1267882554"
+                            maxLength={14}
+                            minLength={10}
+                            name="dayPhone"
                             onChange={[Function]}
+                            onKeyDown={[Function]}
+                            placeholder="(___) ___-____"
                             required={true}
                             type="text"
                             value=""
@@ -73632,7 +73942,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      className="emotion-12"
+                      className="emotion-11"
                       style={
                         Object {
                           "paddingTop": "1.5rem",
@@ -73640,7 +73950,7 @@ Array [
                       }
                     >
                       <fieldset
-                        className="emotion-11"
+                        className="emotion-10"
                       >
                         <div>
                           <legend
@@ -73651,18 +73961,18 @@ Array [
                             }
                           >
                             <h2
-                              className="emotion-4"
+                              className="emotion-8"
                               style={
                                 Object {
                                   "marginBottom": "1.5rem",
                                 }
                               }
                             >
-                              What is your appointment date?
+                              Appointment Date
                             </h2>
                           </legend>
                           <div
-                            className=" emotion-10"
+                            className=" emotion-9"
                           >
                             <div>
                               <label
@@ -73738,13 +74048,13 @@ Array [
                 </fieldset>
               </div>
               <div
-                className="g g--mr emotion-17"
+                className="g g--mr emotion-16"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-16"
+                    className="lnk emotion-15"
                     onClick={[Function]}
                     type="button"
                   >
@@ -73882,7 +74192,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 5. Review - Contact [Sect
 .emotion-0 .wrapper-title h1,
 .emotion-0 .wrapper-title h2 {
   color: #091f2f;
-  font-size: 1.5625em;
+  font-size: 1.5625rem;
   font-weight: 700;
   text-transform: uppercase;
   font-family: Montserrat,Arial,sans-serif;
@@ -73890,7 +74200,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 5. Review - Contact [Sect
 }
 
 .emotion-0 .wrapper-title h2 {
-  font-size: 1.125;
+  font-size: 1.125rem;
 }
 
 .emotion-0 .wrapper-btn .btn {
@@ -73911,21 +74221,22 @@ exports[`Storyshots Marriage Intention/Form Pages Step 5. Review - Contact [Sect
 }
 
 .emotion-1 .section-wrapper {
-  font-size: 0.9375em;
+  font-size: 0.9375rem;
   font-family: Montserrat,Arial,sans-serif;
   margin-bottom: 1em;
 }
 
 .emotion-1 .section-wrapper h2 {
-  font-size: 1.125em;
+  color: #091f2f;
+  font-size: 1.125rem;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 0.5em;
 }
 
 .emotion-1 .section-wrapper .field-value-pair .field {
-  color: #091f2f;
-  font-size: 0.9375em;
+  color: #58585b;
+  font-size: 0.9375rem;
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -74346,7 +74657,7 @@ Array [
 .emotion-5 .wrapper-title h1,
 .emotion-5 .wrapper-title h2 {
   color: #091f2f;
-  font-size: 1.5625em;
+  font-size: 1.5625rem;
   font-weight: 700;
   text-transform: uppercase;
   font-family: Montserrat,Arial,sans-serif;
@@ -74354,7 +74665,7 @@ Array [
 }
 
 .emotion-5 .wrapper-title h2 {
-  font-size: 1.125;
+  font-size: 1.125rem;
 }
 
 .emotion-5 .wrapper-btn .btn {
@@ -74375,21 +74686,22 @@ Array [
 }
 
 .emotion-6 .section-wrapper {
-  font-size: 0.9375em;
+  font-size: 0.9375rem;
   font-family: Montserrat,Arial,sans-serif;
   margin-bottom: 1em;
 }
 
 .emotion-6 .section-wrapper h2 {
-  font-size: 1.125em;
+  color: #091f2f;
+  font-size: 1.125rem;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 0.5em;
 }
 
 .emotion-6 .section-wrapper .field-value-pair .field {
-  color: #091f2f;
-  font-size: 0.9375em;
+  color: #58585b;
+  font-size: 0.9375rem;
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -74624,7 +74936,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="completed current"
+                  className="completed"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -74635,7 +74947,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="uncompleted focused"
+                  className="completed focused current"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -74695,7 +75007,7 @@ Array [
                         Before you submit your application, please check your responses.
                       </label>
                        
-                      you need to make any changes, you can go back and edit the previous pages. Please make sure your information is accurate. During your appointment, we will review and finalize the information you share here and make sure everything’s set before it is printed onto your marriage intention form.
+                      If you need to make any changes, you can go back and edit the previous pages. Please make sure your information is accurate. During your appointment, we will review and finalize the information you share here and make sure everything’s set before it is printed onto your marriage intention form.
                     </p>
                   </div>
                   <div>
@@ -75487,7 +75799,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Person Info Vie
 .emotion-0 .wrapper-title h1,
 .emotion-0 .wrapper-title h2 {
   color: #091f2f;
-  font-size: 1.5625em;
+  font-size: 1.5625rem;
   font-weight: 700;
   text-transform: uppercase;
   font-family: Montserrat,Arial,sans-serif;
@@ -75495,7 +75807,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Person Info Vie
 }
 
 .emotion-0 .wrapper-title h2 {
-  font-size: 1.125;
+  font-size: 1.125rem;
 }
 
 .emotion-0 .wrapper-btn .btn {
@@ -75516,21 +75828,22 @@ exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Person Info Vie
 }
 
 .emotion-1 .section-wrapper {
-  font-size: 0.9375em;
+  font-size: 0.9375rem;
   font-family: Montserrat,Arial,sans-serif;
   margin-bottom: 1em;
 }
 
 .emotion-1 .section-wrapper h2 {
-  font-size: 1.125em;
+  color: #091f2f;
+  font-size: 1.125rem;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 0.5em;
 }
 
 .emotion-1 .section-wrapper .field-value-pair .field {
-  color: #091f2f;
-  font-size: 0.9375em;
+  color: #58585b;
+  font-size: 0.9375rem;
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -75944,6 +76257,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -84991,6 +85313,15 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston default 1`] = `
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -85432,6 +85763,15 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston user has selected
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -85895,6 +86235,15 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston user is not sure
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -86356,6 +86705,15 @@ exports[`Storyshots Marriage/Question Components/ForWhom default 1`] = `
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -86769,6 +87127,15 @@ exports[`Storyshots Marriage/Question Components/ForWhom someone else’s 1`] =
   color: #091f2f;
 }
 
+.emotion-8 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -87182,6 +87549,15 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
   color: #091f2f;
 }
 
+.emotion-5 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -87847,6 +88223,15 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
   color: #091f2f;
 }
 
+.emotion-5 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -88507,6 +88892,15 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
   color: #091f2f;
 }
 
+.emotion-5 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -89179,6 +89573,15 @@ exports[`Storyshots Marriage/Question Components/VerifyIdentification default 1`
   color: #091f2f;
 }
 
+.emotion-16 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -89902,6 +90305,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-12 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -91241,6 +91653,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-12 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -92821,6 +93242,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-9 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -93862,6 +94292,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-9 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
@@ -94915,6 +95354,15 @@ Array [
   color: #091f2f;
 }
 
+.emotion-20 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
diff --git a/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx b/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx
index 9887b584f..a803f92d0 100644
--- a/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx
+++ b/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx
@@ -4,12 +4,18 @@ import { css, jsx } from '@emotion/core';
 
 import { ReactNode } from 'react';
 
-import { CHARLES_BLUE, SANS } from '@cityofboston/react-fleet';
+import {
+  CHARLES_BLUE,
+  SANS,
+  SERIF,
+  DEFAULT_TEXT,
+} from '@cityofboston/react-fleet';
 
 interface Props {
   legendText: ReactNode;
   children: ReactNode;
   className?: string;
+  description?: string | null;
 }
 
 /**
@@ -17,9 +23,15 @@ interface Props {
  * Some questions will contain multiple fieldsets.
  */
 export default function FieldsetComponent(props: Props): JSX.Element {
+  const { legendText, className, description } = props;
+  console.log('desc: ', description);
   return (
-    <fieldset className={props.className || ''} css={FIELDSET_STYLING}>
-      <legend>{props.legendText}</legend>
+    <fieldset className={className || ''} css={FIELDSET_STYLING}>
+      <legend>{legendText}</legend>
+
+      {description && description.length > 0 && (
+        <div className="desc">{description}</div>
+      )}
 
       {props.children}
     </fieldset>
@@ -43,4 +55,13 @@ export const FIELDSET_STYLING = css({
     fontWeight: 700,
     color: CHARLES_BLUE,
   },
+
+  '.desc': {
+    margin: '0.5rem 0 0.75rem',
+    fontFamily: SERIF,
+    fontSize: '0.9375em',
+    fontWeight: 100,
+    color: DEFAULT_TEXT,
+    lineHeight: '1.2em',
+  },
 });
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
index f16fd80c0..47ad39754 100644
--- a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -70,7 +70,7 @@ storiesOf('Marriage Intention/Form Pages', module)
       siteAnalytics={new GaSiteAnalytics()}
       marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
       marriageIntentionDao={new MarriageIntentionDao(null as any)}
-      completedSteps={new Set([0, 1, 2, 3])}
+      completedSteps={new Set([0, 1, 2, 3, 4])}
     />
   ))
   .add('Step 5. Review/Person Info View', () => {
diff --git a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
index d3fc6be8a..e536d299c 100644
--- a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
@@ -1,11 +1,16 @@
 /** @jsx jsx */
 
-import { jsx } from '@emotion/core';
+import { jsx, css } from '@emotion/core';
 
 import { ChangeEvent, Component, MouseEvent } from 'react';
 import { observer } from 'mobx-react';
 
-import { TextInput, MemorableDateInput } from '@cityofboston/react-fleet';
+import {
+  TextInput,
+  MemorableDateInput,
+  SANS,
+  CHARLES_BLUE,
+} from '@cityofboston/react-fleet';
 
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 
@@ -15,11 +20,16 @@ import FieldsetComponent from '../../common/question-components/FieldsetComponen
 import {
   MARRIAGE_INTENTION_FORM_STYLING,
   PAIRED_INPUT_STYLING,
-  SECTION_HEADING_STYLING,
+  // SECTION_HEADING_STYLING,
   NAME_FIELDS_CONTAINER_STYLING,
   NAME_FIELDS_BASIC_CONTAINER_STYLING,
 } from '../../common/question-components/styling';
 
+import {
+  CONTACTFORM_HEADER_STYLING,
+  CONTACTFORM_CONTACT_FIELD_STYLING,
+} from './contactUI/contactFormStyling';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
@@ -143,9 +153,8 @@ export default class ContactInfo extends Component<Props> {
         nextButtonText={'NEXT'}
       >
         <FieldsetComponent
-          legendText={
-            <h2 css={SECTION_HEADING_STYLING}>Contact Information</h2>
-          }
+          legendText={<h2 css={[CONTACTFORM_HEADER_STYLING]}>Contact Info</h2>}
+          description={`Please share the best email and phone number to get in contact with you. This will be used to contact you about your appointment.`}
         >
           <div css={MARRIAGE_INTENTION_FORM_STYLING}>
             <div
@@ -155,24 +164,7 @@ export default class ContactInfo extends Component<Props> {
                 NAME_FIELDS_BASIC_CONTAINER_STYLING,
               ]}
             >
-              <div>
-                <TextInput
-                  label="Phone Number"
-                  name="dayPhone"
-                  value={dayPhone}
-                  onChange={this.handlePhoneChange}
-                  maxLength={14}
-                  minLength={10}
-                  optionalDescription={
-                    'Numbers only, no spaces or dashes needed.'
-                  }
-                  onKeyDown={this.processOnKeyDown}
-                  placeholder={'(___) ___-____'}
-                  required={true}
-                />
-              </div>
-
-              <div>
+              <div css={CONTACTFORM_CONTACT_FIELD_STYLING}>
                 <TextInput
                   label="EMail Address"
                   name="email"
@@ -180,6 +172,7 @@ export default class ContactInfo extends Component<Props> {
                   onChange={this.handleChange}
                   optionalDescription={''}
                   required={true}
+                  className={'contact-fields'}
                 />
 
                 <TextInput
@@ -190,6 +183,23 @@ export default class ContactInfo extends Component<Props> {
                   optionalDescription={''}
                   required={true}
                   error={email === emailConfirm ? '' : 'Email does not match'}
+                  className={'contact-fields'}
+                />
+
+                <TextInput
+                  label="Phone Number"
+                  name="dayPhone"
+                  value={dayPhone}
+                  onChange={this.handlePhoneChange}
+                  maxLength={14}
+                  minLength={10}
+                  optionalDescription={
+                    'Numbers only, no spaces or dashes needed.'
+                  }
+                  onKeyDown={this.processOnKeyDown}
+                  placeholder={'(___) ___-____'}
+                  required={true}
+                  className={'contact-fields'}
                 />
               </div>
             </div>
@@ -200,10 +210,13 @@ export default class ContactInfo extends Component<Props> {
               <MemorableDateInput
                 legend={
                   <h2
-                    css={SECTION_HEADING_STYLING}
+                    css={[
+                      // SECTION_HEADING_STYLING,
+                      APPT_HEADER_STYLING,
+                    ]}
                     style={{ marginBottom: '1.5rem' }}
                   >
-                    What is your appointment date?
+                    Appointment Date
                   </h2>
                 }
                 initialDate={appointmentDate || undefined}
@@ -220,3 +233,16 @@ export default class ContactInfo extends Component<Props> {
     );
   }
 }
+
+export const THICK_BORDER_STYLE = `4px solid ${CHARLES_BLUE}`;
+const APPT_HEADER_STYLING = css(`
+  padding-bottom: 0.25rem;
+  marginBottom: 0;
+  font-weight: 700;
+  color: ${CHARLES_BLUE};
+  border-bottom: ${THICK_BORDER_STYLE};
+
+  text-transform: uppercase;
+  font-family: ${SANS};
+  font-size: 1.125rem !important;
+`);
diff --git a/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx b/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx
new file mode 100644
index 000000000..fd1d0e847
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx
@@ -0,0 +1,33 @@
+import { css } from '@emotion/core';
+import { SANS, CHARLES_BLUE } from '@cityofboston/react-fleet';
+import { THICK_BORDER_STYLE } from '../../styling/../../common/question-components/styling';
+
+export const CONTACTFORM_HEADER_STYLING = css(`
+  color: ${CHARLES_BLUE};
+  font-weight: 700;
+  font-size: 1.125em;
+  font-family: ${SANS};
+  text-transform: uppercase;
+  border-bottom: ${THICK_BORDER_STYLE};
+  padding-bottom: 0.25em;
+`);
+
+export const CONTACTFORM_CONTACT_FIELD_STYLING = css(`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .contact-fields {
+    width: calc(50% - 10px); 
+    margin-bottom: 10px;
+    // background: green;
+
+    label:first-child {
+      margin-top: 1em;
+    }
+
+    input.txt-f {
+      width: 100%;
+    }
+  }
+`);
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
index 03070a5f5..2c7d6838c 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
@@ -14,7 +14,7 @@ export default class HeaderUX extends Component {
           <label>
             Before you submit your application, please check your responses.
           </label>{' '}
-          you need to make any changes, you can go back and edit the previous
+          If you need to make any changes, you can go back and edit the previous
           pages. Please make sure your information is accurate. During your
           appointment, we will review and finalize the information you share
           here and make sure everything’s set before it is printed onto your
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
index 1f47aff95..249fe6439 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
@@ -5,6 +5,7 @@ import {
   WHITE,
   SANS,
   MEDIA_SMALL_MAX,
+  DEFAULT_TEXT,
 } from '@cityofboston/react-fleet';
 
 export const REVIEW_INTRO_HEADER_STYLING = css({
@@ -37,7 +38,7 @@ export const REVIEW_CONTROL_STYLING = css(`
     
     h1, h2 {
       color: ${CHARLES_BLUE};
-      font-size: 1.5625em;
+      font-size: 1.5625rem;
       font-weight: 700;
       text-transform: uppercase;
       font-family: ${SANS};
@@ -45,7 +46,7 @@ export const REVIEW_CONTROL_STYLING = css(`
     }
 
     h2 {
-      font-size: 1.125;
+      font-size: 1.125rem;
     }
   }
 
@@ -73,12 +74,13 @@ export const REVIEW_CONTROL_STYLING = css(`
 
 export const REVIEW_FORM_STYLING = css(`
   .section-wrapper {
-    font-size: 0.9375em;
+    font-size: 0.9375rem;
     font-family: ${SANS};
     margin-bottom: 1em;
 
     h2 {
-      font-size: 1.125em;
+      color: ${CHARLES_BLUE};
+      font-size: 1.125rem;
       font-weight: bold;
       text-transform: uppercase;
       margin-bottom: 0.5em;
@@ -86,8 +88,8 @@ export const REVIEW_FORM_STYLING = css(`
 
     .field-value-pair {
       .field {
-        color: ${CHARLES_BLUE};
-        font-size: 0.9375em;
+        color: ${DEFAULT_TEXT};
+        font-size: 0.9375rem;
         font-weight: 700;
         text-transform: uppercase;
       }

From cf7e14bd1e492381b1ee92655ba1337b6ba8b7ab Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Fri, 16 Feb 2024 17:18:19 -0500
Subject: [PATCH 09/28] DIG-3451/3452/3558/3557/3568/3569/3571: Registry
 Marriage Intention UI/UX Updates

---
 .../src/__snapshots__/Storyshots.test.ts.snap |  1619 +-
 .../src/components/ProgressNav.tsx            |    27 +-
 .../form-elements/SelectDropdown.stories.tsx  |    40 +
 .../src/form-elements/SelectDropdown.tsx      |    61 +-
 .../react-fleet/src/form-elements/ToolTip.tsx |    96 +
 .../inputs/MemorableDateInput.tsx             |   118 +-
 .../form-elements/inputs/Radio.stories.tsx    |    25 +
 .../src/form-elements/inputs/Radio.tsx        |    21 +-
 .../inputs/TextInput.stories.tsx              |    57 +
 .../src/form-elements/inputs/TextInput.tsx    |    59 +-
 modules-js/react-fleet/src/react-fleet.ts     |     1 +
 .../__snapshots__/Storyshots.test.ts.snap     |    86 +
 .../__snapshots__/Storyshots.test.ts.snap     |   834 +-
 .../__snapshots__/Storyshots.test.ts.snap     |    90 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 22951 ++++++++++++----
 .../question-components/FieldsetComponent.tsx |     2 +-
 .../common/question-components/styling.tsx    |    73 +-
 .../forms/FormPages.stories.tsx               |   269 +-
 .../marriageintention/forms/contactInfo.tsx   |     4 +-
 .../marriageintention/forms/eventHandlers.ts  |   113 +
 .../marriageintention/forms/inputData.tsx     |   428 +-
 .../marriageintention/forms/partnerForm.tsx   |  1113 -
 .../marriageintention/forms/partnerFormA.tsx  |   279 +-
 .../marriageintention/forms/partnerFormB.tsx  |   271 +-
 .../marriageintention/forms/partnerFormUI.tsx |  1157 +-
 .../marriageintention/forms/reviewForms.tsx   |     4 +-
 .../forms/reviewUI/header.tsx                 |     2 +-
 .../marriageintention/helpers/formUtils.ts    |     2 +-
 .../client/marriageintention/index.tsx        |    53 +-
 .../MarriageIntentionCertificateRequest.ts    |    23 +-
 services-js/registry-certs/client/types.ts    |     6 +
 .../registry-certs/server/graphql/mutation.ts |     1 -
 .../server/services/RegistryDb.ts             |     1 -
 services-js/registry-certs/utils/data.ts      |   404 +
 34 files changed, 21859 insertions(+), 8431 deletions(-)
 create mode 100644 modules-js/react-fleet/src/form-elements/ToolTip.tsx
 create mode 100644 services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
 delete mode 100644 services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx
 create mode 100644 services-js/registry-certs/utils/data.ts

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 0323c4665..a81404522 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -965,6 +965,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput default 1`] = `
           htmlFor="default-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -987,6 +998,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput default 1`] = `
           htmlFor="default-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1009,6 +1031,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput default 1`] = `
           htmlFor="default-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1115,6 +1148,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput earliestDate: 9/7/16
           htmlFor="earliest-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1137,6 +1181,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput earliestDate: 9/7/16
           htmlFor="earliest-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1159,6 +1214,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput earliestDate: 9/7/16
           htmlFor="earliest-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1265,6 +1331,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput invalid initialDate
           htmlFor="initial-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1287,6 +1364,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput invalid initialDate
           htmlFor="initial-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1309,6 +1397,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput invalid initialDate
           htmlFor="initial-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1420,6 +1519,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput latestDate: 12/31/20
           htmlFor="latest-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1442,6 +1552,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput latestDate: 12/31/20
           htmlFor="latest-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1464,6 +1585,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput latestDate: 12/31/20
           htmlFor="latest-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1570,6 +1702,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
           htmlFor="future-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1592,6 +1735,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
           htmlFor="future-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1614,6 +1768,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
           htmlFor="future-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1720,6 +1885,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1742,6 +1918,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1764,6 +1951,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1870,6 +2068,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1892,6 +2101,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -1914,6 +2134,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2020,6 +2251,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2042,6 +2284,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2064,6 +2317,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
           htmlFor="story-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2170,6 +2434,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
           htmlFor="past-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2192,6 +2467,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
           htmlFor="past-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2214,6 +2500,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
           htmlFor="past-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2320,6 +2617,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
           htmlFor="initial-month"
         >
           Month
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2342,6 +2650,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
           htmlFor="initial-day"
         >
           Day
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2364,6 +2683,17 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
           htmlFor="initial-year"
         >
           Year
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "marginLeft": "0.35em",
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           className="txt-f"
@@ -2412,6 +2742,11 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group 1`] = `
   <div
     className="txt-l"
     id="favorite-flower-groupLabel"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
   >
     Favorite Flower
   </div>
@@ -2524,6 +2859,11 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels as Markup 1`]
   <div
     className="txt-l"
     id="time-of-day-groupLabel"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
   >
     Time of Day
   </div>
@@ -2575,34 +2915,326 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels as Markup 1`]
 </div>
 `;
 
-exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
+exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired, Tool Tip 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-0 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-0 .icon::before {
+  content: '?';
+}
+
+.emotion-0 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-0 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-0 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-0 .icon:hover + .msg {
+  visibility: visible;
+}
+
 <div
-  style={
-    Object {
-      "margin": "2rem auto",
-      "maxWidth": "768px",
-    }
-  }
+  aria-labelledby="time-of-day-groupLabel"
+  role="group"
 >
-  <div>
-    <label
-      className="txt-l "
-      htmlFor="input-362326901"
-      style={Object {}}
-    >
-      <span
-        style={
-          Object {
-            "marginRight": "0.5em",
-            "whiteSpace": "nowrap",
-          }
+  <div
+    className="txt-l"
+    id="time-of-day-groupLabel"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    Time of Day
+    <span
+      className="t--req"
+      style={
+        Object {
+          "display": "flex",
+          "paddingLeft": "0.25em",
         }
+      }
+    >
+      Required
+    </span>
+    <span
+      className="tool-tip__wrapper emotion-0"
+    >
+      <div
+        className="icon tt--info"
+      />
+      <div
+        className="msg"
       >
-        Standard text input
-      </span>
-    </label>
-    <input
-      aria-label=""
+        This information is collected as required by the Massachusetts State Marriage Intention Form.
+      </div>
+    </span>
+  </div>
+  <label
+    className="ra  "
+  >
+    <input
+      className="ra-f"
+      name="time-of-day"
+      type="radio"
+      value="morning"
+    />
+    <h2
+      className="m-l200"
+    >
+      Morning
+    </h2>
+  </label>
+  <label
+    className="ra  "
+  >
+    <input
+      className="ra-f"
+      name="time-of-day"
+      type="radio"
+      value="afternoon"
+    />
+    <h2
+      className="m-l200"
+    >
+      Afternoon
+    </h2>
+  </label>
+  <label
+    className="ra  "
+  >
+    <input
+      className="ra-f"
+      name="time-of-day"
+      type="radio"
+      value="evening"
+    />
+    <h2
+      className="m-l200"
+    >
+      Evening
+    </h2>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, Tool Tip 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-0 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-0 .icon::before {
+  content: '?';
+}
+
+.emotion-0 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-0 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-0 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-0 .icon:hover + .msg {
+  visibility: visible;
+}
+
+<div
+  aria-labelledby="time-of-day-groupLabel"
+  role="group"
+>
+  <div
+    className="txt-l"
+    id="time-of-day-groupLabel"
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  >
+    Time of Day
+    <span
+      className="tool-tip__wrapper emotion-0"
+    >
+      <div
+        className="icon"
+      />
+      <div
+        className="msg"
+      >
+        This information is collected as required by the Massachusetts State Marriage Intention Form.
+      </div>
+    </span>
+  </div>
+  <label
+    className="ra  "
+  >
+    <input
+      className="ra-f"
+      name="time-of-day"
+      type="radio"
+      value="morning"
+    />
+    <h2
+      className="m-l200"
+    >
+      Morning
+    </h2>
+  </label>
+  <label
+    className="ra  "
+  >
+    <input
+      className="ra-f"
+      name="time-of-day"
+      type="radio"
+      value="afternoon"
+    />
+    <h2
+      className="m-l200"
+    >
+      Afternoon
+    </h2>
+  </label>
+  <label
+    className="ra  "
+  >
+    <input
+      className="ra-f"
+      name="time-of-day"
+      type="radio"
+      value="evening"
+    />
+    <h2
+      className="m-l200"
+    >
+      Evening
+    </h2>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-362326901"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Standard text input
+      </span>
+    </label>
+    <input
+      aria-label=""
       className="txt-f  "
       disabled={false}
       id="input-362326901"
@@ -2632,11 +3264,16 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
     <label
       className="txt-l "
       htmlFor="input-2348632648"
-      style={Object {}}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
@@ -2661,11 +3298,16 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
     <label
       className="txt-l "
       htmlFor="input-3077581017"
-      style={Object {}}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
@@ -2702,11 +3344,16 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     <label
       className="txt-l "
       htmlFor="input-1357588218"
-      style={Object {}}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
@@ -2717,6 +3364,12 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       <span
         aria-hidden="true"
         className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
       >
         Required
       </span>
@@ -2738,11 +3391,16 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     <label
       className="txt-l "
       htmlFor="input-3174958747"
-      style={Object {}}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
@@ -2769,11 +3427,16 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       <label
         className="txt-l "
         htmlFor="input-423803610"
-        style={Object {}}
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
         <span
           style={
             Object {
+              "display": "flex",
               "marginRight": "0.5em",
               "whiteSpace": "nowrap",
             }
@@ -2801,7 +3464,11 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     <label
       className="txt-l "
       htmlFor="input-5381"
-      style={Object {}}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
@@ -2841,11 +3508,16 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     <label
       className="txt-l txt-l--sm"
       htmlFor="input-472033325"
-      style={Object {}}
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
@@ -2870,7 +3542,69 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
 </div>
 `;
 
-exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
+exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-0 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-0 .icon::before {
+  content: '?';
+}
+
+.emotion-0 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-0 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-0 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-0 .icon:hover + .msg {
+  visibility: visible;
+}
+
 <div
   style={
     Object {
@@ -2881,75 +3615,502 @@ exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
 >
   <div>
     <label
-      className="txt-l "
-      htmlFor="select-572458229"
-      style={Object {}}
+      className="txt-l "
+      htmlFor="input-362326901"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Standard text input
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+        <span
+          className="tool-tip__wrapper emotion-0"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            This information is collected.
+          </div>
+        </span>
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      disabled={false}
+      id="input-362326901"
+      placeholder=""
+      required={false}
+      type="text"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+    <input
+      aria-label=""
+      className="txt-f  "
+      disabled={false}
+      id="input-362326901"
+      placeholder=""
+      required={false}
+      type="text"
+    />
+    <label
+      className="txt-l "
+      htmlFor="input-362326901"
+      style={
+        Object {
+          "display": "flex",
+          "marginBottom": "2em",
+          "marginTop": "1em",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Standard text input
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+        <span
+          className="tool-tip__wrapper emotion-0"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+          </div>
+        </span>
+      </span>
+    </label>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-362326901"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Standard text input
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+        <span
+          className="tool-tip__wrapper emotion-0"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+          </div>
+        </span>
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      disabled={false}
+      id="input-362326901"
+      placeholder=""
+      required={true}
+      type="text"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="select-572458229"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Default Dropdown
+      </span>
+    </label>
+    <div
+      className="sel-c  "
+    >
+      <select
+        aria-label=""
+        className="sel-f  "
+        disabled={false}
+        id="select-572458229"
+        onChange={[Function]}
+        required={false}
+      >
+        <option />
+        <option>
+          Apples
+        </option>
+        <option>
+          Oranges
+        </option>
+        <option>
+          Pears
+        </option>
+      </select>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-0 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-0 .icon::before {
+  content: '?';
+}
+
+.emotion-0 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-0 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-0 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-0 .icon:hover + .msg {
+  visibility: visible;
+}
+
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="select-4229616983"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Required Dropdown
+      </span>
+      <span
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        Required
+      </span>
+    </label>
+    <div
+      className="sel-c  "
+    >
+      <select
+        aria-label=""
+        className="sel-f  "
+        id="select-4229616983"
+        required={true}
+      >
+        <option />
+        <option>
+          Finch
+        </option>
+        <option>
+          Nuthatch
+        </option>
+        <option>
+          Sparrow
+        </option>
+      </select>
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="select-4147655300"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Dropdown With Error
+      </span>
+      <span
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        Required
+      </span>
+    </label>
+    <div
+      className="sel-c  sel-c--err"
+    >
+      <select
+        aria-label=""
+        className="sel-f  sel-f--err"
+        defaultValue="Pac-Man"
+        id="select-4147655300"
+        required={true}
+      >
+        <option />
+        <option>
+          Pac-Man
+        </option>
+        <option>
+          Q-Bert
+        </option>
+        <option>
+          Tetris
+        </option>
+      </select>
+    </div>
+  </div>
+  <br />
+  <div>
+    <label
+      className="txt-l txt-l--sm"
+      htmlFor="select-4045240769"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
         }
       >
-        Default Dropdown
+        Small Dropdown
       </span>
     </label>
     <div
-      className="sel-c  "
+      className="sel-c sel-c--thin "
     >
       <select
         aria-label=""
-        className="sel-f  "
-        disabled={false}
-        id="select-572458229"
-        onChange={[Function]}
-        required={false}
+        className="sel-f sel-f--thin "
+        id="select-4045240769"
       >
-        <option />
         <option>
-          Apples
+          Ash
         </option>
         <option>
-          Oranges
+          Maple
         </option>
         <option>
-          Pears
+          Willow
         </option>
       </select>
     </div>
   </div>
-</div>
-`;
-
-exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
-<div
-  style={
-    Object {
-      "margin": "2rem auto",
-      "maxWidth": "768px",
-    }
-  }
->
+  <br />
   <div>
     <label
       className="txt-l "
-      htmlFor="select-4229616983"
-      style={Object {}}
+      htmlFor="select-49712226"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
         }
       >
-        Required Dropdown
+        Label/Value Options Object
       </span>
       <span
         className="t--req"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
         Required
       </span>
@@ -2960,63 +4121,90 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
       <select
         aria-label=""
         className="sel-f  "
-        id="select-4229616983"
+        id="select-49712226"
         required={true}
       >
-        <option />
-        <option>
-          Finch
+        <option
+          value="Does Not Apply"
+        >
+          Does Not Apply
         </option>
-        <option>
-          Nuthatch
+        <option
+          value="Civil Unions"
+        >
+          Civil Unions
         </option>
-        <option>
-          Sparrow
+        <option
+          value="Domestic Partnership"
+        >
+          Domestic Partnership
         </option>
       </select>
     </div>
   </div>
+  <br />
   <div>
     <label
       className="txt-l "
-      htmlFor="select-4147655300"
-      style={Object {}}
+      htmlFor="select-297758554"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
         }
       >
-        Dropdown With Error
+        Required Dropdown w/Tool Tip
       </span>
       <span
         className="t--req"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
         Required
+        <span
+          className="tool-tip__wrapper emotion-0"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+          </div>
+        </span>
       </span>
     </label>
     <div
-      className="sel-c  sel-c--err"
+      className="sel-c  "
     >
       <select
         aria-label=""
-        className="sel-f  sel-f--err"
-        defaultValue="Pac-Man"
-        id="select-4147655300"
+        className="sel-f  "
+        id="select-297758554"
         required={true}
       >
         <option />
         <option>
-          Pac-Man
+          Finch
         </option>
         <option>
-          Q-Bert
+          Nuthatch
         </option>
         <option>
-          Tetris
+          Sparrow
         </option>
       </select>
     </div>
@@ -3024,37 +4212,65 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   <br />
   <div>
     <label
-      className="txt-l txt-l--sm"
-      htmlFor="select-4045240769"
-      style={Object {}}
+      className="txt-l "
+      htmlFor="select-1072838292"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
           }
         }
       >
-        Small Dropdown
+        Soft-Required Dropdown
+      </span>
+      <span
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        Required
+        <span
+          className="tool-tip__wrapper emotion-0"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+          </div>
+        </span>
       </span>
     </label>
     <div
-      className="sel-c sel-c--thin "
+      className="sel-c  "
     >
       <select
         aria-label=""
-        className="sel-f sel-f--thin "
-        id="select-4045240769"
+        className="sel-f  "
+        id="select-1072838292"
       >
+        <option />
         <option>
-          Ash
+          Finch
         </option>
         <option>
-          Maple
+          Nuthatch
         </option>
         <option>
-          Willow
+          Sparrow
         </option>
       </select>
     </div>
@@ -3063,23 +4279,44 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   <div>
     <label
       className="txt-l "
-      htmlFor="select-49712226"
-      style={Object {}}
+      htmlFor="select-3540638923"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
     >
       <span
         style={
           Object {
+            "display": "flex",
             "marginRight": "0.5em",
-            "whiteSpace": "nowrap",
           }
         }
       >
-        Label/Value Options Object
+        Required Dropdown w/Tool Tip, max-width set
       </span>
       <span
         className="t--req"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
         Required
+        <span
+          className="tool-tip__wrapper emotion-0"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+          </div>
+        </span>
       </span>
     </label>
     <div
@@ -3088,23 +4325,18 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
       <select
         aria-label=""
         className="sel-f  "
-        id="select-49712226"
+        id="select-3540638923"
         required={true}
       >
-        <option
-          value="Does Not Apply"
-        >
-          Does Not Apply
+        <option />
+        <option>
+          Finch
         </option>
-        <option
-          value="Civil Unions"
-        >
-          Civil Unions
+        <option>
+          Nuthatch
         </option>
-        <option
-          value="Domestic Partnership"
-        >
-          Domestic Partnership
+        <option>
+          Sparrow
         </option>
       </select>
     </div>
@@ -4666,7 +5898,6 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -4674,6 +5905,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -4685,18 +5917,13 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -4706,11 +5933,10 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -4791,6 +6017,13 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -4901,7 +6134,6 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -4909,6 +6141,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -4920,18 +6153,13 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -4941,11 +6169,10 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -5026,6 +6253,13 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -5136,7 +6370,6 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -5144,6 +6377,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -5155,18 +6389,13 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -5176,11 +6405,10 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -5261,6 +6489,13 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -5371,7 +6606,6 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -5379,6 +6613,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -5390,18 +6625,13 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -5411,11 +6641,10 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -5496,6 +6725,13 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -5606,7 +6842,6 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -5614,6 +6849,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -5625,18 +6861,13 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -5646,11 +6877,10 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -5731,6 +6961,13 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -5841,7 +7078,6 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -5849,6 +7085,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -5860,18 +7097,13 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -5881,11 +7113,10 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -5966,6 +7197,13 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -6076,7 +7314,6 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -6084,6 +7321,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -6095,18 +7333,13 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -6116,11 +7349,10 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -6201,6 +7433,13 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
diff --git a/modules-js/react-fleet/src/components/ProgressNav.tsx b/modules-js/react-fleet/src/components/ProgressNav.tsx
index c77616d04..2bc58e690 100644
--- a/modules-js/react-fleet/src/components/ProgressNav.tsx
+++ b/modules-js/react-fleet/src/components/ProgressNav.tsx
@@ -7,6 +7,7 @@ import {
   WHITE,
   OPTIMISTIC_BLUE_DARK,
   GRAY_200,
+  SANS,
 } from '../utilities/constants';
 
 interface Props {
@@ -131,22 +132,23 @@ const PROGRESSBAR_STYLE = css`
 
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
+  // grid-template-columns: repeat(3; 1fr);
 
   .progressbar {
     display: flex;
+    width: 100%;
     flex-direction: column;
     align-items: stretch;
 
     .nav {
       display: table;
-      flex-flow: row wrap;
-      align-items: center;
+      table-layout: fixed;
       text-align: center;
       line-height: normal;
       font-style: normal;
       font-weight: bold;
-      font-family: Lora, serif;
+      font-family: ${SANS};
+      text-transform: uppercase;
       color: '#58585B';
 
       a {
@@ -155,12 +157,10 @@ const PROGRESSBAR_STYLE = css`
         border-color: black;
         border-style: solid;
         border-left-width: 0;
-        padding: 0.85em 0em;
-        min-width: 80px;
+        padding: 0.85em 0.5em;
         color: black;
         background: ${WHITE};
-
-        min-width: 120px;
+        width: 2%;
         font-size: 0.85em;
 
         &:last-child {
@@ -243,4 +243,15 @@ const PROGRESSBAR_STYLE = css`
       }
     }
   }
+
+  @media (min-width: 541px) and (max-width: 1024px) {
+    .progressbar {
+      .nav {
+        a {
+          padding: 0.85em 0;
+          font-size: 0.55rem;
+        }
+      }
+    }
+  }
 `;
diff --git a/modules-js/react-fleet/src/form-elements/SelectDropdown.stories.tsx b/modules-js/react-fleet/src/form-elements/SelectDropdown.stories.tsx
index 2a3988867..1b8c21c12 100644
--- a/modules-js/react-fleet/src/form-elements/SelectDropdown.stories.tsx
+++ b/modules-js/react-fleet/src/form-elements/SelectDropdown.stories.tsx
@@ -74,5 +74,45 @@ storiesOf('Form Elements|SelectDropdown', module)
         hideBlankOption
         options={PARTNERSHIP_TYPE}
       />
+
+      <br />
+
+      <SelectDropdown
+        label="Required Dropdown w/Tool Tip"
+        options={['Finch', 'Nuthatch', 'Sparrow']}
+        required
+        toolTip={{
+          icon: '?',
+          msg:
+            'If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.',
+        }}
+      />
+
+      <br />
+
+      <SelectDropdown
+        label="Soft-Required Dropdown"
+        options={['Finch', 'Nuthatch', 'Sparrow']}
+        softRequired={true}
+        toolTip={{
+          icon: '?',
+          msg:
+            'If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.',
+        }}
+      />
+
+      <br />
+
+      <SelectDropdown
+        label="Required Dropdown w/Tool Tip, max-width set"
+        options={['Finch', 'Nuthatch', 'Sparrow']}
+        required
+        disableLabelNoWrap
+        toolTip={{
+          icon: '?',
+          msg:
+            'If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.',
+        }}
+      />
     </>
   ));
diff --git a/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx b/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx
index 05ee5b886..000abb170 100644
--- a/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx
+++ b/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx
@@ -19,8 +19,11 @@ interface Props {
   name?: string;
   defaultValue?: string;
   required?: boolean;
+  softRequired?: boolean;
+  toolTip?: { icon: string; msg: string };
   disableLabelNoWrap?: boolean;
   labelBelowInput?: boolean;
+  optionalDescription?: string;
 
   value?: string;
   disabled?: boolean;
@@ -31,6 +34,8 @@ interface Props {
   onFocus?(e: any): void;
 }
 
+import { ToolTip } from './ToolTip';
+
 /**
  * Stateless dropdown select component.
  *
@@ -44,6 +49,8 @@ interface Props {
  * todo: currently assumes it will receive an array of strings to create its <option>s; there may be cases when we want an option to have a different value from its displayed text, and pass in an array of objects instead. - 9/21 jm
  */
 export default function SelectDropdown(props: Props): JSX.Element {
+  const { toolTip } = props;
+
   const id = props.id || `select-${hash(props.label)}`;
 
   const classNames = {
@@ -70,10 +77,48 @@ export default function SelectDropdown(props: Props): JSX.Element {
     }
   };
 
+  const optionalDescriptionElem = optionalDescription => {
+    const cont = 'notice css-content-psedo';
+    return <label className={cont}>{optionalDescription}</label>;
+  };
+
+  const requireStr = () => {
+    const { softRequired } = props;
+    let retStr = `Required`;
+    if (typeof softRequired === 'boolean' && softRequired === false) {
+      retStr = `Optional`;
+    }
+
+    return retStr;
+  };
+
+  let cssObj_labelReq = { 't--req': 't--req' };
+
+  if (typeof props.softRequired === 'boolean' && props.softRequired === false) {
+    cssObj_labelReq['t--opt'] = 't--opt';
+  }
+
+  // Filter out object key/value with empty strings eq. ``
+  Object.keys(cssObj_labelReq).forEach(
+    k => cssObj_labelReq[k] == '' && delete cssObj_labelReq[k]
+  );
+
+  // Output obj values as string of classNames
+  let cssArrToString: string = Object.keys(cssObj_labelReq)
+    .map(obj => cssObj_labelReq[obj])
+    .toString()
+    .replace(/,/g, ' ');
+
   const labelElem = (label): React.ReactChild => {
-    const modLabelStyle = { marginTop: '1em', marginBottom: '2em' };
-    const optStyles = props.labelBelowInput ? modLabelStyle : {};
-    let styleObj = { marginRight: '0.5em' };
+    const modLabelStyle = {
+      marginTop: '1em',
+      marginBottom: '2em',
+      display: 'flex',
+    };
+    const optStyles = props.labelBelowInput
+      ? modLabelStyle
+      : { display: 'flex' };
+    let styleObj = { marginRight: '0.5em', display: 'flex' };
     if (!props.disableLabelNoWrap) {
       styleObj['whiteSpace'] = 'nowrap';
     }
@@ -81,7 +126,12 @@ export default function SelectDropdown(props: Props): JSX.Element {
     return (
       <label htmlFor={id} className={classNames.label} style={optStyles}>
         {props.hideLabel ? <>&nbsp;</> : <span style={styleObj}>{label}</span>}
-        {props.required && <span className="t--req">Required</span>}
+        {(props.required || typeof props.softRequired === 'boolean') && (
+          <span className={`${cssArrToString}`} style={{ display: 'flex' }}>
+            {requireStr()}
+            {toolTip && ToolTip({ icon: toolTip.icon, msg: toolTip.msg })}
+          </span>
+        )}
       </label>
     );
   };
@@ -103,6 +153,9 @@ export default function SelectDropdown(props: Props): JSX.Element {
     <div className={props.className} style={props.style}>
       {!props.labelBelowInput && labelElem(props.label)}
       {props.labelBelowInput && spacer()}
+      {props.optionalDescription &&
+        props.optionalDescription.length > 0 &&
+        optionalDescriptionElem(props.optionalDescription)}
 
       <div className={classNames.container}>
         <select
diff --git a/modules-js/react-fleet/src/form-elements/ToolTip.tsx b/modules-js/react-fleet/src/form-elements/ToolTip.tsx
new file mode 100644
index 000000000..fc88f8238
--- /dev/null
+++ b/modules-js/react-fleet/src/form-elements/ToolTip.tsx
@@ -0,0 +1,96 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/core';
+
+import {
+  SERIF,
+  OPTIMISTIC_BLUE_DARK,
+  DEFAULT_TEXT,
+  GRAY_000,
+} from '../utilities/constants';
+
+export const ToolTip = (data: {
+  icon: string | '? | i';
+  msg: string;
+}): JSX.Element => {
+  const { icon, msg } = data;
+
+  const $wrapper = css(`
+    display: flex;
+    flex-grow: 1;
+    position: relative;
+
+    .icon {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      font-size: 0.75rem;
+      background: ${OPTIMISTIC_BLUE_DARK};
+
+      margin: 5px 0px 0 5px;
+      padding: 5.4px 0 0 3.00px;
+      line-height: 0px;
+      font-size: 8px;
+      color: white;
+
+      &::before {
+        content: '?';
+      }
+    }
+
+    .tt--info {
+      text-transform: lowercase;
+      padding-left: 3.5px;
+      &::before { content: 'i' }
+    }
+
+    .msg {
+      flex-grow: 1;
+      visibility: hidden;
+      z-index: 2;
+
+      
+      padding: 0.25em 0.5em;
+      color: ${DEFAULT_TEXT};
+      font-family: ${SERIF};
+      font-weight: 300;
+      font-style: italic;
+      text-transform: initial;
+      background-color: ${GRAY_000};
+      
+      min-width: 150px;
+
+      position: absolute;
+      margin-left: 20px;
+      top: calc(-30% + 1px);
+    }
+
+    .icon:hover + .msg { visibility: visible; }
+  `);
+
+  let cssObj_labelReq = { icon: 'icon' };
+
+  if (icon && icon === 'i') {
+    cssObj_labelReq['tt--info'] = 'tt--info';
+  }
+
+  // Filter out object key/value with empty strings eq. ``
+  Object.keys(cssObj_labelReq).forEach(
+    k => cssObj_labelReq[k] == '' && delete cssObj_labelReq[k]
+  );
+
+  // Output obj values as string of classNames
+  let cssArrToString: string = Object.keys(cssObj_labelReq)
+    .map(obj => cssObj_labelReq[obj])
+    .toString()
+    .replace(/,/g, ' ');
+
+  return (
+    <span className={'tool-tip__wrapper'} css={$wrapper}>
+      <div className={cssArrToString} />
+      <div className="msg">{msg}</div>
+    </span>
+  );
+};
+
+export default ToolTip;
diff --git a/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx
index f018a97c9..48cfcc649 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx
@@ -10,6 +10,12 @@ type Fields = {
   day: string;
 };
 
+type InputsRequired = {
+  day?: 'soft' | 'hard' | 'optional';
+  month?: 'soft' | 'hard' | 'optional';
+  year?: 'soft' | 'hard' | 'optional';
+};
+
 interface Props {
   componentId?: string;
   initialDate?: Date;
@@ -25,6 +31,9 @@ interface Props {
   resetDate?: boolean;
   disabled?: boolean;
   modDateTime?: boolean;
+  className?: string;
+  cssObj?: any;
+  requires?: InputsRequired;
 }
 
 interface State {
@@ -245,6 +254,78 @@ export default class MemorableDateInput extends React.Component<Props, State> {
   }
 
   public render() {
+    const requires = this.props.requires ? this.props.requires : {};
+
+    const checkRequires = (): {
+      required: true | false;
+      fields?: Array<string>;
+      reqType?: InputsRequired;
+    } => {
+      if (Object.keys(requires).length < 1) {
+        return { required: false };
+      } else {
+        return {
+          required: true,
+          fields: Object.keys(requires),
+          reqType: requires,
+        };
+      }
+    };
+    const requiredFields = checkRequires();
+
+    const labelElem = (labelStr: string) => {
+      let reqElem = () => {
+        const reqType = requiredFields.reqType
+          ? requiredFields.reqType[labelStr]
+          : { labelStr: '' };
+
+        let cssObj_labelReq = { 't--req': 't--req' };
+
+        if (reqType === 'optional') {
+          cssObj_labelReq['t--opt'] = 't--opt';
+        }
+
+        // Output obj values as string of classNames
+        let cssArrToString: string = Object.keys(cssObj_labelReq)
+          .map(obj => cssObj_labelReq[obj])
+          .toString()
+          .replace(/,/g, ' ');
+
+        // if (requiredFields.reqType[labelStr]) {}
+        const requireStr = () => {
+          let retStr = `Required`;
+
+          if (reqType === 'optional') {
+            retStr = `Optional`;
+          }
+
+          return retStr;
+        };
+        const optStyles = { marginLeft: '0.35em' };
+
+        return (
+          <>
+            <span
+              className={`${cssArrToString}`}
+              aria-hidden="true"
+              style={optStyles}
+            >
+              {requireStr()}
+            </span>
+          </>
+        );
+      };
+
+      return (
+        <>
+          <label htmlFor={`${this.componentId}-${labelStr}`} className="txt-l">
+            {labelStr.charAt(0).toUpperCase() + labelStr.slice(1)}
+            {reqElem()}
+          </label>
+        </>
+      );
+    };
+
     const inputAttributes = {
       type: 'number',
       className: 'txt-f',
@@ -253,7 +334,21 @@ export default class MemorableDateInput extends React.Component<Props, State> {
       onFocus: this.handleFocus,
     };
 
-    const { legend } = this.props;
+    let dayAttributes = { ...inputAttributes };
+    let monthAttributes = { ...inputAttributes };
+    let yearAttributes = { ...inputAttributes };
+
+    if (requiredFields.required === true) {
+      for (const [key, value] of Object.entries(requires)) {
+        if (value === 'hard' && key === 'day') dayAttributes['required'] = true;
+        if (value === 'hard' && key === 'month')
+          monthAttributes['required'] = true;
+        if (value === 'hard' && key === 'year')
+          yearAttributes['required'] = true;
+      }
+    }
+
+    const { legend, cssObj } = this.props;
 
     const error = this.currentError();
 
@@ -271,7 +366,7 @@ export default class MemorableDateInput extends React.Component<Props, State> {
 
     const content = () => {
       return (
-        <div>
+        <div css={cssObj}>
           {legend && legendElem()}
 
           <div
@@ -279,11 +374,9 @@ export default class MemorableDateInput extends React.Component<Props, State> {
             className={this.props.disabled ? 'disabled' : ''}
           >
             <div>
-              <label htmlFor={`${this.componentId}-month`} className="txt-l">
-                Month
-              </label>
+              {labelElem(`month`)}
               <input
-                {...inputAttributes}
+                {...monthAttributes}
                 id={`${this.componentId}-month`}
                 name="month"
                 min="1"
@@ -296,11 +389,9 @@ export default class MemorableDateInput extends React.Component<Props, State> {
             </div>
 
             <div>
-              <label htmlFor={`${this.componentId}-day`} className="txt-l">
-                Day
-              </label>
+              {labelElem(`day`)}
               <input
-                {...inputAttributes}
+                {...dayAttributes}
                 id={`${this.componentId}-day`}
                 name="day"
                 min="1"
@@ -313,12 +404,9 @@ export default class MemorableDateInput extends React.Component<Props, State> {
             </div>
 
             <div>
-              <label htmlFor={`${this.componentId}-year`} className="txt-l">
-                Year
-              </label>
-
+              {labelElem(`year`)}
               <input
-                {...inputAttributes}
+                {...yearAttributes}
                 id={`${this.componentId}-year`}
                 name="year"
                 min={this.earliest ? this.earliest.getUTCFullYear() : '1000'}
diff --git a/modules-js/react-fleet/src/form-elements/inputs/Radio.stories.tsx b/modules-js/react-fleet/src/form-elements/inputs/Radio.stories.tsx
index 9ef674206..344686fc6 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/Radio.stories.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/Radio.stories.tsx
@@ -58,4 +58,29 @@ storiesOf('Form Elements|Inputs/Radio', module)
       name="time-of-day"
       groupLabel="Time of Day"
     />
+  ))
+  .add('Radio Group, Labels, Tool Tip', () => (
+    <RadioGroup
+      items={radioGroupAltLabels}
+      name="time-of-day"
+      groupLabel="Time of Day"
+      toolTip={{
+        icon: '?',
+        msg:
+          'This information is collected as required by the Massachusetts State Marriage Intention Form.',
+      }}
+    />
+  ))
+  .add('Radio Group, Labels, SoftRequired, Tool Tip', () => (
+    <RadioGroup
+      items={radioGroupAltLabels}
+      name="time-of-day"
+      groupLabel="Time of Day"
+      softRequired={true}
+      toolTip={{
+        icon: 'i',
+        msg:
+          'This information is collected as required by the Massachusetts State Marriage Intention Form.',
+      }}
+    />
   ));
diff --git a/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx b/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx
index abdcf2bc9..3362d72cd 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx
@@ -1,5 +1,7 @@
 import React, { ChangeEvent, FocusEvent, ReactNode } from 'react';
 
+import { ToolTip } from '../ToolTip';
+
 interface RadioProps {
   name: string;
   label: string | ReactNode;
@@ -10,6 +12,8 @@ interface RadioProps {
   checked?: boolean;
   style?: object;
   className?: string;
+  softRequired?: boolean;
+  toolTip?: { icon: string; msg: string };
 
   onChange?(e: ChangeEvent<HTMLInputElement>): void;
   onBlur?(e: FocusEvent<HTMLInputElement>): void;
@@ -58,6 +62,8 @@ interface RadioGroupProps {
   itemsClassName?: string;
   style?: object;
   itemsStyle?: object;
+  softRequired?: boolean;
+  toolTip?: { icon: string; msg: string };
 
   handleItemChange?(e: ChangeEvent<HTMLInputElement>): void;
   handleItemBlur?(e: FocusEvent<HTMLInputElement>): void;
@@ -79,6 +85,8 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
     ? (ariaProps['aria-label'] = props.groupLabel)
     : (ariaProps['aria-labelledby'] = `${props.name}-groupLabel`);
 
+  const softRequiredCss = { paddingLeft: '0.25em', display: 'flex' };
+
   return (
     <div
       role="group"
@@ -87,8 +95,19 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
       {...ariaProps}
     >
       {!props.hideLabel && (
-        <div className="txt-l" id={`${props.name}-groupLabel`}>
+        <div
+          className="txt-l"
+          id={`${props.name}-groupLabel`}
+          style={{ display: 'flex' }}
+        >
           {props.groupLabel}
+          {props.softRequired && (
+            <span className={`t--req`} style={softRequiredCss}>
+              Required
+            </span>
+          )}
+          {props.toolTip &&
+            ToolTip({ icon: props.toolTip.icon, msg: props.toolTip.msg })}
         </div>
       )}
 
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
index de2358774..436f8779e 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
@@ -65,3 +65,60 @@ storiesOf('Form Elements|Inputs/TextInput', module)
       <TextInput label="Boolean error" error />
     </>
   ));
+
+storiesOf('Form Elements|Inputs/TextInput', module)
+  .addDecorator(withKnobs)
+  .addDecorator(story => <NarrowWrapper>{story()}</NarrowWrapper>)
+  .add('w/Tool Tip: Short & Long', () => {
+    return (
+      <>
+        <TextInput
+          label={text('Label text', 'Standard text input')}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', false)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', false)}
+          softRequired={true}
+          toolTip={{
+            icon: '?',
+            msg: 'This information is collected.',
+          }}
+          // labelBelowInput={true}
+          // optionalDescription={`Optional Description`}
+        />
+
+        <TextInput
+          label={text('Label text', 'Standard text input')}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', false)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', false)}
+          softRequired={true}
+          toolTip={{
+            icon: '?',
+            msg:
+              'Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.',
+          }}
+          labelBelowInput={true}
+          // optionalDescription={`Optional Description`}
+        />
+
+        <TextInput
+          label={text('Label text', 'Standard text input')}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', true)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', false)}
+          toolTip={{
+            icon: '?',
+            msg:
+              'Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.',
+          }}
+          // optionalDescription={`Optional Description`}
+        />
+      </>
+    );
+  });
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 7aee1b0fa..8d3f5ed93 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -41,6 +41,8 @@ type Props = {
   optionalDescription?: string;
 
   required?: boolean;
+  softRequired?: boolean;
+  toolTip?: { icon: string; msg: string };
   inputMode?: string;
   maxLength?: number;
   minLength?: number;
@@ -63,7 +65,11 @@ type Props = {
       label: string | React.ReactChild;
     });
 
+import { ToolTip } from '../ToolTip';
+
 export default function TextInput(props: Props): JSX.Element {
+  const { toolTip } = props;
+
   const id = props.id || `input-${hash(props.label)}`;
 
   const classNames = {
@@ -75,7 +81,7 @@ export default function TextInput(props: Props): JSX.Element {
 
   const labelText = (label): React.ReactChild => {
     if (typeof label === 'string') {
-      let styleObj = { marginRight: '0.5em' };
+      let styleObj = { marginRight: '0.5em', display: 'flex' };
       if (!props.disableLabelNoWrap) {
         styleObj['whiteSpace'] = 'nowrap';
       }
@@ -85,16 +91,48 @@ export default function TextInput(props: Props): JSX.Element {
       return label;
     }
   };
-  console.log('optionalDescription: ', props.optionalDescription);
 
   const optionalDescriptionElem = optionalDescription => {
     const cont = 'notice css-content-psedo';
     return <label className={cont}>{optionalDescription}</label>;
   };
 
+  const requireStr = () => {
+    const { softRequired } = props;
+    let retStr = `Required`;
+    if (typeof softRequired === 'boolean' && softRequired === false) {
+      retStr = `Optional`;
+    }
+
+    return retStr;
+  };
+
+  let cssObj_labelReq = { 't--req': 't--req' };
+
+  if (typeof props.softRequired === 'boolean' && props.softRequired === false) {
+    cssObj_labelReq['t--opt'] = 't--opt';
+  }
+
+  // Filter out object key/value with empty strings eq. ``
+  Object.keys(cssObj_labelReq).forEach(
+    k => cssObj_labelReq[k] == '' && delete cssObj_labelReq[k]
+  );
+
+  // Output obj values as string of classNames
+  let cssArrToString: string = Object.keys(cssObj_labelReq)
+    .map(obj => cssObj_labelReq[obj])
+    .toString()
+    .replace(/,/g, ' ');
+
   const labelElem = () => {
-    const modLabelStyle = { marginTop: '1em', marginBottom: '2em' };
-    const optStyles = props.labelBelowInput ? modLabelStyle : {};
+    const modLabelStyle = {
+      marginTop: '1em',
+      marginBottom: '2em',
+      display: 'flex',
+    };
+    const optStyles = props.labelBelowInput
+      ? modLabelStyle
+      : { display: 'flex' };
 
     return (
       <label htmlFor={id} className={classNames.label} style={optStyles}>
@@ -102,9 +140,16 @@ export default function TextInput(props: Props): JSX.Element {
 
         {/* Because “required” attribute is set on <input> element, */}
         {/* hide this from screen readers to cut down on repetition. */}
-        {props.required && (
-          <span className="t--req" aria-hidden="true">
-            Required
+        {((typeof props.required === 'boolean' && props.required === true) ||
+          (typeof props.softRequired === 'boolean' &&
+            props.softRequired === true)) && (
+          <span
+            className={`${cssArrToString}`}
+            aria-hidden="true"
+            style={{ display: 'flex', flexGrow: 1 }}
+          >
+            {requireStr()}
+            {toolTip && ToolTip({ icon: `${toolTip.icon}`, msg: toolTip.msg })}
           </span>
         )}
       </label>
diff --git a/modules-js/react-fleet/src/react-fleet.ts b/modules-js/react-fleet/src/react-fleet.ts
index 8c1dee529..355159f28 100644
--- a/modules-js/react-fleet/src/react-fleet.ts
+++ b/modules-js/react-fleet/src/react-fleet.ts
@@ -27,5 +27,6 @@ export { default as SectionHeader } from './sectioning-elements/SectionHeader';
 export { default as StatusModal } from './components/StatusModal';
 export { default as Textarea } from './form-elements/inputs/Textarea';
 export { default as TextInput } from './form-elements/inputs/TextInput';
+export { default as ToolTip } from './form-elements/ToolTip';
 export { default as ErrorPage } from './pages/ErrorPage';
 export { default as UploadPhoto } from './form-elements/UploadPhoto';
diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
index c9057de21..dc91ad824 100644
--- a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -3527,6 +3527,17 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                         htmlFor="dob-month"
                       >
                         Month
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "marginLeft": "0.35em",
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         className="txt-f"
@@ -3550,6 +3561,17 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                         htmlFor="dob-day"
                       >
                         Day
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "marginLeft": "0.35em",
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         className="txt-f"
@@ -3573,6 +3595,17 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                         htmlFor="dob-year"
                       >
                         Year
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "marginLeft": "0.35em",
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         className="txt-f"
@@ -3957,6 +3990,17 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                         htmlFor="dob-month"
                       >
                         Month
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "marginLeft": "0.35em",
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         className="txt-f"
@@ -3979,6 +4023,17 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                         htmlFor="dob-day"
                       >
                         Day
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "marginLeft": "0.35em",
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         className="txt-f"
@@ -4001,6 +4056,17 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                         htmlFor="dob-year"
                       >
                         Year
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "marginLeft": "0.35em",
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         className="txt-f"
@@ -11233,6 +11299,11 @@ exports[`Storyshots RegisterMfaPage default 1`] = `
           <div
             className="txt-l"
             id="smsOrVoice-groupLabel"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             How should we send security codes?
           </div>
@@ -11775,6 +11846,11 @@ exports[`Storyshots RegisterMfaPage modal open 1`] = `
           <div
             className="txt-l"
             id="smsOrVoice-groupLabel"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             How should we send security codes?
           </div>
@@ -12136,6 +12212,11 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm code sending error 1`
       <div
         className="txt-l"
         id="smsOrVoice-groupLabel"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
         How should we send security codes?
       </div>
@@ -12475,6 +12556,11 @@ exports[`Storyshots RegisterMfaPage/DeviceVerificationForm phone 1`] = `
       <div
         className="txt-l"
         id="smsOrVoice-groupLabel"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
         How should we send security codes?
       </div>
diff --git a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
index af77192da..b41fa9970 100644
--- a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -50,11 +50,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-firstName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -65,6 +70,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -92,11 +103,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-middleName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -127,11 +143,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-lastName"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -142,6 +163,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -173,11 +200,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-streetAddress"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -188,6 +220,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -215,11 +253,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-unit"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -254,11 +297,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-city"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -269,6 +317,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -299,11 +353,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-state"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -314,6 +373,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -341,11 +406,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-zip"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -356,6 +426,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -385,11 +461,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-phone"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -420,11 +501,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-email"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -435,6 +521,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -462,11 +554,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-confirmEmail"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -477,6 +574,12 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -522,11 +625,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-degreeAttained"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -557,11 +665,16 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-educationalInstitution"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -1003,11 +1116,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-firstName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -1018,6 +1136,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -1045,11 +1169,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-middleName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -1080,11 +1209,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-lastName"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -1095,6 +1229,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -1126,11 +1266,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-streetAddress"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -1141,6 +1286,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -1168,11 +1319,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-unit"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -1207,11 +1363,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-city"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -1222,6 +1383,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -1252,11 +1419,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-state"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -1267,6 +1439,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -1294,11 +1472,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-zip"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -1309,6 +1492,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -1338,11 +1527,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-phone"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -1373,11 +1567,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-email"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -1388,6 +1587,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -1415,11 +1620,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-confirmEmail"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -1430,6 +1640,12 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -1475,11 +1691,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-degreeAttained"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -1510,11 +1731,16 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-educationalInstitution"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -1956,11 +2182,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-firstName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -1971,6 +2202,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -1998,11 +2235,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-middleName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -2033,11 +2275,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-lastName"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -2048,6 +2295,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -2079,11 +2332,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-streetAddress"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -2094,6 +2352,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -2121,11 +2385,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-unit"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -2160,11 +2429,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-city"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -2175,6 +2449,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -2205,11 +2485,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-state"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -2220,6 +2505,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -2247,11 +2538,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-zip"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -2262,6 +2558,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -2291,11 +2593,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-phone"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -2326,11 +2633,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-email"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -2341,6 +2653,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -2368,11 +2686,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-confirmEmail"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -2383,6 +2706,12 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -2428,11 +2757,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-degreeAttained"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -2463,11 +2797,16 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-educationalInstitution"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -2944,11 +3283,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-firstName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -2959,6 +3303,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -2986,11 +3336,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-middleName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -3021,11 +3376,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-lastName"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -3036,6 +3396,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -3067,11 +3433,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-streetAddress"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -3082,6 +3453,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -3109,11 +3486,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-unit"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -3148,11 +3530,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-city"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -3163,6 +3550,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -3193,11 +3586,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-state"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -3208,6 +3606,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -3235,11 +3639,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-zip"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -3250,6 +3659,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -3279,11 +3694,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-phone"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -3314,11 +3734,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-email"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -3329,6 +3754,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -3356,11 +3787,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-confirmEmail"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -3371,6 +3807,12 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -3416,11 +3858,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-degreeAttained"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -3451,11 +3898,16 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-educationalInstitution"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -3938,11 +4390,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-firstName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -3953,6 +4410,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -3980,11 +4443,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-middleName"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -4015,11 +4483,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-lastName"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -4030,6 +4503,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -4061,11 +4540,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-streetAddress"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -4076,6 +4560,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -4103,11 +4593,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-unit"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -4142,11 +4637,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <label
             className="txt-l txt-l--sm"
             htmlFor="ApplicationForm-city"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -4157,6 +4657,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               aria-hidden="true"
               className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "flexGrow": 1,
+                }
+              }
             >
               Required
             </span>
@@ -4187,11 +4693,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-state"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -4202,6 +4713,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -4229,11 +4746,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <label
               className="txt-l txt-l--sm"
               htmlFor="ApplicationForm-zip"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -4244,6 +4766,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 aria-hidden="true"
                 className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "flexGrow": 1,
+                  }
+                }
               >
                 Required
               </span>
@@ -4273,11 +4801,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-phone"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -4308,11 +4841,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-email"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -4323,6 +4861,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -4350,11 +4894,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-confirmEmail"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -4365,6 +4914,12 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             aria-hidden="true"
             className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
           >
             Required
           </span>
@@ -4410,11 +4965,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-degreeAttained"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -4445,11 +5005,16 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         <label
           className="txt-l txt-l--sm"
           htmlFor="ApplicationForm-educationalInstitution"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -5068,11 +5633,16 @@ Array [
                       <label
                         className="txt-l txt-l--sm"
                         htmlFor="ApplicationForm-firstName"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
                             }
@@ -5083,6 +5653,12 @@ Array [
                         <span
                           aria-hidden="true"
                           className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
                         >
                           Required
                         </span>
@@ -5110,11 +5686,16 @@ Array [
                       <label
                         className="txt-l txt-l--sm"
                         htmlFor="ApplicationForm-middleName"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
                             }
@@ -5145,11 +5726,16 @@ Array [
                     <label
                       className="txt-l txt-l--sm"
                       htmlFor="ApplicationForm-lastName"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -5160,6 +5746,12 @@ Array [
                       <span
                         aria-hidden="true"
                         className="t--req"
+                        style={
+                          Object {
+                            "display": "flex",
+                            "flexGrow": 1,
+                          }
+                        }
                       >
                         Required
                       </span>
@@ -5191,11 +5783,16 @@ Array [
                     <label
                       className="txt-l txt-l--sm"
                       htmlFor="ApplicationForm-streetAddress"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -5206,6 +5803,12 @@ Array [
                       <span
                         aria-hidden="true"
                         className="t--req"
+                        style={
+                          Object {
+                            "display": "flex",
+                            "flexGrow": 1,
+                          }
+                        }
                       >
                         Required
                       </span>
@@ -5233,11 +5836,16 @@ Array [
                     <label
                       className="txt-l txt-l--sm"
                       htmlFor="ApplicationForm-unit"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -5272,11 +5880,16 @@ Array [
                     <label
                       className="txt-l txt-l--sm"
                       htmlFor="ApplicationForm-city"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -5287,6 +5900,12 @@ Array [
                       <span
                         aria-hidden="true"
                         className="t--req"
+                        style={
+                          Object {
+                            "display": "flex",
+                            "flexGrow": 1,
+                          }
+                        }
                       >
                         Required
                       </span>
@@ -5317,11 +5936,16 @@ Array [
                       <label
                         className="txt-l txt-l--sm"
                         htmlFor="ApplicationForm-state"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
                             }
@@ -5332,6 +5956,12 @@ Array [
                         <span
                           aria-hidden="true"
                           className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
                         >
                           Required
                         </span>
@@ -5359,11 +5989,16 @@ Array [
                       <label
                         className="txt-l txt-l--sm"
                         htmlFor="ApplicationForm-zip"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
                             }
@@ -5374,6 +6009,12 @@ Array [
                         <span
                           aria-hidden="true"
                           className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
                         >
                           Required
                         </span>
@@ -5403,11 +6044,16 @@ Array [
                   <label
                     className="txt-l txt-l--sm"
                     htmlFor="ApplicationForm-phone"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
@@ -5438,11 +6084,16 @@ Array [
                   <label
                     className="txt-l txt-l--sm"
                     htmlFor="ApplicationForm-email"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
@@ -5453,6 +6104,12 @@ Array [
                     <span
                       aria-hidden="true"
                       className="t--req"
+                      style={
+                        Object {
+                          "display": "flex",
+                          "flexGrow": 1,
+                        }
+                      }
                     >
                       Required
                     </span>
@@ -5480,11 +6137,16 @@ Array [
                   <label
                     className="txt-l txt-l--sm"
                     htmlFor="ApplicationForm-confirmEmail"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
@@ -5495,6 +6157,12 @@ Array [
                     <span
                       aria-hidden="true"
                       className="t--req"
+                      style={
+                        Object {
+                          "display": "flex",
+                          "flexGrow": 1,
+                        }
+                      }
                     >
                       Required
                     </span>
@@ -5540,11 +6208,16 @@ Array [
                   <label
                     className="txt-l txt-l--sm"
                     htmlFor="ApplicationForm-degreeAttained"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
@@ -5575,11 +6248,16 @@ Array [
                   <label
                     className="txt-l txt-l--sm"
                     htmlFor="ApplicationForm-educationalInstitution"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
diff --git a/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap
index b40a99014..d9cfa4bf4 100644
--- a/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/permit-finder/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -1264,9 +1264,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            You’ve got your permit and may begin working.  Please contact the Building Inspection unit to schedule an inspection and keep your project on track!
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "You’ve got your permit and may begin working.  Please contact the Building Inspection unit to schedule an inspection and keep your project on track!",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -1789,9 +1792,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -2322,9 +2328,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Congratulations! Once you get your permit and make sure all fees are paid you will be ready to get to work. Please make sure your permit is posted in a visable location to make sure your commmunity knows your work is allowed.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Congratulations! Once you get your permit and make sure all fees are paid you will be ready to get to work. Please make sure your permit is posted in a visable location to make sure your commmunity knows your work is allowed.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -3374,9 +3383,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            You’re almost there.  We need one final check to make sure your space is safe to use.  Staff is in the process of evaluating your certificate of occupancy.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "You’re almost there.  We need one final check to make sure your space is safe to use.  Staff is in the process of evaluating your certificate of occupancy.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -3893,9 +3905,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Your project plan is under review by a plans examiner familiar with local building and zoning codes.  We’re working with agencies throughout the City to ensure your project meets all applicable codes and regulatory requirements.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Your project plan is under review by a plans examiner familiar with local building and zoning codes.  We’re working with agencies throughout the City to ensure your project meets all applicable codes and regulatory requirements.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -4436,9 +4451,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            You should have received an official letter from ISD informing you of the status of your application. If we have requested more information please contact your plans examiner.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "You should have received an official letter from ISD informing you of the status of your application. If we have requested more information please contact your plans examiner.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -5418,9 +5436,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Your application requires an on-site inspection to be processed further. 
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Your application requires an on-site inspection to be processed further. ",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -5867,9 +5888,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Thanks for your application!  Staff is reviewing your application to ensure that all fees are properly calculated and we have the information needed to start processing it.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -6334,9 +6358,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Congratulations! Once your permit is paid for and you get your fire prevention permit, you’re ready to start your project and get to work.
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Congratulations! Once your permit is paid for and you get your fire prevention permit, you’re ready to start your project and get to work.",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
@@ -7244,9 +7271,12 @@ Array [
           </div>
           <p
             className="t--s500 lh--300"
-          >
-            Your permit application is under review by a team of fire prevention professionals at BFD. Review time varies based on permit type. Asbestos Removal, Bag Smoke Detectors, Construction-Demolition-Renovation, Cutting-Burning-Welding, Tank Removal, Temporary Dumpster and Smoke/CO Inspection are generally completed in 2–4 days. Other requests are generally completed in 10–15 days. 
-          </p>
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Your permit application is under review by a team of fire prevention professionals at BFD. Review time varies based on permit type. Asbestos Removal, Bag Smoke Detectors, Construction-Demolition-Renovation, Cutting-Burning-Welding, Tank Removal, Temporary Dumpster and Smoke/CO Inspection are generally completed in 2–4 days. Other requests are generally completed in 10–15 days. ",
+              }
+            }
+          />
           <ul
             className="m-b700 css-12jt1a3"
           >
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 805f31543..27b3b78ee 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -1099,7 +1099,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -1769,7 +1769,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -2946,7 +2946,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -4040,7 +4040,7 @@ exports[`Storyshots Birth/Question Components/BornInBoston initial question 1`]
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -4484,7 +4484,7 @@ exports[`Storyshots Birth/Question Components/BornInBoston may not have record 1
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -5081,7 +5081,7 @@ exports[`Storyshots Birth/Question Components/BornInBoston secondary question 1`
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -5658,7 +5658,7 @@ exports[`Storyshots Birth/Question Components/BornInBoston will not have record
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -6255,7 +6255,7 @@ exports[`Storyshots Birth/Question Components/ClientInstructions default 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -6421,385 +6421,385 @@ exports[`Storyshots Birth/Question Components/ForWhom default 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-0.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
-}
-
-.emotion-0.secondary em {
-  font-size: 1rem;
-}
-
-.emotion-5 {
-  margin: 2rem 0 3rem;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-5 {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-align-items: baseline;
-    -webkit-box-align: baseline;
-    -ms-flex-align: baseline;
-    align-items: baseline;
-    margin-bottom: 0;
-  }
-}
-
-@media screen and (min-width:840px) {
-  .emotion-5 > * {
-    margin: 1rem;
-  }
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  margin-bottom: 2rem;
-  color: #091f2f;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-2 {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-  }
-}
-
-.emotion-2 input {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.emotion-2 input:focus + span {
-  outline: 4px solid #288be4;
-  outline-offset: 1px;
-}
-
-.emotion-2 svg {
-  -webkit-flex-basis: 20%;
-  -ms-flex-preferred-size: 20%;
-  flex-basis: 20%;
-}
-
-@media screen and (max-width:768px) {
-  .emotion-2 svg {
-    height: 100%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .emotion-2 svg {
-    -webkit-flex-basis: auto;
-    -ms-flex-preferred-size: auto;
-    flex-basis: auto;
-  }
-}
-
-.emotion-2 span {
-  margin-left: 1rem;
-  padding: 0.8rem 1.5rem;
   font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
-  text-transform: uppercase;
-  border: 4px solid #091f2f;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-2 span {
-    margin-top: 1.75rem;
-    margin-left: 0;
-    -webkit-box-flex: 0;
-    -webkit-flex-grow: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-    white-space: nowrap;
-  }
-}
-
-.emotion-2.selected span {
-  background-color: #e0e0e0;
-}
-
-.emotion-2.inactive {
-  opacity: 0.25;
-}
-
-.emotion-1 {
-  width: 100px;
-  fill: #fff;
-  stroke: currentColor;
-  stroke-miterlimit: 10;
-  stroke-width: 3;
-}
-
-.emotion-1.forOther {
-  width: 140px;
-}
-
-.emotion-1.spouse ellipse {
-  fill: none;
-  stroke: #fff;
-  stroke-width: 8;
-}
-
-.emotion-1.spouse line {
-  stroke-linecap: round;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-1.spouse {
-    height: 90px;
-  }
-}
-
-.emotion-1.child {
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-
-.emotion-1.heavier {
-  stroke-width: 3.5;
-}
-
-.emotion-8 {
-  text-align: center;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-8 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-8 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-8 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-8 .lnk {
-    padding-left: 0;
-  }
-}
-
-<div
-  className="b-c b-c--hsm"
->
-  <div
-    className="emotion-7"
-  >
-    <fieldset
-      className=" emotion-6"
-    >
-      <legend>
-        <h2
-          className="emotion-0"
-          id="forSelf"
-        >
-          Whose birth certificate are you ordering?
-        </h2>
-      </legend>
-      <div
-        aria-labelledby="forSelf"
-        className="emotion-5"
-        role="radiogroup"
-      >
-        <label
-          className="  emotion-2"
-        >
-          <svg
-            aria-hidden="true"
-            className="forWhom heavier emotion-1"
-            focusable="false"
-            viewBox="-26 -4 100 100"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-              transform="translate(-11.995 -29.65)"
-            />
-            <path
-              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-              transform="translate(-10.757 -34)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="forSelf"
-            onChange={[Function]}
-            type="radio"
-            value="true"
-          />
-          <span>
-            Mine
-          </span>
-        </label>
-        <label
-          className="  emotion-2"
-        >
-          <svg
-            aria-hidden="true"
-            className="forOther heavier emotion-1"
-            focusable="false"
-            viewBox="-2 -4 140 100"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
-              transform="translate(-11.995 -29.65)"
-            />
-            <path
-              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
-              transform="translate(-10.757 -34)"
-            />
-            <path
-              d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
-              transform="translate(-0.431 -34)"
-            />
-            <path
-              d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
-              transform="translate(-0.431 -34)"
-            />
-            <path
-              d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
-              transform="translate(-1.669 -29.65)"
-            />
-            <line
-              strokeWidth="4"
-              transform="translate(55.514 68.46)"
-              x2="15.928"
-            />
-            <path
-              d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
-              fill="currentColor"
-              transform="translate(-3.812 -26.73)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="forSelf"
-            onChange={[Function]}
-            type="radio"
-            value="false"
-          />
-          <span>
-            Someone else’s
-          </span>
-        </label>
-      </div>
-    </fieldset>
-  </div>
-  <div
-    className="g g--mr emotion-8"
-  >
-    <div
-      className="t--info g--6 m-b500"
-    />
-    <div
-      className="g--6 ta-r m-b500"
-    >
-      <button
-        className="btn btn--b-sm"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
-      >
-        Next question
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Birth/Question Components/ForWhom someone else’s 1`] = `
-.emotion-22 fieldset + fieldset {
-  margin-top: 2rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-22 fieldset + fieldset {
-    margin-top: 4rem;
-  }
-
-  .emotion-22 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-6 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.emotion-6 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
-
-.emotion-6 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
-}
-
-.emotion-6 .desc {
-  margin: 0.5rem 0 0.75rem;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375em;
-  font-weight: 100;
-  color: #58585b;
-  line-height: 1.2em;
-}
-
-.emotion-0 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
+  font-size: 1.5rem;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0.secondary {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  border-width: 3px;
+}
+
+.emotion-0.secondary em {
+  font-size: 1rem;
+}
+
+.emotion-5 {
+  margin: 2rem 0 3rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-5 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: baseline;
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    align-items: baseline;
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (min-width:840px) {
+  .emotion-5 > * {
+    margin: 1rem;
+  }
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 2rem;
+  color: #091f2f;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+}
+
+.emotion-2 input {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.emotion-2 input:focus + span {
+  outline: 4px solid #288be4;
+  outline-offset: 1px;
+}
+
+.emotion-2 svg {
+  -webkit-flex-basis: 20%;
+  -ms-flex-preferred-size: 20%;
+  flex-basis: 20%;
+}
+
+@media screen and (max-width:768px) {
+  .emotion-2 svg {
+    height: 100%;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 svg {
+    -webkit-flex-basis: auto;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+  }
+}
+
+.emotion-2 span {
+  margin-left: 1rem;
+  padding: 0.8rem 1.5rem;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  border: 4px solid #091f2f;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 span {
+    margin-top: 1.75rem;
+    margin-left: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex-grow: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    white-space: nowrap;
+  }
+}
+
+.emotion-2.selected span {
+  background-color: #e0e0e0;
+}
+
+.emotion-2.inactive {
+  opacity: 0.25;
+}
+
+.emotion-1 {
+  width: 100px;
+  fill: #fff;
+  stroke: currentColor;
+  stroke-miterlimit: 10;
+  stroke-width: 3;
+}
+
+.emotion-1.forOther {
+  width: 140px;
+}
+
+.emotion-1.spouse ellipse {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 8;
+}
+
+.emotion-1.spouse line {
+  stroke-linecap: round;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-1.spouse {
+    height: 90px;
+  }
+}
+
+.emotion-1.child {
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.emotion-1.heavier {
+  stroke-width: 3.5;
+}
+
+.emotion-8 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-8 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-8 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-8 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-8 .lnk {
+    padding-left: 0;
+  }
+}
+
+<div
+  className="b-c b-c--hsm"
+>
+  <div
+    className="emotion-7"
+  >
+    <fieldset
+      className=" emotion-6"
+    >
+      <legend>
+        <h2
+          className="emotion-0"
+          id="forSelf"
+        >
+          Whose birth certificate are you ordering?
+        </h2>
+      </legend>
+      <div
+        aria-labelledby="forSelf"
+        className="emotion-5"
+        role="radiogroup"
+      >
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="forWhom heavier emotion-1"
+            focusable="false"
+            viewBox="-26 -4 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
+            />
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="true"
+          />
+          <span>
+            Mine
+          </span>
+        </label>
+        <label
+          className="  emotion-2"
+        >
+          <svg
+            aria-hidden="true"
+            className="forOther heavier emotion-1"
+            focusable="false"
+            viewBox="-2 -4 140 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M60.832,79.224v41.865H12.04V78.748l14.238-12.2H46.684Z"
+              transform="translate(-11.995 -29.65)"
+            />
+            <path
+              d="M49.1,47.9A13.9,13.9,0,1,1,35.2,34,13.9,13.9,0,0,1,49.1,47.9Z"
+              transform="translate(-10.757 -34)"
+            />
+            <path
+              d="M112.468,61.8a13.9,13.9,0,1,1,13.9-13.9,13.9,13.9,0,0,1-13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M126.367,47.9a13.9,13.9,0,1,1-13.9-13.9,13.9,13.9,0,0,1,13.9,13.9Z"
+              transform="translate(-0.431 -34)"
+            />
+            <path
+              d="M138.1,79.224v41.865H89.31V78.748l14.238-12.2h20.405Z"
+              transform="translate(-1.669 -29.65)"
+            />
+            <line
+              strokeWidth="4"
+              transform="translate(55.514 68.46)"
+              x2="15.928"
+            />
+            <path
+              d="M73.27,101.97,85.014,95.19,73.27,88.4Z"
+              fill="currentColor"
+              transform="translate(-3.812 -26.73)"
+            />
+          </svg>
+          <input
+            checked={false}
+            name="forSelf"
+            onChange={[Function]}
+            type="radio"
+            value="false"
+          />
+          <span>
+            Someone else’s
+          </span>
+        </label>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="g g--mr emotion-8"
+  >
+    <div
+      className="t--info g--6 m-b500"
+    />
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
+      >
+        Next question
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Birth/Question Components/ForWhom someone else’s 1`] = `
+.emotion-22 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-22 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-22 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-6 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-6 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-6 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-6 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
+.emotion-0 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
   border-bottom: 4px solid #091f2f;
@@ -7620,7 +7620,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -7935,11 +7935,16 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             <label
               className="txt-l "
               htmlFor="input-2048906072"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -7967,7 +7972,11 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             <label
               className="txt-l "
               htmlFor="input-5381"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
@@ -8024,11 +8033,16 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             <label
               className="txt-l "
               htmlFor="input-2048906072"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -8056,7 +8070,11 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             <label
               className="txt-l "
               htmlFor="input-5381"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
@@ -8327,7 +8345,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -8642,11 +8660,16 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-2048906072"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -8674,7 +8697,11 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-5381"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
@@ -8731,11 +8758,16 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-2048906072"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -8763,7 +8795,11 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-5381"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
@@ -9062,7 +9098,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -9377,11 +9413,16 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-2048906072"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -9409,7 +9450,11 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-5381"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
@@ -9466,11 +9511,16 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-2048906072"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
                   Object {
+                    "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
                   }
@@ -9498,7 +9548,11 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             <label
               className="txt-l "
               htmlFor="input-5381"
-              style={Object {}}
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
             >
               <span
                 style={
@@ -9795,7 +9849,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -9980,11 +10034,16 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
           <label
             className="txt-l "
             htmlFor="input-2048906072"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -10012,11 +10071,16 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
           <label
             className="txt-l "
             htmlFor="input-1103291528"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -10048,11 +10112,16 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
           <label
             className="txt-l "
             htmlFor="input-2099238988"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -10114,6 +10183,17 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
                 htmlFor="dob-month"
               >
                 Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -10136,6 +10216,17 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
                 htmlFor="dob-day"
               >
                 Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -10158,6 +10249,17 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
                 htmlFor="dob-year"
               >
                 Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -10308,7 +10410,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -10489,11 +10591,16 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
           <label
             className="txt-l "
             htmlFor="input-2048906072"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -10521,11 +10628,16 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
           <label
             className="txt-l "
             htmlFor="input-1103291528"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -10557,11 +10669,16 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
           <label
             className="txt-l "
             htmlFor="input-2099238988"
-            style={Object {}}
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
           >
             <span
               style={
                 Object {
+                  "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
                 }
@@ -10623,6 +10740,17 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
                 htmlFor="dob-month"
               >
                 Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -10645,6 +10773,17 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
                 htmlFor="dob-day"
               >
                 Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -10667,6 +10806,17 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
                 htmlFor="dob-year"
               >
                 Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -10796,7 +10946,7 @@ exports[`Storyshots Birth/Question Components/VerifyIdentification default 1`] =
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -11539,7 +11689,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -12295,7 +12445,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -12842,7 +12992,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -13667,7 +13817,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -14049,11 +14199,16 @@ Array [
                     <label
                       className="txt-l "
                       htmlFor="input-2048906072"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -14081,11 +14236,16 @@ Array [
                     <label
                       className="txt-l "
                       htmlFor="input-1103291528"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -14117,11 +14277,16 @@ Array [
                     <label
                       className="txt-l "
                       htmlFor="input-2099238988"
-                      style={Object {}}
+                      style={
+                        Object {
+                          "display": "flex",
+                        }
+                      }
                     >
                       <span
                         style={
                           Object {
+                            "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
                           }
@@ -14183,6 +14348,17 @@ Array [
                           htmlFor="dob-month"
                         >
                           Month
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "marginLeft": "0.35em",
+                              }
+                            }
+                          >
+                            Required
+                          </span>
                         </label>
                         <input
                           className="txt-f"
@@ -14205,6 +14381,17 @@ Array [
                           htmlFor="dob-day"
                         >
                           Day
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "marginLeft": "0.35em",
+                              }
+                            }
+                          >
+                            Required
+                          </span>
                         </label>
                         <input
                           className="txt-f"
@@ -14227,6 +14414,17 @@ Array [
                           htmlFor="dob-year"
                         >
                           Year
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "marginLeft": "0.35em",
+                              }
+                            }
+                          >
+                            Required
+                          </span>
                         </label>
                         <input
                           className="txt-f"
@@ -14524,7 +14722,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -15040,11 +15238,16 @@ Array [
                       <label
                         className="txt-l "
                         htmlFor="input-2048906072"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
                             }
@@ -15072,7 +15275,11 @@ Array [
                       <label
                         className="txt-l "
                         htmlFor="input-5381"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
@@ -15129,11 +15336,16 @@ Array [
                       <label
                         className="txt-l "
                         htmlFor="input-2048906072"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
                             }
@@ -15161,7 +15373,11 @@ Array [
                       <label
                         className="txt-l "
                         htmlFor="input-5381"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
@@ -15624,7 +15840,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -16625,7 +16841,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -21174,7 +21390,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -24491,7 +24707,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -25650,7 +25866,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -29670,7 +29886,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -33033,7 +33249,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -37376,7 +37592,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -42439,7 +42655,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -42845,7 +43061,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -43284,7 +43500,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -44103,7 +44319,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -44154,7 +44370,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -44545,7 +44761,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -44657,7 +44873,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -44705,7 +44921,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -44755,7 +44971,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -45165,7 +45381,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -45433,7 +45649,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -45481,7 +45697,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -45531,7 +45747,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -45941,7 +46157,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -46209,7 +46425,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -46257,7 +46473,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -46307,7 +46523,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -46726,7 +46942,7 @@ Array [
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -47005,7 +47221,7 @@ Array [
   .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -63324,7 +63540,6 @@ Array [
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-3 .progressbar {
@@ -63332,6 +63547,7 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -63343,18 +63559,13 @@ Array [
 
 .emotion-3 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -63364,11 +63575,10 @@ Array [
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -63449,6 +63659,13 @@ Array [
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 .emotion-7 {
   padding: 0px;
 }
@@ -63939,187 +64156,19 @@ Array [
 ]
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 1`] = `
-Array [
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>,
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />,
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />,
-  .emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-51 fieldset + fieldset {
-  margin-top: 2rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-51 fieldset + fieldset {
-    margin-top: 4rem;
-  }
-
-  .emotion-51 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-50 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.emotion-50 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
-
-.emotion-50 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
-}
-
-.emotion-50 .desc {
-  margin: 0.5rem 0 0.75rem;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375em;
-  font-weight: 100;
-  color: #58585b;
-  line-height: 1.2em;
-}
-
-.emotion-4 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-4.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
-}
-
-.emotion-4.secondary em {
-  font-size: 1rem;
-}
-
-.emotion-53 {
-  text-align: center;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-53 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-53 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-53 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-53 .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-52 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
-.emotion-12 {
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date & Place, w/Country(CAN) 1`] = `
+.emotion-3 {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-.emotion-12 legend {
+.emotion-3 legend {
   padding-left: 0;
   font-size: 120%;
 }
 
-.emotion-11 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64132,204 +64181,139 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-11 > div {
+.emotion-1 > div {
   -webkit-flex: 0 0 24%;
   -ms-flex: 0 0 24%;
   flex: 0 0 24%;
 }
 
-.emotion-11 > div:last-of-type {
+.emotion-1 > div:last-of-type {
   -webkit-flex: 0 0 50%;
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
 }
 
-.emotion-11 input {
+.emotion-1 input {
   -moz-appearance: textfield;
 }
 
-.emotion-11 input::-webkit-inner-spin-button {
+.emotion-1 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.emotion-11 input::-ms-clear {
+.emotion-1 input::-ms-clear {
   display: none;
 }
 
-.emotion-11 label {
+.emotion-1 label {
   margin-top: 0.5rem;
 }
 
-.emotion-11.disabled {
+.emotion-1.disabled {
   opacity: 0.4;
 }
 
-.emotion-11.disabled * {
+.emotion-1.disabled * {
   cursor: not-allowed;
 }
 
-.emotion-2 {
-  padding-right: 0;
+.css-1d92czb .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
-  }
+.emotion-4 {
+  margin-bottom: 2em;
 }
 
-.emotion-3 {
-  display: grid;
-  margin: auto;
-  margin-top: 0.75rem;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
+@media screen and (min-width:768px) {
+  .emotion-4 {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
-.emotion-3 .progressbar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
+.emotion-4 > div {
+  text-align: left;
 }
 
-.emotion-3 .progressbar .nav {
-  display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  line-height: normal;
-  font-style: normal;
-  font-weight: bold;
-  font-family: Lora,serif;
-  color: '#58585B';
+@media screen and (min-width:768px) {
+  .emotion-4 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
 }
 
-.emotion-3 .progressbar .nav a {
-  display: table-cell;
-  border-width: 1px;
-  border-color: black;
-  border-style: solid;
-  border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
-  color: black;
-  background: #fff;
-  min-width: 120px;
-  font-size: 0.85em;
+.emotion-4 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-3 .progressbar .nav a:last-child {
-  grid-column-start: 2;
+.emotion-4 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-.emotion-3 .progressbar .nav a:first-child {
-  border-left-width: 1px;
+.emotion-4 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed.current {
-  cursor: pointer;
-  color: #fff;
-  background: #1871bd;
+.emotion-4 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted {
-  background: #C8C8C8;
+.emotion-4 .sel-c {
+  display: block;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused.current {
-  color: #000;
-  cursor: pointer;
-  background: #f2f2f2;
+.emotion-6 {
+  margin-bottom: 3em;
+  background: none;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  color: #000;
-  cursor: pointer;
-  background: #b0d9ff;
+.emotion-6 label {
+  margin-top: 0em;
 }
 
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover,
-.emotion-3 .progressbar .nav a.completed.focused.done.current {
-  color: #000;
-  cursor: default;
-  background: #f2f2f2;
+.emotion-6 .spacingTop {
+  margin-top: 1.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed.current {
-  color: #000;
-  background: #f2f2f2;
+.emotion-6 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
 }
 
-.emotion-3 .progressbar .progress-text {
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  font-style: italic;
-  font-size: 1rem;
-  margin-top: 0.5rem;
+.emotion-6 label.inputHeading .t--req {
+  margin-left: 0.5rem;
 }
 
-.emotion-3 .progressbar .progress-text .mobile {
-  display: none;
+.emotion-6 .t--opt {
+  color: #58585b !important;
 }
 
-@media screen and (max-width:540px) {
-  .emotion-3 {
-    max-width: 25.875em;
+@media screen and (min-width:768px) {
+  .emotion-6 {
+    margin-left: auto;
+    margin-right: auto;
   }
+}
 
-  .emotion-3 .progressbar .nav a {
-    overflow: hidden;
-    min-width: 10px;
-    padding: 0.5em 0;
-    text-indent: -500px;
-    line-height: 0;
-  }
-
-  .emotion-3 .progressbar .progress-text .mobile {
-    display: inline-block;
-  }
-}
-
-.emotion-54 {
-  padding: 0px;
-}
-
-.emotion-9 {
-  margin-bottom: 2.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-9 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-9 > div {
+.emotion-6 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-9 > div {
+  .emotion-6 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -64337,1050 +64321,12685 @@ Array [
   }
 }
 
-.emotion-9 > .RADIOGROUP label {
+.emotion-6 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-9 h3 {
+.emotion-6 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-9 .notice {
-  font-size: 0.7em;
+.emotion-6 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-9 .emotion-5:after {
+.emotion-6 .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-7 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-7 > div {
-  text-align: left;
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
 }
 
-@media screen and (min-width:768px) {
-  .emotion-7 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
 }
 
-.emotion-7 > .RADIOGROUP label {
-  display: block;
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
 }
 
-.emotion-7 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
 }
 
-.emotion-7 .notice {
-  font-size: 0.7em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 1% 0 1.5%;
-  line-height: 1.5em;
+.emotion-2 {
+  margin-bottom: 2.25em;
 }
 
-.emotion-7 .emotion-5:after {
+.css-lbsctu .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-7 .sel-c {
-  display: block;
-}
-
-.emotion-16 {
-  margin-bottom: 2.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-13 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-13 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-13 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-13 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-13 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-13 .notice {
-  font-size: 0.7em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 1% 0 1.5%;
-  line-height: 1.5em;
-}
-
-.emotion-13 .emotion-5:after {
+.css-3y8lfr .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-19 {
-  margin-top: 1em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-19 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-19 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-19 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-19 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-19 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-19 .notice {
-  font-size: 0.7em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 1% 0 1.5%;
-  line-height: 1.5em;
-}
-
-.emotion-19 .emotion-5:after {
+.css-sifr7p .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-29 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-29 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-29 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-29 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-29 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-29 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-29 .notice {
-  font-size: 0.7em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 1% 0 1.5%;
-  line-height: 1.5em;
-}
-
-.emotion-29 .emotion-5:after {
+.css-zx7u86 .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-28 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-top: 1em;
-}
-
-.emotion-28 > label {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-left: 0;
-  margin-bottom: 1em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-28 .cb {
-    margin: 0;
-    margin-left: 0;
-    margin-bottom: 1em;
-  }
-
-  .emotion-28 .cb:not(:first-of-type) {
-    margin-left: 0;
-  }
-}
-
-.emotion-32 {
-  margin-top: 1em;
-  padding-bottom: 2em;
-}
-
-.emotion-35 {
-  margin-bottom: 2.5em;
-}
-
-.emotion-35 h2 {
-  font-size: 1.5rem;
-}
-
-.emotion-35 h4 {
-  font-size: 1.25rem;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-35 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-35 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-35 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-35 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-35 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-35 .notice {
-  font-size: 0.7em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 1% 0 1.5%;
-  line-height: 1.5em;
-}
-
-.emotion-35 .emotion-5:after {
+.css-17tc7bx .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-41 {
-  margin-bottom: 1.5em;
-}
-
 <div
-    className="mn--full-ie"
+  className="emotion-6"
+>
+  <h1
+    className="emotion-0"
+  >
+    Date and Place of Birth
+  </h1>
+  <fieldset
+    className="emotion-3"
   >
     <div
-      className="mn mn--full "
+      className="emotion-2"
     >
-      <input
-        aria-hidden="true"
-        className="s-tr"
-        id="s-tr"
-        type="checkbox"
-      />
-      <header
-        className="h"
-        dangerouslySetInnerHTML={
+      <legend
+        style={
           Object {
-            "__html": "
-  <label for=\\"brg-tr\\" class=\\"brg-b\\">
-    <div class=\\"brg\\">
-      <span class=\\"brg-c\\">
-        <span class=\\"brg-c-i\\"></span>
-      </span>
-      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
-    </div>
-  </label>
-
-  <div class=\\"lo lo--abs\\">
-    <div class=\\"lo-l\\">
-      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
-        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
-      </a>
-      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
-    </div>
-  </div>
-  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
-  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
-</a>
-
-<nav class=\\"nv-h\\">
-  <ul class=\\"nv-h-l\\">
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
-    <li class=\\"tr nv-h-l-i\\">
-      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
-      <ul class=\\"tr-dd\\">
-        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
-      </ul>
-    </li>
-    <li class=\\"nv-h-l-i\\">
-      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
-        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
-      </label>
-    </li>
-  </ul>
-</nav>
-
-<div class=\\"h-s\\">
-  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
-    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
-    <div class=\\"sf-i\\">
-      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
-      <button class=\\"sf-i-b\\">Search</button>
-    </div>
-  </form>
-</div>
-  ",
+            "display": "none",
+            "width": "100%",
           }
         }
-        role="banner"
-      />
+      >
+        Person A Date of Birth
+      </legend>
       <div
-        className="p-t300"
+        className=" emotion-1"
       >
-        <nav
-          aria-label="Breadcrumbs"
-          className="brc p-a300 emotion-1"
-        >
-          <ul
-            className="brc-l"
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-month"
           >
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/"
-              >
-                Home
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
+            Month
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
                 }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
+              }
             >
-              <a
-                href="https://www.boston.gov/departments"
-              >
-                Departments
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-month"
+            max="12"
+            maxLength={2}
+            min="1"
+            name="month"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value="9"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-day"
+          >
+            Day
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
                 }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
+              }
             >
-              <a
-                href="https://www.boston.gov/departments/registry"
-              >
-                Registry: Birth, death, and marriage and marriage intention
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-day"
+            max="31"
+            maxLength={2}
+            min="1"
+            name="day"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="DD"
+            type="number"
+            value="1"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-year"
+          >
+            Year
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
                 }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
+              }
             >
-              <a
-                aria-current="page"
-                className="emotion-0"
-                href="/marriageintention"
-              >
-                Marriage Intention
-              </a>
-            </li>
-          </ul>
-        </nav>
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-year"
+            max={2024}
+            maxLength={4}
+            min="1000"
+            name="year"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value="2003"
+          />
+        </div>
       </div>
-      <div
-        className="a11y--content-start"
-        id="content-start"
-      />
-      <main
-        className="b-ff"
+      
+    </div>
+  </fieldset>
+  <div
+    className="emotion-4"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="select-1817836307"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
       >
-        <div
-          aria-live="polite"
-          className="b-c"
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
-          <h1
-            className="sh-title emotion-2"
+          Birthplace Country
+        </span>
+        <span
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Required
+        </span>
+      </label>
+      <div
+        className="sel-c  "
+      >
+        <select
+          aria-label=""
+          className="sel-f  "
+          id="select-1817836307"
+          name="partnerA_birthCountry"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value="CAN"
+        >
+          <option />
+          <option
+            value="USA"
           >
-            Marriage Intention Application
-          </h1>
-          <div
-            className="emotion-3"
+            United States of America
+          </option>
+          <option
+            value="VIR"
           >
-            <div
-              className="progressbar"
-            >
-              <div
-                className="nav"
-              >
-                <a
-                  aria-label="Getting Started"
-                  className="completed"
-                  onClick={[Function]}
-                  title="Getting Started"
-                >
-                  Getting Started
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 1"
-                  className="completed focused current"
-                  onClick={[Function]}
-                  title="Person 1"
-                >
-                  Person 1
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 2"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Person 2"
-                >
-                  Person 2
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Contact Info"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Contact Info"
-                >
-                  Contact Info
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Review"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Review"
-                >
-                  Review
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Submit"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Submit"
-                >
-                  Submit
-                  <span
-                    className="arrow"
-                  />
-                </a>
-              </div>
-              <div
-                className="progress-text"
-              >
-                <span>
-                  Step 2 of 6
-                </span>
-                <span
-                  className="mobile"
-                >
-                  : 
-                   
-                  Person 1
-                </span>
-              </div>
-            </div>
-          </div>
-          <section
-            className="m-t500"
+            United States Virgin Islands
+          </option>
+          <option
+            value="AFG"
           >
-            <div
-              className="b-c b-c--nbp emotion-54"
-            >
-              <div
-                className="emotion-51"
-              >
-                <fieldset
-                  className=" emotion-50"
-                >
-                  <legend>
-                    <h2
-                      className="emotion-4"
-                    >
-                      Person 
-                      A
-                    </h2>
-                  </legend>
-                  <div
-                    className="emotion-9"
-                  >
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2048906072"
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          First Name
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f  "
-                        id="input-2048906072"
-                        maxLength={100}
-                        name="partnerA_firstName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2852212527"
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Middle Name
-                        </span>
-                      </label>
-                      <label
-                        className="notice emotion-5"
-                      >
-                        This is your current middle name if you have one. You may not list a new middle name.
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f  "
-                        id="input-2852212527"
-                        maxLength={50}
-                        name="partnerA_middleName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-1103291528"
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Last Name
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f  "
-                        id="input-1103291528"
-                        maxLength={100}
-                        name="partnerA_lastName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-7"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-1333361069"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Last Name / SURNAME to be used after marriage
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-5"
-                        >
-                          You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-1333361069"
-                          maxLength={50}
-                          name="partnerA_surName"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-7"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="select-2202529938"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
-                                "whiteSpace": "nowrap",
-                              }
-                            }
-                          >
-                            Suffix
-                          </span>
-                        </label>
-                        <div
-                          className="sel-c  "
-                        >
-                          <select
-                            aria-label=""
-                            className="sel-f  "
-                            id="select-2202529938"
-                            name="partnerA_suffix"
-                            onChange={[Function]}
-                            value=""
-                          >
-                            <option />
-                            <option
-                              value="N/A"
-                            >
-                              Does Not Apply
-                            </option>
-                            <option
-                              value="I"
-                            >
-                              I
-                            </option>
-                            <option
-                              value="II"
-                            >
-                              II
-                            </option>
-                            <option
-                              value="III"
-                            >
-                              III
-                            </option>
-                            <option
-                              value="IV"
-                            >
-                              IV
-                            </option>
-                            <option
-                              value="V"
-                            >
-                              V
-                            </option>
-                            <option
-                              value="VI"
-                            >
-                              VI
-                            </option>
-                            <option
-                              value="Jr."
-                            >
-                              Jr.
-                            </option>
-                            <option
-                              value="Sr."
-                            >
-                              Sr.
-                            </option>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2786084594"
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Occupation
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f  "
-                        id="input-2786084594"
-                        maxLength={100}
-                        name="partnerA_occupation"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
-                    <div
-                      className="emotion-13"
-                    >
-                      <h2
-                        className="emotion-4"
-                        style={
-                          Object {
-                            "marginBottom": "1.5rem",
-                          }
-                        }
-                      >
-                        Date of Birth
-                      </h2>
-                      <fieldset
-                        className="emotion-12"
-                      >
-                        <div>
-                          <legend
-                            style={
-                              Object {
-                                "display": "none",
-                                "width": "100%",
-                              }
-                            }
-                          >
-                            Person A Date of Birth
-                          </legend>
-                          <div
-                            className=" emotion-11"
-                          >
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="dob-month"
-                              >
-                                Month
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="dob-month"
-                                max="12"
-                                maxLength={2}
-                                min="1"
-                                name="month"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="MM"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="dob-day"
-                              >
-                                Day
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="dob-day"
-                                max="31"
-                                maxLength={2}
-                                min="1"
-                                name="day"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="DD"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="dob-year"
-                              >
-                                Year
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="dob-year"
-                                max={2024}
-                                maxLength={4}
-                                min="1000"
-                                name="year"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="YYYY"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </fieldset>
-                    </div>
-                    <div
-                      className="emotion-13"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-193405638"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Age
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-5"
-                        >
-                          Your age will be automatically calculated based on your date of birth.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          disabled={true}
-                          id="input-193405638"
-                          maxLength={2}
-                          name="partnerA_age"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
-                    <div
-                      className="emotion-19"
-                    >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Birthplace
-                      </h2>
-                      <div
-                        className="emotion-7"
+            Afghanistan
+          </option>
+          <option
+            value="ALA"
+          >
+            Åland Islands
+          </option>
+          <option
+            value="ALB"
+          >
+            Albania
+          </option>
+          <option
+            value="DZA"
+          >
+            Algeria
+          </option>
+          <option
+            value="ASM"
+          >
+            American Samoa
+          </option>
+          <option
+            value="AND"
+          >
+            Andorra
+          </option>
+          <option
+            value="AGO"
+          >
+            Angola
+          </option>
+          <option
+            value="AIA"
+          >
+            Anguilla
+          </option>
+          <option
+            value="ATG"
+          >
+            Antigua and Barbuda
+          </option>
+          <option
+            value="ARG"
+          >
+            Argentina
+          </option>
+          <option
+            value="ARM"
+          >
+            Armenia
+          </option>
+          <option
+            value="ABW"
+          >
+            Aruba
+          </option>
+          <option
+            value="AUS"
+          >
+            Australia
+          </option>
+          <option
+            value="AUT"
+          >
+            Austria
+          </option>
+          <option
+            value="AZE"
+          >
+            Azerbaijan
+          </option>
+          <option
+            value="BHS"
+          >
+            Bahamas
+          </option>
+          <option
+            value="BHR"
+          >
+            Bahrain
+          </option>
+          <option
+            value="BGD"
+          >
+            Bangladesh
+          </option>
+          <option
+            value="BRB"
+          >
+            Barbados
+          </option>
+          <option
+            value="BLR"
+          >
+            Belarus
+          </option>
+          <option
+            value="BEL"
+          >
+            Belgium
+          </option>
+          <option
+            value="BLZ"
+          >
+            Belize
+          </option>
+          <option
+            value="BEN"
+          >
+            Benin
+          </option>
+          <option
+            value="BMU"
+          >
+            Bermuda
+          </option>
+          <option
+            value="BTN"
+          >
+            Bhutan
+          </option>
+          <option
+            value="BOL"
+          >
+            Bolivia (Plurinational State of)
+          </option>
+          <option
+            value="BES"
+          >
+            Bonaire, Saint Eustatius and Saba
+          </option>
+          <option
+            value="BIH"
+          >
+            Bosnia and Herzegovina
+          </option>
+          <option
+            value="BWA"
+          >
+            Botswana
+          </option>
+          <option
+            value="BRA"
+          >
+            Brazil
+          </option>
+          <option
+            value="VGB"
+          >
+            British Virgin Islands
+          </option>
+          <option
+            value="BRN"
+          >
+            Brunei Darussalam
+          </option>
+          <option
+            value="BGR"
+          >
+            Bulgaria
+          </option>
+          <option
+            value="BFA"
+          >
+            Burkina Faso
+          </option>
+          <option
+            value="BDI"
+          >
+            Burundi
+          </option>
+          <option
+            value="CPV"
+          >
+            Cabo Verde
+          </option>
+          <option
+            value="KHM"
+          >
+            Cambodia
+          </option>
+          <option
+            value="CMR"
+          >
+            Cameroon
+          </option>
+          <option
+            value="CAN"
+          >
+            Canada
+          </option>
+          <option
+            value="CYM"
+          >
+            Cayman Islands
+          </option>
+          <option
+            value="CAF"
+          >
+            Central African Republic
+          </option>
+          <option
+            value="TCD"
+          >
+            Chad
+          </option>
+          <option
+            value="CHL"
+          >
+            Chile
+          </option>
+          <option
+            value="CHN"
+          >
+            China
+          </option>
+          <option
+            value="HKG"
+          >
+            China, Hong Kong Special Administrative Region
+          </option>
+          <option
+            value="MAC"
+          >
+            China, Macao Special Administrative Region
+          </option>
+          <option
+            value="COL"
+          >
+            Colombia
+          </option>
+          <option
+            value="COM"
+          >
+            Comoros
+          </option>
+          <option
+            value="COG"
+          >
+            Congo
+          </option>
+          <option
+            value="COK"
+          >
+            Cook Islands
+          </option>
+          <option
+            value="CRI"
+          >
+            Costa Rica
+          </option>
+          <option
+            value="CIV"
+          >
+            Côte d'Ivoire
+          </option>
+          <option
+            value="HRV"
+          >
+            Croatia
+          </option>
+          <option
+            value="CUB"
+          >
+            Cuba
+          </option>
+          <option
+            value="CUW"
+          >
+            Curaçao
+          </option>
+          <option
+            value="CYP"
+          >
+            Cyprus
+          </option>
+          <option
+            value="CZE"
+          >
+            Czech Republic
+          </option>
+          <option
+            value="PRK"
+          >
+            Democratic People's Republic of Korea
+          </option>
+          <option
+            value="COD"
+          >
+            Democratic Republic of the Congo
+          </option>
+          <option
+            value="DNK"
+          >
+            Denmark
+          </option>
+          <option
+            value="DJI"
+          >
+            Djibouti
+          </option>
+          <option
+            value="DMA"
+          >
+            Dominica
+          </option>
+          <option
+            value="DOM"
+          >
+            Dominican Republic
+          </option>
+          <option
+            value="ECU"
+          >
+            Ecuador
+          </option>
+          <option
+            value="EGY"
+          >
+            Egypt
+          </option>
+          <option
+            value="SLV"
+          >
+            El Salvador
+          </option>
+          <option
+            value="GNQ"
+          >
+            Equatorial Guinea
+          </option>
+          <option
+            value="ERI"
+          >
+            Eritrea
+          </option>
+          <option
+            value="EST"
+          >
+            Estonia
+          </option>
+          <option
+            value="ETH"
+          >
+            Ethiopia
+          </option>
+          <option
+            value="FRO"
+          >
+            Faeroe Islands
+          </option>
+          <option
+            value="FLK"
+          >
+            Falkland Islands (Malvinas)
+          </option>
+          <option
+            value="FJI"
+          >
+            Fiji
+          </option>
+          <option
+            value="FIN"
+          >
+            Finland
+          </option>
+          <option
+            value="FRA"
+          >
+            France
+          </option>
+          <option
+            value="GUF"
+          >
+            French Guiana
+          </option>
+          <option
+            value="PYF"
+          >
+            French Polynesia
+          </option>
+          <option
+            value="GAB"
+          >
+            Gabon
+          </option>
+          <option
+            value="GMB"
+          >
+            Gambia
+          </option>
+          <option
+            value="GEO"
+          >
+            Georgia
+          </option>
+          <option
+            value="DEU"
+          >
+            Germany
+          </option>
+          <option
+            value="GHA"
+          >
+            Ghana
+          </option>
+          <option
+            value="GIB"
+          >
+            Gibraltar
+          </option>
+          <option
+            value="GRC"
+          >
+            Greece
+          </option>
+          <option
+            value="GRL"
+          >
+            Greenland
+          </option>
+          <option
+            value="GRD"
+          >
+            Grenada
+          </option>
+          <option
+            value="GLP"
+          >
+            Guadeloupe
+          </option>
+          <option
+            value="GUM"
+          >
+            Guam
+          </option>
+          <option
+            value="GTM"
+          >
+            Guatemala
+          </option>
+          <option
+            value="GGY"
+          >
+            Guernsey
+          </option>
+          <option
+            value="GIN"
+          >
+            Guinea
+          </option>
+          <option
+            value="GNB"
+          >
+            Guinea-Bissau
+          </option>
+          <option
+            value="GUY"
+          >
+            Guyana
+          </option>
+          <option
+            value="HTI"
+          >
+            Haiti
+          </option>
+          <option
+            value="VAT"
+          >
+            Holy See
+          </option>
+          <option
+            value="HND"
+          >
+            Honduras
+          </option>
+          <option
+            value="HUN"
+          >
+            Hungary
+          </option>
+          <option
+            value="ISL"
+          >
+            Iceland
+          </option>
+          <option
+            value="IND"
+          >
+            India
+          </option>
+          <option
+            value="IDN"
+          >
+            Indonesia
+          </option>
+          <option
+            value="IRN"
+          >
+            Iran (Islamic Republic of)
+          </option>
+          <option
+            value="IRQ"
+          >
+            Iraq
+          </option>
+          <option
+            value="IRL"
+          >
+            Ireland
+          </option>
+          <option
+            value="IMN"
+          >
+            Isle of Man
+          </option>
+          <option
+            value="ISR"
+          >
+            Israel
+          </option>
+          <option
+            value="ITA"
+          >
+            Italy
+          </option>
+          <option
+            value="JAM"
+          >
+            Jamaica
+          </option>
+          <option
+            value="JPN"
+          >
+            Japan
+          </option>
+          <option
+            value="JEY"
+          >
+            Jersey
+          </option>
+          <option
+            value="JOR"
+          >
+            Jordan
+          </option>
+          <option
+            value="KAZ"
+          >
+            Kazakhstan
+          </option>
+          <option
+            value="KEN"
+          >
+            Kenya
+          </option>
+          <option
+            value="KIR"
+          >
+            Kiribati
+          </option>
+          <option
+            value="KWT"
+          >
+            Kuwait
+          </option>
+          <option
+            value="KGZ"
+          >
+            Kyrgyzstan
+          </option>
+          <option
+            value="LAO"
+          >
+            Lao People's Democratic Republic
+          </option>
+          <option
+            value="LVA"
+          >
+            Latvia
+          </option>
+          <option
+            value="LBN"
+          >
+            Lebanon
+          </option>
+          <option
+            value="LSO"
+          >
+            Lesotho
+          </option>
+          <option
+            value="LBR"
+          >
+            Liberia
+          </option>
+          <option
+            value="LBY"
+          >
+            Libya
+          </option>
+          <option
+            value="LIE"
+          >
+            Liechtenstein
+          </option>
+          <option
+            value="LTU"
+          >
+            Lithuania
+          </option>
+          <option
+            value="LUX"
+          >
+            Luxembourg
+          </option>
+          <option
+            value="MDG"
+          >
+            Madagascar
+          </option>
+          <option
+            value="MWI"
+          >
+            Malawi
+          </option>
+          <option
+            value="MYS"
+          >
+            Malaysia
+          </option>
+          <option
+            value="MDV"
+          >
+            Maldives
+          </option>
+          <option
+            value="MLI"
+          >
+            Mali
+          </option>
+          <option
+            value="MLT"
+          >
+            Malta
+          </option>
+          <option
+            value="MHL"
+          >
+            Marshall Islands
+          </option>
+          <option
+            value="MTQ"
+          >
+            Martinique
+          </option>
+          <option
+            value="MRT"
+          >
+            Mauritania
+          </option>
+          <option
+            value="MUS"
+          >
+            Mauritius
+          </option>
+          <option
+            value="MYT"
+          >
+            Mayotte
+          </option>
+          <option
+            value="MEX"
+          >
+            Mexico
+          </option>
+          <option
+            value="FSM"
+          >
+            Micronesia (Federated States of)
+          </option>
+          <option
+            value="MCO"
+          >
+            Monaco
+          </option>
+          <option
+            value="MNG"
+          >
+            Mongolia
+          </option>
+          <option
+            value="MNE"
+          >
+            Montenegro
+          </option>
+          <option
+            value="MSR"
+          >
+            Montserrat
+          </option>
+          <option
+            value="MAR"
+          >
+            Morocco
+          </option>
+          <option
+            value="MOZ"
+          >
+            Mozambique
+          </option>
+          <option
+            value="MMR"
+          >
+            Myanmar
+          </option>
+          <option
+            value="NAM"
+          >
+            Namibia
+          </option>
+          <option
+            value="NRU"
+          >
+            Nauru
+          </option>
+          <option
+            value="NPL"
+          >
+            Nepal
+          </option>
+          <option
+            value="NLD"
+          >
+            Netherlands
+          </option>
+          <option
+            value="NCL"
+          >
+            New Caledonia
+          </option>
+          <option
+            value="NZL"
+          >
+            New Zealand
+          </option>
+          <option
+            value="NIC"
+          >
+            Nicaragua
+          </option>
+          <option
+            value="NER"
+          >
+            Niger
+          </option>
+          <option
+            value="NGA"
+          >
+            Nigeria
+          </option>
+          <option
+            value="NIU"
+          >
+            Niue
+          </option>
+          <option
+            value="NFK"
+          >
+            Norfolk Island
+          </option>
+          <option
+            value="MNP"
+          >
+            Northern Mariana Islands
+          </option>
+          <option
+            value="NOR"
+          >
+            Norway
+          </option>
+          <option
+            value="OMN"
+          >
+            Oman
+          </option>
+          <option
+            value="PAK"
+          >
+            Pakistan
+          </option>
+          <option
+            value="PLW"
+          >
+            Palau
+          </option>
+          <option
+            value="PAN"
+          >
+            Panama
+          </option>
+          <option
+            value="PNG"
+          >
+            Papua New Guinea
+          </option>
+          <option
+            value="PRY"
+          >
+            Paraguay
+          </option>
+          <option
+            value="PER"
+          >
+            Peru
+          </option>
+          <option
+            value="PHL"
+          >
+            Philippines
+          </option>
+          <option
+            value="PCN"
+          >
+            Pitcairn
+          </option>
+          <option
+            value="POL"
+          >
+            Poland
+          </option>
+          <option
+            value="PRT"
+          >
+            Portugal
+          </option>
+          <option
+            value="PRI"
+          >
+            Puerto Rico
+          </option>
+          <option
+            value="QAT"
+          >
+            Qatar
+          </option>
+          <option
+            value="KOR"
+          >
+            Republic of Korea
+          </option>
+          <option
+            value="MDA"
+          >
+            Republic of Moldova
+          </option>
+          <option
+            value="REU"
+          >
+            Réunion
+          </option>
+          <option
+            value="ROU"
+          >
+            Romania
+          </option>
+          <option
+            value="RUS"
+          >
+            Russian Federation
+          </option>
+          <option
+            value="RWA"
+          >
+            Rwanda
+          </option>
+          <option
+            value="BLM"
+          >
+            Saint-Barthélemy
+          </option>
+          <option
+            value="SHN"
+          >
+            Saint Helena
+          </option>
+          <option
+            value="KNA"
+          >
+            Saint Kitts and Nevis
+          </option>
+          <option
+            value="LCA"
+          >
+            Saint Lucia
+          </option>
+          <option
+            value="MAF"
+          >
+            Saint-Martin (French part)
+          </option>
+          <option
+            value="SPM"
+          >
+            Saint Pierre and Miquelon
+          </option>
+          <option
+            value="VCT"
+          >
+            Saint Vincent and the Grenadines
+          </option>
+          <option
+            value="WSM"
+          >
+            Samoa
+          </option>
+          <option
+            value="SMR"
+          >
+            San Marino
+          </option>
+          <option
+            value="STP"
+          >
+            Sao Tome and Principe
+          </option>
+          <option
+            value="SAU"
+          >
+            Saudi Arabia
+          </option>
+          <option
+            value="SEN"
+          >
+            Senegal
+          </option>
+          <option
+            value="SRB"
+          >
+            Serbia
+          </option>
+          <option
+            value="SYC"
+          >
+            Seychelles
+          </option>
+          <option
+            value="SLE"
+          >
+            Sierra Leone
+          </option>
+          <option
+            value="SGP"
+          >
+            Singapore
+          </option>
+          <option
+            value="SXM"
+          >
+            Sint Maarten (Dutch part)
+          </option>
+          <option
+            value="SVK"
+          >
+            Slovakia
+          </option>
+          <option
+            value="SVN"
+          >
+            Slovenia
+          </option>
+          <option
+            value="SLB"
+          >
+            Solomon Islands
+          </option>
+          <option
+            value="SOM"
+          >
+            Somalia
+          </option>
+          <option
+            value="ZAF"
+          >
+            South Africa
+          </option>
+          <option
+            value="SSD"
+          >
+            South Sudan
+          </option>
+          <option
+            value="ESP"
+          >
+            Spain
+          </option>
+          <option
+            value="LKA"
+          >
+            Sri Lanka
+          </option>
+          <option
+            value="PSE"
+          >
+            State of Palestine
+          </option>
+          <option
+            value="SDN"
+          >
+            Sudan
+          </option>
+          <option
+            value="SUR"
+          >
+            Suriname
+          </option>
+          <option
+            value="SJM"
+          >
+            Svalbard and Jan Mayen Islands
+          </option>
+          <option
+            value="SWZ"
+          >
+            Swaziland
+          </option>
+          <option
+            value="SWE"
+          >
+            Sweden
+          </option>
+          <option
+            value="CHE"
+          >
+            Switzerland
+          </option>
+          <option
+            value="SYR"
+          >
+            Syrian Arab Republic
+          </option>
+          <option
+            value="TWAN"
+          >
+            Taiwan
+          </option>
+          <option
+            value="TJK"
+          >
+            Tajikistan
+          </option>
+          <option
+            value="THA"
+          >
+            Thailand
+          </option>
+          <option
+            value="MKD"
+          >
+            The former Yugoslav Republic of Macedonia
+          </option>
+          <option
+            value="TLS"
+          >
+            Timor-Leste
+          </option>
+          <option
+            value="TGO"
+          >
+            Togo
+          </option>
+          <option
+            value="TKL"
+          >
+            Tokelau
+          </option>
+          <option
+            value="TON"
+          >
+            Tonga
+          </option>
+          <option
+            value="TTO"
+          >
+            Trinidad and Tobago
+          </option>
+          <option
+            value="TUN"
+          >
+            Tunisia
+          </option>
+          <option
+            value="TUR"
+          >
+            Turkey
+          </option>
+          <option
+            value="TKM"
+          >
+            Turkmenistan
+          </option>
+          <option
+            value="TCA"
+          >
+            Turks and Caicos Islands
+          </option>
+          <option
+            value="TUV"
+          >
+            Tuvalu
+          </option>
+          <option
+            value="UGA"
+          >
+            Uganda
+          </option>
+          <option
+            value="UKR"
+          >
+            Ukraine
+          </option>
+          <option
+            value="ARE"
+          >
+            United Arab Emirates
+          </option>
+          <option
+            value="GBR"
+          >
+            United Kingdom of Great Britain and Northern Ireland
+          </option>
+          <option
+            value="TZA"
+          >
+            United Republic of Tanzania
+          </option>
+          <option
+            value="URY"
+          >
+            Uruguay
+          </option>
+          <option
+            value="UZB"
+          >
+            Uzbekistan
+          </option>
+          <option
+            value="VUT"
+          >
+            Vanuatu
+          </option>
+          <option
+            value="VEN"
+          >
+            Venezuela (Bolivarian Republic of)
+          </option>
+          <option
+            value="VNM"
+          >
+            Vietnam
+          </option>
+          <option
+            value="WLF"
+          >
+            Wallis and Futuna Islands
+          </option>
+          <option
+            value="ESH"
+          >
+            Western Sahara
+          </option>
+          <option
+            value="YEM"
+          >
+            Yemen
+          </option>
+          <option
+            value="ZMB"
+          >
+            Zambia
+          </option>
+          <option
+            value="ZWE"
+          >
+            Zimbabwe
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="input-1547104625"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+            }
+          }
+        >
+          Birthplace City/Town
+        </span>
+        <span
+          aria-hidden="true"
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+              "flexGrow": 1,
+            }
+          }
+        >
+          Required
+        </span>
+      </label>
+      <label
+        className="notice emotion-5"
+      >
+        Please list the city/town where the hospital was located, not where your family was living.
+      </label>
+      <input
+        aria-label=""
+        className="txt-f  "
+        id="input-1547104625"
+        maxLength={100}
+        name="partnerA_birthCity"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Montreal"
+      />
+      <div
+        className="t--subinfo t--err m-b100 m-t100"
+      >
+         
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date & Place, w/Country(USA) 1`] = `
+.emotion-3 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-3 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-1 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-1 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-1 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-1 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-1 input::-ms-clear {
+  display: none;
+}
+
+.emotion-1 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-1.disabled {
+  opacity: 0.4;
+}
+
+.emotion-1.disabled * {
+  cursor: not-allowed;
+}
+
+.css-1d92czb .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-4 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-4 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-4 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-4 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-4 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-4 .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-4 .sel-c {
+  display: block;
+}
+
+.emotion-8 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-8 label {
+  margin-top: 0em;
+}
+
+.emotion-8 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-8 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-8 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-8 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-8 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-8 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-8 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-8 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-8 .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
+}
+
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-2 {
+  margin-bottom: 2.25em;
+}
+
+.css-lbsctu .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-3y8lfr .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-sifr7p .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-zx7u86 .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-17tc7bx .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-6 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 2em;
+}
+
+.emotion-6 label {
+  margin-top: 0em;
+}
+
+.emotion-6 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-6 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-6 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-6 .t--opt {
+  color: #58585b !important;
+}
+
+.emotion-5 .sel-c {
+  display: block;
+}
+
+<div
+  className="emotion-8"
+>
+  <h1
+    className="emotion-0"
+  >
+    Date and Place of Birth
+  </h1>
+  <fieldset
+    className="emotion-3"
+  >
+    <div
+      className="emotion-2"
+    >
+      <legend
+        style={
+          Object {
+            "display": "none",
+            "width": "100%",
+          }
+        }
+      >
+        Person A Date of Birth
+      </legend>
+      <div
+        className=" emotion-1"
+      >
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-month"
+          >
+            Month
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-month"
+            max="12"
+            maxLength={2}
+            min="1"
+            name="month"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value="9"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-day"
+          >
+            Day
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-day"
+            max="31"
+            maxLength={2}
+            min="1"
+            name="day"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="DD"
+            type="number"
+            value="1"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-year"
+          >
+            Year
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-year"
+            max={2024}
+            maxLength={4}
+            min="1000"
+            name="year"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value="2003"
+          />
+        </div>
+      </div>
+      
+    </div>
+  </fieldset>
+  <div
+    className="emotion-4"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="select-1817836307"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+              "whiteSpace": "nowrap",
+            }
+          }
+        >
+          Birthplace Country
+        </span>
+        <span
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Required
+        </span>
+      </label>
+      <div
+        className="sel-c  "
+      >
+        <select
+          aria-label=""
+          className="sel-f  "
+          id="select-1817836307"
+          name="partnerA_birthCountry"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value="USA"
+        >
+          <option />
+          <option
+            value="USA"
+          >
+            United States of America
+          </option>
+          <option
+            value="VIR"
+          >
+            United States Virgin Islands
+          </option>
+          <option
+            value="AFG"
+          >
+            Afghanistan
+          </option>
+          <option
+            value="ALA"
+          >
+            Åland Islands
+          </option>
+          <option
+            value="ALB"
+          >
+            Albania
+          </option>
+          <option
+            value="DZA"
+          >
+            Algeria
+          </option>
+          <option
+            value="ASM"
+          >
+            American Samoa
+          </option>
+          <option
+            value="AND"
+          >
+            Andorra
+          </option>
+          <option
+            value="AGO"
+          >
+            Angola
+          </option>
+          <option
+            value="AIA"
+          >
+            Anguilla
+          </option>
+          <option
+            value="ATG"
+          >
+            Antigua and Barbuda
+          </option>
+          <option
+            value="ARG"
+          >
+            Argentina
+          </option>
+          <option
+            value="ARM"
+          >
+            Armenia
+          </option>
+          <option
+            value="ABW"
+          >
+            Aruba
+          </option>
+          <option
+            value="AUS"
+          >
+            Australia
+          </option>
+          <option
+            value="AUT"
+          >
+            Austria
+          </option>
+          <option
+            value="AZE"
+          >
+            Azerbaijan
+          </option>
+          <option
+            value="BHS"
+          >
+            Bahamas
+          </option>
+          <option
+            value="BHR"
+          >
+            Bahrain
+          </option>
+          <option
+            value="BGD"
+          >
+            Bangladesh
+          </option>
+          <option
+            value="BRB"
+          >
+            Barbados
+          </option>
+          <option
+            value="BLR"
+          >
+            Belarus
+          </option>
+          <option
+            value="BEL"
+          >
+            Belgium
+          </option>
+          <option
+            value="BLZ"
+          >
+            Belize
+          </option>
+          <option
+            value="BEN"
+          >
+            Benin
+          </option>
+          <option
+            value="BMU"
+          >
+            Bermuda
+          </option>
+          <option
+            value="BTN"
+          >
+            Bhutan
+          </option>
+          <option
+            value="BOL"
+          >
+            Bolivia (Plurinational State of)
+          </option>
+          <option
+            value="BES"
+          >
+            Bonaire, Saint Eustatius and Saba
+          </option>
+          <option
+            value="BIH"
+          >
+            Bosnia and Herzegovina
+          </option>
+          <option
+            value="BWA"
+          >
+            Botswana
+          </option>
+          <option
+            value="BRA"
+          >
+            Brazil
+          </option>
+          <option
+            value="VGB"
+          >
+            British Virgin Islands
+          </option>
+          <option
+            value="BRN"
+          >
+            Brunei Darussalam
+          </option>
+          <option
+            value="BGR"
+          >
+            Bulgaria
+          </option>
+          <option
+            value="BFA"
+          >
+            Burkina Faso
+          </option>
+          <option
+            value="BDI"
+          >
+            Burundi
+          </option>
+          <option
+            value="CPV"
+          >
+            Cabo Verde
+          </option>
+          <option
+            value="KHM"
+          >
+            Cambodia
+          </option>
+          <option
+            value="CMR"
+          >
+            Cameroon
+          </option>
+          <option
+            value="CAN"
+          >
+            Canada
+          </option>
+          <option
+            value="CYM"
+          >
+            Cayman Islands
+          </option>
+          <option
+            value="CAF"
+          >
+            Central African Republic
+          </option>
+          <option
+            value="TCD"
+          >
+            Chad
+          </option>
+          <option
+            value="CHL"
+          >
+            Chile
+          </option>
+          <option
+            value="CHN"
+          >
+            China
+          </option>
+          <option
+            value="HKG"
+          >
+            China, Hong Kong Special Administrative Region
+          </option>
+          <option
+            value="MAC"
+          >
+            China, Macao Special Administrative Region
+          </option>
+          <option
+            value="COL"
+          >
+            Colombia
+          </option>
+          <option
+            value="COM"
+          >
+            Comoros
+          </option>
+          <option
+            value="COG"
+          >
+            Congo
+          </option>
+          <option
+            value="COK"
+          >
+            Cook Islands
+          </option>
+          <option
+            value="CRI"
+          >
+            Costa Rica
+          </option>
+          <option
+            value="CIV"
+          >
+            Côte d'Ivoire
+          </option>
+          <option
+            value="HRV"
+          >
+            Croatia
+          </option>
+          <option
+            value="CUB"
+          >
+            Cuba
+          </option>
+          <option
+            value="CUW"
+          >
+            Curaçao
+          </option>
+          <option
+            value="CYP"
+          >
+            Cyprus
+          </option>
+          <option
+            value="CZE"
+          >
+            Czech Republic
+          </option>
+          <option
+            value="PRK"
+          >
+            Democratic People's Republic of Korea
+          </option>
+          <option
+            value="COD"
+          >
+            Democratic Republic of the Congo
+          </option>
+          <option
+            value="DNK"
+          >
+            Denmark
+          </option>
+          <option
+            value="DJI"
+          >
+            Djibouti
+          </option>
+          <option
+            value="DMA"
+          >
+            Dominica
+          </option>
+          <option
+            value="DOM"
+          >
+            Dominican Republic
+          </option>
+          <option
+            value="ECU"
+          >
+            Ecuador
+          </option>
+          <option
+            value="EGY"
+          >
+            Egypt
+          </option>
+          <option
+            value="SLV"
+          >
+            El Salvador
+          </option>
+          <option
+            value="GNQ"
+          >
+            Equatorial Guinea
+          </option>
+          <option
+            value="ERI"
+          >
+            Eritrea
+          </option>
+          <option
+            value="EST"
+          >
+            Estonia
+          </option>
+          <option
+            value="ETH"
+          >
+            Ethiopia
+          </option>
+          <option
+            value="FRO"
+          >
+            Faeroe Islands
+          </option>
+          <option
+            value="FLK"
+          >
+            Falkland Islands (Malvinas)
+          </option>
+          <option
+            value="FJI"
+          >
+            Fiji
+          </option>
+          <option
+            value="FIN"
+          >
+            Finland
+          </option>
+          <option
+            value="FRA"
+          >
+            France
+          </option>
+          <option
+            value="GUF"
+          >
+            French Guiana
+          </option>
+          <option
+            value="PYF"
+          >
+            French Polynesia
+          </option>
+          <option
+            value="GAB"
+          >
+            Gabon
+          </option>
+          <option
+            value="GMB"
+          >
+            Gambia
+          </option>
+          <option
+            value="GEO"
+          >
+            Georgia
+          </option>
+          <option
+            value="DEU"
+          >
+            Germany
+          </option>
+          <option
+            value="GHA"
+          >
+            Ghana
+          </option>
+          <option
+            value="GIB"
+          >
+            Gibraltar
+          </option>
+          <option
+            value="GRC"
+          >
+            Greece
+          </option>
+          <option
+            value="GRL"
+          >
+            Greenland
+          </option>
+          <option
+            value="GRD"
+          >
+            Grenada
+          </option>
+          <option
+            value="GLP"
+          >
+            Guadeloupe
+          </option>
+          <option
+            value="GUM"
+          >
+            Guam
+          </option>
+          <option
+            value="GTM"
+          >
+            Guatemala
+          </option>
+          <option
+            value="GGY"
+          >
+            Guernsey
+          </option>
+          <option
+            value="GIN"
+          >
+            Guinea
+          </option>
+          <option
+            value="GNB"
+          >
+            Guinea-Bissau
+          </option>
+          <option
+            value="GUY"
+          >
+            Guyana
+          </option>
+          <option
+            value="HTI"
+          >
+            Haiti
+          </option>
+          <option
+            value="VAT"
+          >
+            Holy See
+          </option>
+          <option
+            value="HND"
+          >
+            Honduras
+          </option>
+          <option
+            value="HUN"
+          >
+            Hungary
+          </option>
+          <option
+            value="ISL"
+          >
+            Iceland
+          </option>
+          <option
+            value="IND"
+          >
+            India
+          </option>
+          <option
+            value="IDN"
+          >
+            Indonesia
+          </option>
+          <option
+            value="IRN"
+          >
+            Iran (Islamic Republic of)
+          </option>
+          <option
+            value="IRQ"
+          >
+            Iraq
+          </option>
+          <option
+            value="IRL"
+          >
+            Ireland
+          </option>
+          <option
+            value="IMN"
+          >
+            Isle of Man
+          </option>
+          <option
+            value="ISR"
+          >
+            Israel
+          </option>
+          <option
+            value="ITA"
+          >
+            Italy
+          </option>
+          <option
+            value="JAM"
+          >
+            Jamaica
+          </option>
+          <option
+            value="JPN"
+          >
+            Japan
+          </option>
+          <option
+            value="JEY"
+          >
+            Jersey
+          </option>
+          <option
+            value="JOR"
+          >
+            Jordan
+          </option>
+          <option
+            value="KAZ"
+          >
+            Kazakhstan
+          </option>
+          <option
+            value="KEN"
+          >
+            Kenya
+          </option>
+          <option
+            value="KIR"
+          >
+            Kiribati
+          </option>
+          <option
+            value="KWT"
+          >
+            Kuwait
+          </option>
+          <option
+            value="KGZ"
+          >
+            Kyrgyzstan
+          </option>
+          <option
+            value="LAO"
+          >
+            Lao People's Democratic Republic
+          </option>
+          <option
+            value="LVA"
+          >
+            Latvia
+          </option>
+          <option
+            value="LBN"
+          >
+            Lebanon
+          </option>
+          <option
+            value="LSO"
+          >
+            Lesotho
+          </option>
+          <option
+            value="LBR"
+          >
+            Liberia
+          </option>
+          <option
+            value="LBY"
+          >
+            Libya
+          </option>
+          <option
+            value="LIE"
+          >
+            Liechtenstein
+          </option>
+          <option
+            value="LTU"
+          >
+            Lithuania
+          </option>
+          <option
+            value="LUX"
+          >
+            Luxembourg
+          </option>
+          <option
+            value="MDG"
+          >
+            Madagascar
+          </option>
+          <option
+            value="MWI"
+          >
+            Malawi
+          </option>
+          <option
+            value="MYS"
+          >
+            Malaysia
+          </option>
+          <option
+            value="MDV"
+          >
+            Maldives
+          </option>
+          <option
+            value="MLI"
+          >
+            Mali
+          </option>
+          <option
+            value="MLT"
+          >
+            Malta
+          </option>
+          <option
+            value="MHL"
+          >
+            Marshall Islands
+          </option>
+          <option
+            value="MTQ"
+          >
+            Martinique
+          </option>
+          <option
+            value="MRT"
+          >
+            Mauritania
+          </option>
+          <option
+            value="MUS"
+          >
+            Mauritius
+          </option>
+          <option
+            value="MYT"
+          >
+            Mayotte
+          </option>
+          <option
+            value="MEX"
+          >
+            Mexico
+          </option>
+          <option
+            value="FSM"
+          >
+            Micronesia (Federated States of)
+          </option>
+          <option
+            value="MCO"
+          >
+            Monaco
+          </option>
+          <option
+            value="MNG"
+          >
+            Mongolia
+          </option>
+          <option
+            value="MNE"
+          >
+            Montenegro
+          </option>
+          <option
+            value="MSR"
+          >
+            Montserrat
+          </option>
+          <option
+            value="MAR"
+          >
+            Morocco
+          </option>
+          <option
+            value="MOZ"
+          >
+            Mozambique
+          </option>
+          <option
+            value="MMR"
+          >
+            Myanmar
+          </option>
+          <option
+            value="NAM"
+          >
+            Namibia
+          </option>
+          <option
+            value="NRU"
+          >
+            Nauru
+          </option>
+          <option
+            value="NPL"
+          >
+            Nepal
+          </option>
+          <option
+            value="NLD"
+          >
+            Netherlands
+          </option>
+          <option
+            value="NCL"
+          >
+            New Caledonia
+          </option>
+          <option
+            value="NZL"
+          >
+            New Zealand
+          </option>
+          <option
+            value="NIC"
+          >
+            Nicaragua
+          </option>
+          <option
+            value="NER"
+          >
+            Niger
+          </option>
+          <option
+            value="NGA"
+          >
+            Nigeria
+          </option>
+          <option
+            value="NIU"
+          >
+            Niue
+          </option>
+          <option
+            value="NFK"
+          >
+            Norfolk Island
+          </option>
+          <option
+            value="MNP"
+          >
+            Northern Mariana Islands
+          </option>
+          <option
+            value="NOR"
+          >
+            Norway
+          </option>
+          <option
+            value="OMN"
+          >
+            Oman
+          </option>
+          <option
+            value="PAK"
+          >
+            Pakistan
+          </option>
+          <option
+            value="PLW"
+          >
+            Palau
+          </option>
+          <option
+            value="PAN"
+          >
+            Panama
+          </option>
+          <option
+            value="PNG"
+          >
+            Papua New Guinea
+          </option>
+          <option
+            value="PRY"
+          >
+            Paraguay
+          </option>
+          <option
+            value="PER"
+          >
+            Peru
+          </option>
+          <option
+            value="PHL"
+          >
+            Philippines
+          </option>
+          <option
+            value="PCN"
+          >
+            Pitcairn
+          </option>
+          <option
+            value="POL"
+          >
+            Poland
+          </option>
+          <option
+            value="PRT"
+          >
+            Portugal
+          </option>
+          <option
+            value="PRI"
+          >
+            Puerto Rico
+          </option>
+          <option
+            value="QAT"
+          >
+            Qatar
+          </option>
+          <option
+            value="KOR"
+          >
+            Republic of Korea
+          </option>
+          <option
+            value="MDA"
+          >
+            Republic of Moldova
+          </option>
+          <option
+            value="REU"
+          >
+            Réunion
+          </option>
+          <option
+            value="ROU"
+          >
+            Romania
+          </option>
+          <option
+            value="RUS"
+          >
+            Russian Federation
+          </option>
+          <option
+            value="RWA"
+          >
+            Rwanda
+          </option>
+          <option
+            value="BLM"
+          >
+            Saint-Barthélemy
+          </option>
+          <option
+            value="SHN"
+          >
+            Saint Helena
+          </option>
+          <option
+            value="KNA"
+          >
+            Saint Kitts and Nevis
+          </option>
+          <option
+            value="LCA"
+          >
+            Saint Lucia
+          </option>
+          <option
+            value="MAF"
+          >
+            Saint-Martin (French part)
+          </option>
+          <option
+            value="SPM"
+          >
+            Saint Pierre and Miquelon
+          </option>
+          <option
+            value="VCT"
+          >
+            Saint Vincent and the Grenadines
+          </option>
+          <option
+            value="WSM"
+          >
+            Samoa
+          </option>
+          <option
+            value="SMR"
+          >
+            San Marino
+          </option>
+          <option
+            value="STP"
+          >
+            Sao Tome and Principe
+          </option>
+          <option
+            value="SAU"
+          >
+            Saudi Arabia
+          </option>
+          <option
+            value="SEN"
+          >
+            Senegal
+          </option>
+          <option
+            value="SRB"
+          >
+            Serbia
+          </option>
+          <option
+            value="SYC"
+          >
+            Seychelles
+          </option>
+          <option
+            value="SLE"
+          >
+            Sierra Leone
+          </option>
+          <option
+            value="SGP"
+          >
+            Singapore
+          </option>
+          <option
+            value="SXM"
+          >
+            Sint Maarten (Dutch part)
+          </option>
+          <option
+            value="SVK"
+          >
+            Slovakia
+          </option>
+          <option
+            value="SVN"
+          >
+            Slovenia
+          </option>
+          <option
+            value="SLB"
+          >
+            Solomon Islands
+          </option>
+          <option
+            value="SOM"
+          >
+            Somalia
+          </option>
+          <option
+            value="ZAF"
+          >
+            South Africa
+          </option>
+          <option
+            value="SSD"
+          >
+            South Sudan
+          </option>
+          <option
+            value="ESP"
+          >
+            Spain
+          </option>
+          <option
+            value="LKA"
+          >
+            Sri Lanka
+          </option>
+          <option
+            value="PSE"
+          >
+            State of Palestine
+          </option>
+          <option
+            value="SDN"
+          >
+            Sudan
+          </option>
+          <option
+            value="SUR"
+          >
+            Suriname
+          </option>
+          <option
+            value="SJM"
+          >
+            Svalbard and Jan Mayen Islands
+          </option>
+          <option
+            value="SWZ"
+          >
+            Swaziland
+          </option>
+          <option
+            value="SWE"
+          >
+            Sweden
+          </option>
+          <option
+            value="CHE"
+          >
+            Switzerland
+          </option>
+          <option
+            value="SYR"
+          >
+            Syrian Arab Republic
+          </option>
+          <option
+            value="TWAN"
+          >
+            Taiwan
+          </option>
+          <option
+            value="TJK"
+          >
+            Tajikistan
+          </option>
+          <option
+            value="THA"
+          >
+            Thailand
+          </option>
+          <option
+            value="MKD"
+          >
+            The former Yugoslav Republic of Macedonia
+          </option>
+          <option
+            value="TLS"
+          >
+            Timor-Leste
+          </option>
+          <option
+            value="TGO"
+          >
+            Togo
+          </option>
+          <option
+            value="TKL"
+          >
+            Tokelau
+          </option>
+          <option
+            value="TON"
+          >
+            Tonga
+          </option>
+          <option
+            value="TTO"
+          >
+            Trinidad and Tobago
+          </option>
+          <option
+            value="TUN"
+          >
+            Tunisia
+          </option>
+          <option
+            value="TUR"
+          >
+            Turkey
+          </option>
+          <option
+            value="TKM"
+          >
+            Turkmenistan
+          </option>
+          <option
+            value="TCA"
+          >
+            Turks and Caicos Islands
+          </option>
+          <option
+            value="TUV"
+          >
+            Tuvalu
+          </option>
+          <option
+            value="UGA"
+          >
+            Uganda
+          </option>
+          <option
+            value="UKR"
+          >
+            Ukraine
+          </option>
+          <option
+            value="ARE"
+          >
+            United Arab Emirates
+          </option>
+          <option
+            value="GBR"
+          >
+            United Kingdom of Great Britain and Northern Ireland
+          </option>
+          <option
+            value="TZA"
+          >
+            United Republic of Tanzania
+          </option>
+          <option
+            value="URY"
+          >
+            Uruguay
+          </option>
+          <option
+            value="UZB"
+          >
+            Uzbekistan
+          </option>
+          <option
+            value="VUT"
+          >
+            Vanuatu
+          </option>
+          <option
+            value="VEN"
+          >
+            Venezuela (Bolivarian Republic of)
+          </option>
+          <option
+            value="VNM"
+          >
+            Vietnam
+          </option>
+          <option
+            value="WLF"
+          >
+            Wallis and Futuna Islands
+          </option>
+          <option
+            value="ESH"
+          >
+            Western Sahara
+          </option>
+          <option
+            value="YEM"
+          >
+            Yemen
+          </option>
+          <option
+            value="ZMB"
+          >
+            Zambia
+          </option>
+          <option
+            value="ZWE"
+          >
+            Zimbabwe
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-6"
+  >
+    <div
+      className="emotion-5"
+    >
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="select-533704473"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
+            style={
+              Object {
+                "display": "flex",
+                "marginRight": "0.5em",
+                "whiteSpace": "nowrap",
+              }
+            }
+          >
+            Birthplace State/Province
+          </span>
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            Required
+          </span>
+        </label>
+        <div
+          className="sel-c  "
+        >
+          <select
+            aria-label=""
+            className="sel-f  "
+            id="select-533704473"
+            name="partnerA_birthState"
+            onBlur={[Function]}
+            onChange={[Function]}
+            value="MA"
+          >
+            <option
+              value=""
+            >
+              --
+            </option>
+            <option
+              value="AL"
+            >
+              AL
+            </option>
+            <option
+              value="AK"
+            >
+              AK
+            </option>
+            <option
+              value="AZ"
+            >
+              AZ
+            </option>
+            <option
+              value="AR"
+            >
+              AR
+            </option>
+            <option
+              value="CA"
+            >
+              CA
+            </option>
+            <option
+              value="CO"
+            >
+              CO
+            </option>
+            <option
+              value="CT"
+            >
+              CT
+            </option>
+            <option
+              value="DE"
+            >
+              DE
+            </option>
+            <option
+              value="DC"
+            >
+              DC
+            </option>
+            <option
+              value="FL"
+            >
+              FL
+            </option>
+            <option
+              value="GA"
+            >
+              GA
+            </option>
+            <option
+              value="HI"
+            >
+              HI
+            </option>
+            <option
+              value="ID"
+            >
+              ID
+            </option>
+            <option
+              value="IL"
+            >
+              IL
+            </option>
+            <option
+              value="IN"
+            >
+              IN
+            </option>
+            <option
+              value="IA"
+            >
+              IA
+            </option>
+            <option
+              value="KS"
+            >
+              KS
+            </option>
+            <option
+              value="KY"
+            >
+              KY
+            </option>
+            <option
+              value="LA"
+            >
+              LA
+            </option>
+            <option
+              value="ME"
+            >
+              ME
+            </option>
+            <option
+              value="MD"
+            >
+              MD
+            </option>
+            <option
+              value="MA"
+            >
+              MA
+            </option>
+            <option
+              value="MI"
+            >
+              MI
+            </option>
+            <option
+              value="MN"
+            >
+              MN
+            </option>
+            <option
+              value="MS"
+            >
+              MS
+            </option>
+            <option
+              value="MO"
+            >
+              MO
+            </option>
+            <option
+              value="MT"
+            >
+              MT
+            </option>
+            <option
+              value="NE"
+            >
+              NE
+            </option>
+            <option
+              value="NV"
+            >
+              NV
+            </option>
+            <option
+              value="NH"
+            >
+              NH
+            </option>
+            <option
+              value="NJ"
+            >
+              NJ
+            </option>
+            <option
+              value="NM"
+            >
+              NM
+            </option>
+            <option
+              value="NY"
+            >
+              NY
+            </option>
+            <option
+              value="NC"
+            >
+              NC
+            </option>
+            <option
+              value="ND"
+            >
+              ND
+            </option>
+            <option
+              value="OH"
+            >
+              OH
+            </option>
+            <option
+              value="OK"
+            >
+              OK
+            </option>
+            <option
+              value="OR"
+            >
+              OR
+            </option>
+            <option
+              value="PA"
+            >
+              PA
+            </option>
+            <option
+              value="RI"
+            >
+              RI
+            </option>
+            <option
+              value="SC"
+            >
+              SC
+            </option>
+            <option
+              value="SD"
+            >
+              SD
+            </option>
+            <option
+              value="TN"
+            >
+              TN
+            </option>
+            <option
+              value="TX"
+            >
+              TX
+            </option>
+            <option
+              value="UT"
+            >
+              UT
+            </option>
+            <option
+              value="VT"
+            >
+              VT
+            </option>
+            <option
+              value="VA"
+            >
+              VA
+            </option>
+            <option
+              value="WA"
+            >
+              WA
+            </option>
+            <option
+              value="WV"
+            >
+              WV
+            </option>
+            <option
+              value="WI"
+            >
+              WI
+            </option>
+            <option
+              value="WY"
+            >
+              WY
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="input-1547104625"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+            }
+          }
+        >
+          Birthplace City/Town
+        </span>
+        <span
+          aria-hidden="true"
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+              "flexGrow": 1,
+            }
+          }
+        >
+          Required
+        </span>
+      </label>
+      <label
+        className="notice emotion-7"
+      >
+        Please list the city/town where the hospital was located, not where your family was living.
+      </label>
+      <input
+        aria-label=""
+        className="txt-f  "
+        id="input-1547104625"
+        maxLength={100}
+        name="partnerA_birthCity"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value="Boston"
+      />
+      <div
+        className="t--subinfo t--err m-b100 m-t100"
+      >
+         
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date & Place, wo/Country 1`] = `
+.emotion-3 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-3 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-1 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-1 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-1 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-1 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-1 input::-ms-clear {
+  display: none;
+}
+
+.emotion-1 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-1.disabled {
+  opacity: 0.4;
+}
+
+.emotion-1.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-4 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-4 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-4 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-4 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-4 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-4 .css-content-psedo:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-4 .sel-c {
+  display: block;
+}
+
+.emotion-5 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-5 label {
+  margin-top: 0em;
+}
+
+.emotion-5 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-5 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-5 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-5 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-5 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-5 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-5 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-5 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-5 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-5 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-5 .css-content-psedo:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
+}
+
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-2 {
+  margin-bottom: 2.25em;
+}
+
+<div
+  className="emotion-5"
+>
+  <h1
+    className="emotion-0"
+  >
+    Date and Place of Birth
+  </h1>
+  <fieldset
+    className="emotion-3"
+  >
+    <div
+      className="emotion-2"
+    >
+      <legend
+        style={
+          Object {
+            "display": "none",
+            "width": "100%",
+          }
+        }
+      >
+        Person A Date of Birth
+      </legend>
+      <div
+        className=" emotion-1"
+      >
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-month"
+          >
+            Month
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-month"
+            max="12"
+            maxLength={2}
+            min="1"
+            name="month"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value="9"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-day"
+          >
+            Day
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-day"
+            max="31"
+            maxLength={2}
+            min="1"
+            name="day"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="DD"
+            type="number"
+            value="1"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-year"
+          >
+            Year
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-year"
+            max={2024}
+            maxLength={4}
+            min="1000"
+            name="year"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value="2003"
+          />
+        </div>
+      </div>
+      
+    </div>
+  </fieldset>
+  <div
+    className="emotion-4"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="select-1817836307"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+              "whiteSpace": "nowrap",
+            }
+          }
+        >
+          Birthplace Country
+        </span>
+        <span
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Required
+        </span>
+      </label>
+      <div
+        className="sel-c  "
+      >
+        <select
+          aria-label=""
+          className="sel-f  "
+          id="select-1817836307"
+          name="partnerA_birthCountry"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value=""
+        >
+          <option />
+          <option
+            value="USA"
+          >
+            United States of America
+          </option>
+          <option
+            value="VIR"
+          >
+            United States Virgin Islands
+          </option>
+          <option
+            value="AFG"
+          >
+            Afghanistan
+          </option>
+          <option
+            value="ALA"
+          >
+            Åland Islands
+          </option>
+          <option
+            value="ALB"
+          >
+            Albania
+          </option>
+          <option
+            value="DZA"
+          >
+            Algeria
+          </option>
+          <option
+            value="ASM"
+          >
+            American Samoa
+          </option>
+          <option
+            value="AND"
+          >
+            Andorra
+          </option>
+          <option
+            value="AGO"
+          >
+            Angola
+          </option>
+          <option
+            value="AIA"
+          >
+            Anguilla
+          </option>
+          <option
+            value="ATG"
+          >
+            Antigua and Barbuda
+          </option>
+          <option
+            value="ARG"
+          >
+            Argentina
+          </option>
+          <option
+            value="ARM"
+          >
+            Armenia
+          </option>
+          <option
+            value="ABW"
+          >
+            Aruba
+          </option>
+          <option
+            value="AUS"
+          >
+            Australia
+          </option>
+          <option
+            value="AUT"
+          >
+            Austria
+          </option>
+          <option
+            value="AZE"
+          >
+            Azerbaijan
+          </option>
+          <option
+            value="BHS"
+          >
+            Bahamas
+          </option>
+          <option
+            value="BHR"
+          >
+            Bahrain
+          </option>
+          <option
+            value="BGD"
+          >
+            Bangladesh
+          </option>
+          <option
+            value="BRB"
+          >
+            Barbados
+          </option>
+          <option
+            value="BLR"
+          >
+            Belarus
+          </option>
+          <option
+            value="BEL"
+          >
+            Belgium
+          </option>
+          <option
+            value="BLZ"
+          >
+            Belize
+          </option>
+          <option
+            value="BEN"
+          >
+            Benin
+          </option>
+          <option
+            value="BMU"
+          >
+            Bermuda
+          </option>
+          <option
+            value="BTN"
+          >
+            Bhutan
+          </option>
+          <option
+            value="BOL"
+          >
+            Bolivia (Plurinational State of)
+          </option>
+          <option
+            value="BES"
+          >
+            Bonaire, Saint Eustatius and Saba
+          </option>
+          <option
+            value="BIH"
+          >
+            Bosnia and Herzegovina
+          </option>
+          <option
+            value="BWA"
+          >
+            Botswana
+          </option>
+          <option
+            value="BRA"
+          >
+            Brazil
+          </option>
+          <option
+            value="VGB"
+          >
+            British Virgin Islands
+          </option>
+          <option
+            value="BRN"
+          >
+            Brunei Darussalam
+          </option>
+          <option
+            value="BGR"
+          >
+            Bulgaria
+          </option>
+          <option
+            value="BFA"
+          >
+            Burkina Faso
+          </option>
+          <option
+            value="BDI"
+          >
+            Burundi
+          </option>
+          <option
+            value="CPV"
+          >
+            Cabo Verde
+          </option>
+          <option
+            value="KHM"
+          >
+            Cambodia
+          </option>
+          <option
+            value="CMR"
+          >
+            Cameroon
+          </option>
+          <option
+            value="CAN"
+          >
+            Canada
+          </option>
+          <option
+            value="CYM"
+          >
+            Cayman Islands
+          </option>
+          <option
+            value="CAF"
+          >
+            Central African Republic
+          </option>
+          <option
+            value="TCD"
+          >
+            Chad
+          </option>
+          <option
+            value="CHL"
+          >
+            Chile
+          </option>
+          <option
+            value="CHN"
+          >
+            China
+          </option>
+          <option
+            value="HKG"
+          >
+            China, Hong Kong Special Administrative Region
+          </option>
+          <option
+            value="MAC"
+          >
+            China, Macao Special Administrative Region
+          </option>
+          <option
+            value="COL"
+          >
+            Colombia
+          </option>
+          <option
+            value="COM"
+          >
+            Comoros
+          </option>
+          <option
+            value="COG"
+          >
+            Congo
+          </option>
+          <option
+            value="COK"
+          >
+            Cook Islands
+          </option>
+          <option
+            value="CRI"
+          >
+            Costa Rica
+          </option>
+          <option
+            value="CIV"
+          >
+            Côte d'Ivoire
+          </option>
+          <option
+            value="HRV"
+          >
+            Croatia
+          </option>
+          <option
+            value="CUB"
+          >
+            Cuba
+          </option>
+          <option
+            value="CUW"
+          >
+            Curaçao
+          </option>
+          <option
+            value="CYP"
+          >
+            Cyprus
+          </option>
+          <option
+            value="CZE"
+          >
+            Czech Republic
+          </option>
+          <option
+            value="PRK"
+          >
+            Democratic People's Republic of Korea
+          </option>
+          <option
+            value="COD"
+          >
+            Democratic Republic of the Congo
+          </option>
+          <option
+            value="DNK"
+          >
+            Denmark
+          </option>
+          <option
+            value="DJI"
+          >
+            Djibouti
+          </option>
+          <option
+            value="DMA"
+          >
+            Dominica
+          </option>
+          <option
+            value="DOM"
+          >
+            Dominican Republic
+          </option>
+          <option
+            value="ECU"
+          >
+            Ecuador
+          </option>
+          <option
+            value="EGY"
+          >
+            Egypt
+          </option>
+          <option
+            value="SLV"
+          >
+            El Salvador
+          </option>
+          <option
+            value="GNQ"
+          >
+            Equatorial Guinea
+          </option>
+          <option
+            value="ERI"
+          >
+            Eritrea
+          </option>
+          <option
+            value="EST"
+          >
+            Estonia
+          </option>
+          <option
+            value="ETH"
+          >
+            Ethiopia
+          </option>
+          <option
+            value="FRO"
+          >
+            Faeroe Islands
+          </option>
+          <option
+            value="FLK"
+          >
+            Falkland Islands (Malvinas)
+          </option>
+          <option
+            value="FJI"
+          >
+            Fiji
+          </option>
+          <option
+            value="FIN"
+          >
+            Finland
+          </option>
+          <option
+            value="FRA"
+          >
+            France
+          </option>
+          <option
+            value="GUF"
+          >
+            French Guiana
+          </option>
+          <option
+            value="PYF"
+          >
+            French Polynesia
+          </option>
+          <option
+            value="GAB"
+          >
+            Gabon
+          </option>
+          <option
+            value="GMB"
+          >
+            Gambia
+          </option>
+          <option
+            value="GEO"
+          >
+            Georgia
+          </option>
+          <option
+            value="DEU"
+          >
+            Germany
+          </option>
+          <option
+            value="GHA"
+          >
+            Ghana
+          </option>
+          <option
+            value="GIB"
+          >
+            Gibraltar
+          </option>
+          <option
+            value="GRC"
+          >
+            Greece
+          </option>
+          <option
+            value="GRL"
+          >
+            Greenland
+          </option>
+          <option
+            value="GRD"
+          >
+            Grenada
+          </option>
+          <option
+            value="GLP"
+          >
+            Guadeloupe
+          </option>
+          <option
+            value="GUM"
+          >
+            Guam
+          </option>
+          <option
+            value="GTM"
+          >
+            Guatemala
+          </option>
+          <option
+            value="GGY"
+          >
+            Guernsey
+          </option>
+          <option
+            value="GIN"
+          >
+            Guinea
+          </option>
+          <option
+            value="GNB"
+          >
+            Guinea-Bissau
+          </option>
+          <option
+            value="GUY"
+          >
+            Guyana
+          </option>
+          <option
+            value="HTI"
+          >
+            Haiti
+          </option>
+          <option
+            value="VAT"
+          >
+            Holy See
+          </option>
+          <option
+            value="HND"
+          >
+            Honduras
+          </option>
+          <option
+            value="HUN"
+          >
+            Hungary
+          </option>
+          <option
+            value="ISL"
+          >
+            Iceland
+          </option>
+          <option
+            value="IND"
+          >
+            India
+          </option>
+          <option
+            value="IDN"
+          >
+            Indonesia
+          </option>
+          <option
+            value="IRN"
+          >
+            Iran (Islamic Republic of)
+          </option>
+          <option
+            value="IRQ"
+          >
+            Iraq
+          </option>
+          <option
+            value="IRL"
+          >
+            Ireland
+          </option>
+          <option
+            value="IMN"
+          >
+            Isle of Man
+          </option>
+          <option
+            value="ISR"
+          >
+            Israel
+          </option>
+          <option
+            value="ITA"
+          >
+            Italy
+          </option>
+          <option
+            value="JAM"
+          >
+            Jamaica
+          </option>
+          <option
+            value="JPN"
+          >
+            Japan
+          </option>
+          <option
+            value="JEY"
+          >
+            Jersey
+          </option>
+          <option
+            value="JOR"
+          >
+            Jordan
+          </option>
+          <option
+            value="KAZ"
+          >
+            Kazakhstan
+          </option>
+          <option
+            value="KEN"
+          >
+            Kenya
+          </option>
+          <option
+            value="KIR"
+          >
+            Kiribati
+          </option>
+          <option
+            value="KWT"
+          >
+            Kuwait
+          </option>
+          <option
+            value="KGZ"
+          >
+            Kyrgyzstan
+          </option>
+          <option
+            value="LAO"
+          >
+            Lao People's Democratic Republic
+          </option>
+          <option
+            value="LVA"
+          >
+            Latvia
+          </option>
+          <option
+            value="LBN"
+          >
+            Lebanon
+          </option>
+          <option
+            value="LSO"
+          >
+            Lesotho
+          </option>
+          <option
+            value="LBR"
+          >
+            Liberia
+          </option>
+          <option
+            value="LBY"
+          >
+            Libya
+          </option>
+          <option
+            value="LIE"
+          >
+            Liechtenstein
+          </option>
+          <option
+            value="LTU"
+          >
+            Lithuania
+          </option>
+          <option
+            value="LUX"
+          >
+            Luxembourg
+          </option>
+          <option
+            value="MDG"
+          >
+            Madagascar
+          </option>
+          <option
+            value="MWI"
+          >
+            Malawi
+          </option>
+          <option
+            value="MYS"
+          >
+            Malaysia
+          </option>
+          <option
+            value="MDV"
+          >
+            Maldives
+          </option>
+          <option
+            value="MLI"
+          >
+            Mali
+          </option>
+          <option
+            value="MLT"
+          >
+            Malta
+          </option>
+          <option
+            value="MHL"
+          >
+            Marshall Islands
+          </option>
+          <option
+            value="MTQ"
+          >
+            Martinique
+          </option>
+          <option
+            value="MRT"
+          >
+            Mauritania
+          </option>
+          <option
+            value="MUS"
+          >
+            Mauritius
+          </option>
+          <option
+            value="MYT"
+          >
+            Mayotte
+          </option>
+          <option
+            value="MEX"
+          >
+            Mexico
+          </option>
+          <option
+            value="FSM"
+          >
+            Micronesia (Federated States of)
+          </option>
+          <option
+            value="MCO"
+          >
+            Monaco
+          </option>
+          <option
+            value="MNG"
+          >
+            Mongolia
+          </option>
+          <option
+            value="MNE"
+          >
+            Montenegro
+          </option>
+          <option
+            value="MSR"
+          >
+            Montserrat
+          </option>
+          <option
+            value="MAR"
+          >
+            Morocco
+          </option>
+          <option
+            value="MOZ"
+          >
+            Mozambique
+          </option>
+          <option
+            value="MMR"
+          >
+            Myanmar
+          </option>
+          <option
+            value="NAM"
+          >
+            Namibia
+          </option>
+          <option
+            value="NRU"
+          >
+            Nauru
+          </option>
+          <option
+            value="NPL"
+          >
+            Nepal
+          </option>
+          <option
+            value="NLD"
+          >
+            Netherlands
+          </option>
+          <option
+            value="NCL"
+          >
+            New Caledonia
+          </option>
+          <option
+            value="NZL"
+          >
+            New Zealand
+          </option>
+          <option
+            value="NIC"
+          >
+            Nicaragua
+          </option>
+          <option
+            value="NER"
+          >
+            Niger
+          </option>
+          <option
+            value="NGA"
+          >
+            Nigeria
+          </option>
+          <option
+            value="NIU"
+          >
+            Niue
+          </option>
+          <option
+            value="NFK"
+          >
+            Norfolk Island
+          </option>
+          <option
+            value="MNP"
+          >
+            Northern Mariana Islands
+          </option>
+          <option
+            value="NOR"
+          >
+            Norway
+          </option>
+          <option
+            value="OMN"
+          >
+            Oman
+          </option>
+          <option
+            value="PAK"
+          >
+            Pakistan
+          </option>
+          <option
+            value="PLW"
+          >
+            Palau
+          </option>
+          <option
+            value="PAN"
+          >
+            Panama
+          </option>
+          <option
+            value="PNG"
+          >
+            Papua New Guinea
+          </option>
+          <option
+            value="PRY"
+          >
+            Paraguay
+          </option>
+          <option
+            value="PER"
+          >
+            Peru
+          </option>
+          <option
+            value="PHL"
+          >
+            Philippines
+          </option>
+          <option
+            value="PCN"
+          >
+            Pitcairn
+          </option>
+          <option
+            value="POL"
+          >
+            Poland
+          </option>
+          <option
+            value="PRT"
+          >
+            Portugal
+          </option>
+          <option
+            value="PRI"
+          >
+            Puerto Rico
+          </option>
+          <option
+            value="QAT"
+          >
+            Qatar
+          </option>
+          <option
+            value="KOR"
+          >
+            Republic of Korea
+          </option>
+          <option
+            value="MDA"
+          >
+            Republic of Moldova
+          </option>
+          <option
+            value="REU"
+          >
+            Réunion
+          </option>
+          <option
+            value="ROU"
+          >
+            Romania
+          </option>
+          <option
+            value="RUS"
+          >
+            Russian Federation
+          </option>
+          <option
+            value="RWA"
+          >
+            Rwanda
+          </option>
+          <option
+            value="BLM"
+          >
+            Saint-Barthélemy
+          </option>
+          <option
+            value="SHN"
+          >
+            Saint Helena
+          </option>
+          <option
+            value="KNA"
+          >
+            Saint Kitts and Nevis
+          </option>
+          <option
+            value="LCA"
+          >
+            Saint Lucia
+          </option>
+          <option
+            value="MAF"
+          >
+            Saint-Martin (French part)
+          </option>
+          <option
+            value="SPM"
+          >
+            Saint Pierre and Miquelon
+          </option>
+          <option
+            value="VCT"
+          >
+            Saint Vincent and the Grenadines
+          </option>
+          <option
+            value="WSM"
+          >
+            Samoa
+          </option>
+          <option
+            value="SMR"
+          >
+            San Marino
+          </option>
+          <option
+            value="STP"
+          >
+            Sao Tome and Principe
+          </option>
+          <option
+            value="SAU"
+          >
+            Saudi Arabia
+          </option>
+          <option
+            value="SEN"
+          >
+            Senegal
+          </option>
+          <option
+            value="SRB"
+          >
+            Serbia
+          </option>
+          <option
+            value="SYC"
+          >
+            Seychelles
+          </option>
+          <option
+            value="SLE"
+          >
+            Sierra Leone
+          </option>
+          <option
+            value="SGP"
+          >
+            Singapore
+          </option>
+          <option
+            value="SXM"
+          >
+            Sint Maarten (Dutch part)
+          </option>
+          <option
+            value="SVK"
+          >
+            Slovakia
+          </option>
+          <option
+            value="SVN"
+          >
+            Slovenia
+          </option>
+          <option
+            value="SLB"
+          >
+            Solomon Islands
+          </option>
+          <option
+            value="SOM"
+          >
+            Somalia
+          </option>
+          <option
+            value="ZAF"
+          >
+            South Africa
+          </option>
+          <option
+            value="SSD"
+          >
+            South Sudan
+          </option>
+          <option
+            value="ESP"
+          >
+            Spain
+          </option>
+          <option
+            value="LKA"
+          >
+            Sri Lanka
+          </option>
+          <option
+            value="PSE"
+          >
+            State of Palestine
+          </option>
+          <option
+            value="SDN"
+          >
+            Sudan
+          </option>
+          <option
+            value="SUR"
+          >
+            Suriname
+          </option>
+          <option
+            value="SJM"
+          >
+            Svalbard and Jan Mayen Islands
+          </option>
+          <option
+            value="SWZ"
+          >
+            Swaziland
+          </option>
+          <option
+            value="SWE"
+          >
+            Sweden
+          </option>
+          <option
+            value="CHE"
+          >
+            Switzerland
+          </option>
+          <option
+            value="SYR"
+          >
+            Syrian Arab Republic
+          </option>
+          <option
+            value="TWAN"
+          >
+            Taiwan
+          </option>
+          <option
+            value="TJK"
+          >
+            Tajikistan
+          </option>
+          <option
+            value="THA"
+          >
+            Thailand
+          </option>
+          <option
+            value="MKD"
+          >
+            The former Yugoslav Republic of Macedonia
+          </option>
+          <option
+            value="TLS"
+          >
+            Timor-Leste
+          </option>
+          <option
+            value="TGO"
+          >
+            Togo
+          </option>
+          <option
+            value="TKL"
+          >
+            Tokelau
+          </option>
+          <option
+            value="TON"
+          >
+            Tonga
+          </option>
+          <option
+            value="TTO"
+          >
+            Trinidad and Tobago
+          </option>
+          <option
+            value="TUN"
+          >
+            Tunisia
+          </option>
+          <option
+            value="TUR"
+          >
+            Turkey
+          </option>
+          <option
+            value="TKM"
+          >
+            Turkmenistan
+          </option>
+          <option
+            value="TCA"
+          >
+            Turks and Caicos Islands
+          </option>
+          <option
+            value="TUV"
+          >
+            Tuvalu
+          </option>
+          <option
+            value="UGA"
+          >
+            Uganda
+          </option>
+          <option
+            value="UKR"
+          >
+            Ukraine
+          </option>
+          <option
+            value="ARE"
+          >
+            United Arab Emirates
+          </option>
+          <option
+            value="GBR"
+          >
+            United Kingdom of Great Britain and Northern Ireland
+          </option>
+          <option
+            value="TZA"
+          >
+            United Republic of Tanzania
+          </option>
+          <option
+            value="URY"
+          >
+            Uruguay
+          </option>
+          <option
+            value="UZB"
+          >
+            Uzbekistan
+          </option>
+          <option
+            value="VUT"
+          >
+            Vanuatu
+          </option>
+          <option
+            value="VEN"
+          >
+            Venezuela (Bolivarian Republic of)
+          </option>
+          <option
+            value="VNM"
+          >
+            Vietnam
+          </option>
+          <option
+            value="WLF"
+          >
+            Wallis and Futuna Islands
+          </option>
+          <option
+            value="ESH"
+          >
+            Western Sahara
+          </option>
+          <option
+            value="YEM"
+          >
+            Yemen
+          </option>
+          <option
+            value="ZMB"
+          >
+            Zambia
+          </option>
+          <option
+            value="ZWE"
+          >
+            Zimbabwe
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, Default 1`] = `
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-3 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-3 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-3 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-3 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-3 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-3 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-2 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-1 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-1 .icon::before {
+  content: '?';
+}
+
+.emotion-1 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-1 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-1 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-1 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-16 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-16 label {
+  margin-top: 0em;
+}
+
+.emotion-16 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-16 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-16 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-16 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-16 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-16 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-16 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-16 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-16 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-16 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-16 .css-content-psedo:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-9 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-9 label {
+  margin-top: 0em;
+}
+
+.emotion-9 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-9 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-9 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-9 .t--opt {
+  color: #58585b !important;
+}
+
+.emotion-12 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-12 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-12 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-12 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-12 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-12 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-12 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-12 .css-content-psedo:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-8 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-8 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-8 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-8 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-8 .css-content-psedo:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+<div
+  className="emotion-16"
+>
+  <h1
+    className="emotion-0"
+  >
+    Marriage
+    <div
+      className="notice"
+    />
+  </h1>
+  <div
+    className="emotion-3"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        aria-labelledby="partnerA_bloodRelation-groupLabel"
+        className="radio-group__label"
+        role="group"
+      >
+        <div
+          className="txt-l"
+          id="partnerA_bloodRelation-groupLabel"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Are you related by blood or marriage to your future spouse?
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "paddingLeft": "0.25em",
+              }
+            }
+          >
+            Required
+          </span>
+          <span
+            className="tool-tip__wrapper emotion-1"
+          >
+            <div
+              className="icon"
+            />
+            <div
+              className="msg"
+            >
+              This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+            </div>
+          </span>
+        </div>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={false}
+            className="ra-f"
+            name="partnerA_bloodRelation"
+            onChange={[Function]}
+            type="radio"
+            value="1"
+          />
+          <span
+            className="ra-l"
+          >
+            Yes
+          </span>
+        </label>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={false}
+            className="ra-f"
+            name="partnerA_bloodRelation"
+            onChange={[Function]}
+            type="radio"
+            value="0"
+          />
+          <span
+            className="ra-l"
+          >
+            No
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-3"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        aria-labelledby="partnerA_marriedBefore-groupLabel"
+        className="radio-group__label"
+        role="group"
+      >
+        <div
+          className="txt-l"
+          id="partnerA_marriedBefore-groupLabel"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Have you ever been married before?
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "paddingLeft": "0.25em",
+              }
+            }
+          >
+            Required
+          </span>
+        </div>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={false}
+            className="ra-f"
+            name="partnerA_marriedBefore"
+            onChange={[Function]}
+            type="radio"
+            value="1"
+          />
+          <span
+            className="ra-l"
+          >
+            Yes
+          </span>
+        </label>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={false}
+            className="ra-f"
+            name="partnerA_marriedBefore"
+            onChange={[Function]}
+            type="radio"
+            value="0"
+          />
+          <span
+            className="ra-l"
+          >
+            No
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-9"
+  >
+    <div
+      className="emotion-8"
+    >
+      <div
+        className="emotion-3"
+      >
+        <div
+          className="emotion-2"
+        >
+          <div
+            aria-labelledby="partnerA_lastMarriageStatus-groupLabel"
+            className="radio-group__label"
+            role="group"
+          >
+            <div
+              className="txt-l"
+              id="partnerA_lastMarriageStatus-groupLabel"
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
+            >
+              If Applicable, Status of Last Marriage
+              <span
+                className="t--req"
+                style={
+                  Object {
+                    "display": "flex",
+                    "paddingLeft": "0.25em",
+                  }
+                }
+              >
+                Required
+              </span>
+            </div>
+            <label
+              className="ra  "
+            >
+              <input
+                checked={false}
+                className="ra-f"
+                name="partnerA_lastMarriageStatus"
+                onChange={[Function]}
+                type="radio"
+                value="N/A"
+              />
+              <span
+                className="ra-l"
+              >
+                Does Not Apply
+              </span>
+            </label>
+            <label
+              className="ra  "
+            >
+              <input
+                checked={true}
+                className="ra-f"
+                name="partnerA_lastMarriageStatus"
+                onChange={[Function]}
+                type="radio"
+                value="WID"
+              />
+              <span
+                className="ra-l"
+              >
+                Widowed
+              </span>
+            </label>
+            <label
+              className="ra  "
+            >
+              <input
+                checked={false}
+                className="ra-f"
+                name="partnerA_lastMarriageStatus"
+                onChange={[Function]}
+                type="radio"
+                value="DIV"
+              />
+              <span
+                className="ra-l"
+              >
+                Divorce
+              </span>
+            </label>
+            <label
+              className="ra  "
+            >
+              <input
+                checked={false}
+                className="ra-f"
+                name="partnerA_lastMarriageStatus"
+                onChange={[Function]}
+                type="radio"
+                value="CRT"
+              />
+              <span
+                className="ra-l"
+              >
+                Void or annulled by court order
+              </span>
+            </label>
+            <label
+              className="ra  "
+            >
+              <input
+                checked={false}
+                className="ra-f"
+                name="partnerA_lastMarriageStatus"
+                onChange={[Function]}
+                type="radio"
+                value="207"
+              />
+              <span
+                className="ra-l"
+              >
+                Void, under former GL c.207/§11 or by operation of law at time of marriage
+              </span>
+            </label>
+          </div>
+          <label
+            className="notice"
+          >
+            If void, please provide clerk with evidence.
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-9"
+  >
+    <div
+      className="emotion-12"
+    >
+      <div
+        className="emotion-3"
+      >
+        <div
+          aria-labelledby="partnerA_partnershipType-groupLabel"
+          className="radio-group__label"
+          role="group"
+        >
+          <div
+            className="txt-l"
+            id="partnerA_partnershipType-groupLabel"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            Were you ever a member of a civil union or domestic partnership?
+            <span
+              className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "paddingLeft": "0.25em",
+                }
+              }
+            >
+              Required
+            </span>
+            <span
+              className="tool-tip__wrapper emotion-1"
+            >
+              <div
+                className="icon"
+              />
+              <div
+                className="msg"
+              >
+                This information is collected as required by the Massachusetts State Marriage Intention Form.
+              </div>
+            </span>
+          </div>
+          <label
+            className="ra  "
+          >
+            <input
+              checked={true}
+              className="ra-f"
+              name="partnerA_partnershipType"
+              onChange={[Function]}
+              type="radio"
+              value="CIV"
+            />
+            <span
+              className="ra-l"
+            >
+              Yes, a civil union
+            </span>
+          </label>
+          <label
+            className="ra  "
+          >
+            <input
+              checked={false}
+              className="ra-f"
+              name="partnerA_partnershipType"
+              onChange={[Function]}
+              type="radio"
+              value="DOM"
+            />
+            <span
+              className="ra-l"
+            >
+              Yes, a domestic partnership
+            </span>
+          </label>
+          <label
+            className="ra  "
+          >
+            <input
+              checked={false}
+              className="ra-f"
+              name="partnerA_partnershipType"
+              onChange={[Function]}
+              type="radio"
+              value="N/A"
+            />
+            <span
+              className="ra-l"
+            >
+              No
+            </span>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      className="emotion-12"
+    >
+      <div
+        className="emotion-3"
+      >
+        <div
+          aria-labelledby="partnerA_partnershipTypeDissolved-groupLabel"
+          className="radio-group__label"
+          role="group"
+        >
+          <div
+            className="txt-l"
+            id="partnerA_partnershipTypeDissolved-groupLabel"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            Civil Union Or Domestic Partnership: Dissolved
+            <span
+              className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                  "paddingLeft": "0.25em",
+                }
+              }
+            >
+              Required
+            </span>
+          </div>
+          <label
+            className="ra  "
+          >
+            <input
+              checked={false}
+              className="ra-f"
+              name="partnerA_partnershipTypeDissolved"
+              onChange={[Function]}
+              type="radio"
+              value="N/A"
+            />
+            <span
+              className="ra-l"
+            >
+              Does Not Apply
+            </span>
+          </label>
+          <label
+            className="ra  "
+          >
+            <input
+              checked={true}
+              className="ra-f"
+              name="partnerA_partnershipTypeDissolved"
+              onChange={[Function]}
+              type="radio"
+              value="Yes"
+            />
+            <span
+              className="ra-l"
+            >
+              Yes
+            </span>
+          </label>
+          <label
+            className="ra  "
+          >
+            <input
+              checked={false}
+              className="ra-f"
+              name="partnerA_partnershipTypeDissolved"
+              onChange={[Function]}
+              type="radio"
+              value="No"
+            />
+            <span
+              className="ra-l"
+            >
+              No
+            </span>
+          </label>
+        </div>
+      </div>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-234553913"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
+            style={
+              Object {
+                "display": "flex",
+                "marginRight": "0.5em",
+              }
+            }
+          >
+            Partnership State/Country
+          </span>
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-234553913"
+          maxLength={100}
+          name="partnerA_partnershipState"
+          onChange={[Function]}
+          type="text"
+          value="MA"
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
+        >
+           
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fields, no surname 1`] = `
+.emotion-8 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 1.5em;
+}
+
+.emotion-8 label {
+  margin-top: 0em;
+}
+
+.emotion-8 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-8 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-8 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-8 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-8 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-8 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-8 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-8 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-8 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-8 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-4 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-4 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-4 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-4 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-4 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-3 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-2 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-2 .icon::before {
+  content: '?';
+}
+
+.emotion-2 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-2 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-2 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-2 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-6 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-6 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-6 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-6 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-6 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-6 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-6 .sel-c {
+  display: block;
+}
+
+.css-1btkjiq .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-lbsctu .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-3y8lfr .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-sifr7p .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-zx7u86 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+<div
+  className="emotion-8"
+>
+  <h1
+    className="emotion-0"
+  >
+    Personal Information
+    <div
+      className="notice"
+    >
+      Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
+    </div>
+  </h1>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2048906072"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        First Name
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-2048906072"
+      maxLength={100}
+      name="partner1_firstName"
+      onChange={[Function]}
+      type="text"
+      value="Peter"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2852212527"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        Middle Name
+      </span>
+    </label>
+    <label
+      className="notice emotion-1"
+    >
+      Please enter your middle name if you have one. You cannot list a new middle name.
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-2852212527"
+      maxLength={50}
+      name="partner1_middleName"
+      onChange={[Function]}
+      type="text"
+      value="Neverland"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-1103291528"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        Last Name
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-1103291528"
+      maxLength={100}
+      name="partner1_lastName"
+      onChange={[Function]}
+      type="text"
+      value="Pan"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div
+    className="emotion-4"
+  >
+    <div
+      className="emotion-3"
+    >
+      <div
+        aria-labelledby="partner1_useSurname-groupLabel"
+        className="radio-group__label"
+        role="group"
+      >
+        <div
+          className="txt-l"
+          id="partner1_useSurname-groupLabel"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Would you like to change your last name?
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "paddingLeft": "0.25em",
+              }
+            }
+          >
+            Required
+          </span>
+          <span
+            className="tool-tip__wrapper emotion-2"
+          >
+            <div
+              className="icon"
+            />
+            <div
+              className="msg"
+            >
+              Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+            </div>
+          </span>
+        </div>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={false}
+            className="ra-f"
+            name="partner1_useSurname"
+            onChange={[Function]}
+            type="radio"
+            value="1"
+          />
+          <span
+            className="ra-l"
+          >
+            Yes
+          </span>
+        </label>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={true}
+            className="ra-f"
+            name="partner1_useSurname"
+            onChange={[Function]}
+            type="radio"
+            value="0"
+          />
+          <span
+            className="ra-l"
+          >
+            No
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-6"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="select-2202529938"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+              "whiteSpace": "nowrap",
+            }
+          }
+        >
+          Suffix
+        </span>
+        <span
+          className="t--req t--opt"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Optional
+        </span>
+      </label>
+      <label
+        className="notice emotion-1"
+      >
+        Please select your suffix if you have one.
+      </label>
+      <div
+        className="sel-c  "
+      >
+        <select
+          aria-label=""
+          className="sel-f  "
+          id="select-2202529938"
+          name="partner1_suffix"
+          onChange={[Function]}
+          value=""
+        >
+          <option />
+          <option
+            value="I"
+          >
+            I
+          </option>
+          <option
+            value="II"
+          >
+            II
+          </option>
+          <option
+            value="III"
+          >
+            III
+          </option>
+          <option
+            value="IV"
+          >
+            IV
+          </option>
+          <option
+            value="V"
+          >
+            V
+          </option>
+          <option
+            value="VI"
+          >
+            VI
+          </option>
+          <option
+            value="Jr."
+          >
+            Jr.
+          </option>
+          <option
+            value="Sr."
+          >
+            Sr.
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2786084594"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        Occupation
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+        <span
+          className="tool-tip__wrapper emotion-2"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            This information is collected as required by the Massachusetts State Marriage Intention Form.
+          </div>
+        </span>
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-2786084594"
+      maxLength={100}
+      name="partner1_occupation"
+      onChange={[Function]}
+      type="text"
+      value="Deveveloper"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fields, w/surname 1`] = `
+.emotion-11 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 1.5em;
+}
+
+.emotion-11 label {
+  margin-top: 0em;
+}
+
+.emotion-11 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-11 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-11 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-11 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-11 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-11 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-11 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-11 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-11 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-4 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-4 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-4 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-4 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-4 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-3 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-2 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-2 .icon::before {
+  content: '?';
+}
+
+.emotion-2 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-2 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-2 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-2 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-9 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-9 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-9 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-9 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-9 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-9 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-9 .sel-c {
+  display: block;
+}
+
+.css-1btkjiq .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-lbsctu .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-3y8lfr .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-sifr7p .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-zx7u86 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-7 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-7 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-7 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-7 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-7 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-7 .sel-c {
+  display: block;
+}
+
+<div
+  className="emotion-11"
+>
+  <h1
+    className="emotion-0"
+  >
+    Personal Information
+    <div
+      className="notice"
+    >
+      Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
+    </div>
+  </h1>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2048906072"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        First Name
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-2048906072"
+      maxLength={100}
+      name="partner1_firstName"
+      onChange={[Function]}
+      type="text"
+      value="Peter"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2852212527"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        Middle Name
+      </span>
+    </label>
+    <label
+      className="notice emotion-1"
+    >
+      Please enter your middle name if you have one. You cannot list a new middle name.
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-2852212527"
+      maxLength={50}
+      name="partner1_middleName"
+      onChange={[Function]}
+      type="text"
+      value="Neverland"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-1103291528"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        Last Name
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-1103291528"
+      maxLength={100}
+      name="partner1_lastName"
+      onChange={[Function]}
+      type="text"
+      value="Pan"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div
+    className="emotion-4"
+  >
+    <div
+      className="emotion-3"
+    >
+      <div
+        aria-labelledby="partner1_useSurname-groupLabel"
+        className="radio-group__label"
+        role="group"
+      >
+        <div
+          className="txt-l"
+          id="partner1_useSurname-groupLabel"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Would you like to change your last name?
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "paddingLeft": "0.25em",
+              }
+            }
+          >
+            Required
+          </span>
+          <span
+            className="tool-tip__wrapper emotion-2"
+          >
+            <div
+              className="icon"
+            />
+            <div
+              className="msg"
+            >
+              Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+            </div>
+          </span>
+        </div>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={true}
+            className="ra-f"
+            name="partner1_useSurname"
+            onChange={[Function]}
+            type="radio"
+            value="1"
+          />
+          <span
+            className="ra-l"
+          >
+            Yes
+          </span>
+        </label>
+        <label
+          className="ra  "
+        >
+          <input
+            checked={false}
+            className="ra-f"
+            name="partner1_useSurname"
+            onChange={[Function]}
+            type="radio"
+            value="0"
+          />
+          <span
+            className="ra-l"
+          >
+            No
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-7"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="input-546901997"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+            }
+          }
+        >
+          New Last Name to be Used After Marriage
+        </span>
+        <span
+          aria-hidden="true"
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+              "flexGrow": 1,
+            }
+          }
+        >
+          Required
+          <span
+            className="tool-tip__wrapper emotion-2"
+          >
+            <div
+              className="icon"
+            />
+            <div
+              className="msg"
+            >
+              Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+            </div>
+          </span>
+        </span>
+      </label>
+      <label
+        className="notice emotion-1"
+      >
+        You can keep your current last name or use a new last name.
+      </label>
+      <input
+        aria-label=""
+        className="txt-f  "
+        id="input-546901997"
+        maxLength={50}
+        name="partner1_surName"
+        onChange={[Function]}
+        type="text"
+        value="Neverland"
+      />
+      <div
+        className="t--subinfo t--err m-b100 m-t100"
+      >
+         
+      </div>
+    </div>
+  </div>
+  <div
+    className="emotion-9"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="select-2202529938"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+              "whiteSpace": "nowrap",
+            }
+          }
+        >
+          Suffix
+        </span>
+        <span
+          className="t--req t--opt"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Optional
+        </span>
+      </label>
+      <label
+        className="notice emotion-1"
+      >
+        Please select your suffix if you have one.
+      </label>
+      <div
+        className="sel-c  "
+      >
+        <select
+          aria-label=""
+          className="sel-f  "
+          id="select-2202529938"
+          name="partner1_suffix"
+          onChange={[Function]}
+          value=""
+        >
+          <option />
+          <option
+            value="I"
+          >
+            I
+          </option>
+          <option
+            value="II"
+          >
+            II
+          </option>
+          <option
+            value="III"
+          >
+            III
+          </option>
+          <option
+            value="IV"
+          >
+            IV
+          </option>
+          <option
+            value="V"
+          >
+            V
+          </option>
+          <option
+            value="VI"
+          >
+            VI
+          </option>
+          <option
+            value="Jr."
+          >
+            Jr.
+          </option>
+          <option
+            value="Sr."
+          >
+            Sr.
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2786084594"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+          }
+        }
+      >
+        Occupation
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+        <span
+          className="tool-tip__wrapper emotion-2"
+        >
+          <div
+            className="icon"
+          />
+          <div
+            className="msg"
+          >
+            This information is collected as required by the Massachusetts State Marriage Intention Form.
+          </div>
+        </span>
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      id="input-2786084594"
+      maxLength={100}
+      name="partner1_occupation"
+      onChange={[Function]}
+      type="text"
+      value="Deveveloper"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende, City Hall 1`] = `
+.css-1d92czb .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-1 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-1 .icon::before {
+  content: '?';
+}
+
+.emotion-1 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-1 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-1 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-1 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-2 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-2 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-2 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-2 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-2 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-2 .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-2 .sel-c {
+  display: block;
+}
+
+.css-1btkjiq .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-7 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-7 label {
+  margin-top: 0em;
+}
+
+.emotion-7 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-7 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-7 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-7 .t--opt {
+  color: #58585b !important;
+}
+
+.emotion-6 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-6 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-6 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-6 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-6 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-6 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-6 .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-3y8lfr .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-sifr7p .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-zx7u86 .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-17tc7bx .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-3 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-3 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-3 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-3 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-3 .sel-c {
+  display: block;
+}
+
+<div
+  className="emotion-7"
+>
+  <h1
+    className="emotion-0"
+  >
+    Residence
+    <div
+      className="notice"
+    >
+      Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+    </div>
+  </h1>
+  <div
+    className="emotion-6"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="select-3475791712"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
+            style={
+              Object {
+                "display": "flex",
+                "marginRight": "0.5em",
+              }
+            }
+          >
+            Country of Residence
+          </span>
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            Required
+            <span
+              className="tool-tip__wrapper emotion-1"
+            >
+              <div
+                className="icon"
+              />
+              <div
+                className="msg"
+              >
+                If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+              </div>
+            </span>
+          </span>
+        </label>
+        <div
+          className="sel-c  "
+        >
+          <select
+            aria-label=""
+            className="sel-f  "
+            id="select-3475791712"
+            name="partnerA_residenceCountry"
+            onChange={[Function]}
+            value="USA"
+          >
+            <option />
+            <option
+              value="USA"
+            >
+              United States of America
+            </option>
+            <option
+              value="VIR"
+            >
+              United States Virgin Islands
+            </option>
+            <option
+              value="AFG"
+            >
+              Afghanistan
+            </option>
+            <option
+              value="ALA"
+            >
+              Åland Islands
+            </option>
+            <option
+              value="ALB"
+            >
+              Albania
+            </option>
+            <option
+              value="DZA"
+            >
+              Algeria
+            </option>
+            <option
+              value="ASM"
+            >
+              American Samoa
+            </option>
+            <option
+              value="AND"
+            >
+              Andorra
+            </option>
+            <option
+              value="AGO"
+            >
+              Angola
+            </option>
+            <option
+              value="AIA"
+            >
+              Anguilla
+            </option>
+            <option
+              value="ATG"
+            >
+              Antigua and Barbuda
+            </option>
+            <option
+              value="ARG"
+            >
+              Argentina
+            </option>
+            <option
+              value="ARM"
+            >
+              Armenia
+            </option>
+            <option
+              value="ABW"
+            >
+              Aruba
+            </option>
+            <option
+              value="AUS"
+            >
+              Australia
+            </option>
+            <option
+              value="AUT"
+            >
+              Austria
+            </option>
+            <option
+              value="AZE"
+            >
+              Azerbaijan
+            </option>
+            <option
+              value="BHS"
+            >
+              Bahamas
+            </option>
+            <option
+              value="BHR"
+            >
+              Bahrain
+            </option>
+            <option
+              value="BGD"
+            >
+              Bangladesh
+            </option>
+            <option
+              value="BRB"
+            >
+              Barbados
+            </option>
+            <option
+              value="BLR"
+            >
+              Belarus
+            </option>
+            <option
+              value="BEL"
+            >
+              Belgium
+            </option>
+            <option
+              value="BLZ"
+            >
+              Belize
+            </option>
+            <option
+              value="BEN"
+            >
+              Benin
+            </option>
+            <option
+              value="BMU"
+            >
+              Bermuda
+            </option>
+            <option
+              value="BTN"
+            >
+              Bhutan
+            </option>
+            <option
+              value="BOL"
+            >
+              Bolivia (Plurinational State of)
+            </option>
+            <option
+              value="BES"
+            >
+              Bonaire, Saint Eustatius and Saba
+            </option>
+            <option
+              value="BIH"
+            >
+              Bosnia and Herzegovina
+            </option>
+            <option
+              value="BWA"
+            >
+              Botswana
+            </option>
+            <option
+              value="BRA"
+            >
+              Brazil
+            </option>
+            <option
+              value="VGB"
+            >
+              British Virgin Islands
+            </option>
+            <option
+              value="BRN"
+            >
+              Brunei Darussalam
+            </option>
+            <option
+              value="BGR"
+            >
+              Bulgaria
+            </option>
+            <option
+              value="BFA"
+            >
+              Burkina Faso
+            </option>
+            <option
+              value="BDI"
+            >
+              Burundi
+            </option>
+            <option
+              value="CPV"
+            >
+              Cabo Verde
+            </option>
+            <option
+              value="KHM"
+            >
+              Cambodia
+            </option>
+            <option
+              value="CMR"
+            >
+              Cameroon
+            </option>
+            <option
+              value="CAN"
+            >
+              Canada
+            </option>
+            <option
+              value="CYM"
+            >
+              Cayman Islands
+            </option>
+            <option
+              value="CAF"
+            >
+              Central African Republic
+            </option>
+            <option
+              value="TCD"
+            >
+              Chad
+            </option>
+            <option
+              value="CHL"
+            >
+              Chile
+            </option>
+            <option
+              value="CHN"
+            >
+              China
+            </option>
+            <option
+              value="HKG"
+            >
+              China, Hong Kong Special Administrative Region
+            </option>
+            <option
+              value="MAC"
+            >
+              China, Macao Special Administrative Region
+            </option>
+            <option
+              value="COL"
+            >
+              Colombia
+            </option>
+            <option
+              value="COM"
+            >
+              Comoros
+            </option>
+            <option
+              value="COG"
+            >
+              Congo
+            </option>
+            <option
+              value="COK"
+            >
+              Cook Islands
+            </option>
+            <option
+              value="CRI"
+            >
+              Costa Rica
+            </option>
+            <option
+              value="CIV"
+            >
+              Côte d'Ivoire
+            </option>
+            <option
+              value="HRV"
+            >
+              Croatia
+            </option>
+            <option
+              value="CUB"
+            >
+              Cuba
+            </option>
+            <option
+              value="CUW"
+            >
+              Curaçao
+            </option>
+            <option
+              value="CYP"
+            >
+              Cyprus
+            </option>
+            <option
+              value="CZE"
+            >
+              Czech Republic
+            </option>
+            <option
+              value="PRK"
+            >
+              Democratic People's Republic of Korea
+            </option>
+            <option
+              value="COD"
+            >
+              Democratic Republic of the Congo
+            </option>
+            <option
+              value="DNK"
+            >
+              Denmark
+            </option>
+            <option
+              value="DJI"
+            >
+              Djibouti
+            </option>
+            <option
+              value="DMA"
+            >
+              Dominica
+            </option>
+            <option
+              value="DOM"
+            >
+              Dominican Republic
+            </option>
+            <option
+              value="ECU"
+            >
+              Ecuador
+            </option>
+            <option
+              value="EGY"
+            >
+              Egypt
+            </option>
+            <option
+              value="SLV"
+            >
+              El Salvador
+            </option>
+            <option
+              value="GNQ"
+            >
+              Equatorial Guinea
+            </option>
+            <option
+              value="ERI"
+            >
+              Eritrea
+            </option>
+            <option
+              value="EST"
+            >
+              Estonia
+            </option>
+            <option
+              value="ETH"
+            >
+              Ethiopia
+            </option>
+            <option
+              value="FRO"
+            >
+              Faeroe Islands
+            </option>
+            <option
+              value="FLK"
+            >
+              Falkland Islands (Malvinas)
+            </option>
+            <option
+              value="FJI"
+            >
+              Fiji
+            </option>
+            <option
+              value="FIN"
+            >
+              Finland
+            </option>
+            <option
+              value="FRA"
+            >
+              France
+            </option>
+            <option
+              value="GUF"
+            >
+              French Guiana
+            </option>
+            <option
+              value="PYF"
+            >
+              French Polynesia
+            </option>
+            <option
+              value="GAB"
+            >
+              Gabon
+            </option>
+            <option
+              value="GMB"
+            >
+              Gambia
+            </option>
+            <option
+              value="GEO"
+            >
+              Georgia
+            </option>
+            <option
+              value="DEU"
+            >
+              Germany
+            </option>
+            <option
+              value="GHA"
+            >
+              Ghana
+            </option>
+            <option
+              value="GIB"
+            >
+              Gibraltar
+            </option>
+            <option
+              value="GRC"
+            >
+              Greece
+            </option>
+            <option
+              value="GRL"
+            >
+              Greenland
+            </option>
+            <option
+              value="GRD"
+            >
+              Grenada
+            </option>
+            <option
+              value="GLP"
+            >
+              Guadeloupe
+            </option>
+            <option
+              value="GUM"
+            >
+              Guam
+            </option>
+            <option
+              value="GTM"
+            >
+              Guatemala
+            </option>
+            <option
+              value="GGY"
+            >
+              Guernsey
+            </option>
+            <option
+              value="GIN"
+            >
+              Guinea
+            </option>
+            <option
+              value="GNB"
+            >
+              Guinea-Bissau
+            </option>
+            <option
+              value="GUY"
+            >
+              Guyana
+            </option>
+            <option
+              value="HTI"
+            >
+              Haiti
+            </option>
+            <option
+              value="VAT"
+            >
+              Holy See
+            </option>
+            <option
+              value="HND"
+            >
+              Honduras
+            </option>
+            <option
+              value="HUN"
+            >
+              Hungary
+            </option>
+            <option
+              value="ISL"
+            >
+              Iceland
+            </option>
+            <option
+              value="IND"
+            >
+              India
+            </option>
+            <option
+              value="IDN"
+            >
+              Indonesia
+            </option>
+            <option
+              value="IRN"
+            >
+              Iran (Islamic Republic of)
+            </option>
+            <option
+              value="IRQ"
+            >
+              Iraq
+            </option>
+            <option
+              value="IRL"
+            >
+              Ireland
+            </option>
+            <option
+              value="IMN"
+            >
+              Isle of Man
+            </option>
+            <option
+              value="ISR"
+            >
+              Israel
+            </option>
+            <option
+              value="ITA"
+            >
+              Italy
+            </option>
+            <option
+              value="JAM"
+            >
+              Jamaica
+            </option>
+            <option
+              value="JPN"
+            >
+              Japan
+            </option>
+            <option
+              value="JEY"
+            >
+              Jersey
+            </option>
+            <option
+              value="JOR"
+            >
+              Jordan
+            </option>
+            <option
+              value="KAZ"
+            >
+              Kazakhstan
+            </option>
+            <option
+              value="KEN"
+            >
+              Kenya
+            </option>
+            <option
+              value="KIR"
+            >
+              Kiribati
+            </option>
+            <option
+              value="KWT"
+            >
+              Kuwait
+            </option>
+            <option
+              value="KGZ"
+            >
+              Kyrgyzstan
+            </option>
+            <option
+              value="LAO"
+            >
+              Lao People's Democratic Republic
+            </option>
+            <option
+              value="LVA"
+            >
+              Latvia
+            </option>
+            <option
+              value="LBN"
+            >
+              Lebanon
+            </option>
+            <option
+              value="LSO"
+            >
+              Lesotho
+            </option>
+            <option
+              value="LBR"
+            >
+              Liberia
+            </option>
+            <option
+              value="LBY"
+            >
+              Libya
+            </option>
+            <option
+              value="LIE"
+            >
+              Liechtenstein
+            </option>
+            <option
+              value="LTU"
+            >
+              Lithuania
+            </option>
+            <option
+              value="LUX"
+            >
+              Luxembourg
+            </option>
+            <option
+              value="MDG"
+            >
+              Madagascar
+            </option>
+            <option
+              value="MWI"
+            >
+              Malawi
+            </option>
+            <option
+              value="MYS"
+            >
+              Malaysia
+            </option>
+            <option
+              value="MDV"
+            >
+              Maldives
+            </option>
+            <option
+              value="MLI"
+            >
+              Mali
+            </option>
+            <option
+              value="MLT"
+            >
+              Malta
+            </option>
+            <option
+              value="MHL"
+            >
+              Marshall Islands
+            </option>
+            <option
+              value="MTQ"
+            >
+              Martinique
+            </option>
+            <option
+              value="MRT"
+            >
+              Mauritania
+            </option>
+            <option
+              value="MUS"
+            >
+              Mauritius
+            </option>
+            <option
+              value="MYT"
+            >
+              Mayotte
+            </option>
+            <option
+              value="MEX"
+            >
+              Mexico
+            </option>
+            <option
+              value="FSM"
+            >
+              Micronesia (Federated States of)
+            </option>
+            <option
+              value="MCO"
+            >
+              Monaco
+            </option>
+            <option
+              value="MNG"
+            >
+              Mongolia
+            </option>
+            <option
+              value="MNE"
+            >
+              Montenegro
+            </option>
+            <option
+              value="MSR"
+            >
+              Montserrat
+            </option>
+            <option
+              value="MAR"
+            >
+              Morocco
+            </option>
+            <option
+              value="MOZ"
+            >
+              Mozambique
+            </option>
+            <option
+              value="MMR"
+            >
+              Myanmar
+            </option>
+            <option
+              value="NAM"
+            >
+              Namibia
+            </option>
+            <option
+              value="NRU"
+            >
+              Nauru
+            </option>
+            <option
+              value="NPL"
+            >
+              Nepal
+            </option>
+            <option
+              value="NLD"
+            >
+              Netherlands
+            </option>
+            <option
+              value="NCL"
+            >
+              New Caledonia
+            </option>
+            <option
+              value="NZL"
+            >
+              New Zealand
+            </option>
+            <option
+              value="NIC"
+            >
+              Nicaragua
+            </option>
+            <option
+              value="NER"
+            >
+              Niger
+            </option>
+            <option
+              value="NGA"
+            >
+              Nigeria
+            </option>
+            <option
+              value="NIU"
+            >
+              Niue
+            </option>
+            <option
+              value="NFK"
+            >
+              Norfolk Island
+            </option>
+            <option
+              value="MNP"
+            >
+              Northern Mariana Islands
+            </option>
+            <option
+              value="NOR"
+            >
+              Norway
+            </option>
+            <option
+              value="OMN"
+            >
+              Oman
+            </option>
+            <option
+              value="PAK"
+            >
+              Pakistan
+            </option>
+            <option
+              value="PLW"
+            >
+              Palau
+            </option>
+            <option
+              value="PAN"
+            >
+              Panama
+            </option>
+            <option
+              value="PNG"
+            >
+              Papua New Guinea
+            </option>
+            <option
+              value="PRY"
+            >
+              Paraguay
+            </option>
+            <option
+              value="PER"
+            >
+              Peru
+            </option>
+            <option
+              value="PHL"
+            >
+              Philippines
+            </option>
+            <option
+              value="PCN"
+            >
+              Pitcairn
+            </option>
+            <option
+              value="POL"
+            >
+              Poland
+            </option>
+            <option
+              value="PRT"
+            >
+              Portugal
+            </option>
+            <option
+              value="PRI"
+            >
+              Puerto Rico
+            </option>
+            <option
+              value="QAT"
+            >
+              Qatar
+            </option>
+            <option
+              value="KOR"
+            >
+              Republic of Korea
+            </option>
+            <option
+              value="MDA"
+            >
+              Republic of Moldova
+            </option>
+            <option
+              value="REU"
+            >
+              Réunion
+            </option>
+            <option
+              value="ROU"
+            >
+              Romania
+            </option>
+            <option
+              value="RUS"
+            >
+              Russian Federation
+            </option>
+            <option
+              value="RWA"
+            >
+              Rwanda
+            </option>
+            <option
+              value="BLM"
+            >
+              Saint-Barthélemy
+            </option>
+            <option
+              value="SHN"
+            >
+              Saint Helena
+            </option>
+            <option
+              value="KNA"
+            >
+              Saint Kitts and Nevis
+            </option>
+            <option
+              value="LCA"
+            >
+              Saint Lucia
+            </option>
+            <option
+              value="MAF"
+            >
+              Saint-Martin (French part)
+            </option>
+            <option
+              value="SPM"
+            >
+              Saint Pierre and Miquelon
+            </option>
+            <option
+              value="VCT"
+            >
+              Saint Vincent and the Grenadines
+            </option>
+            <option
+              value="WSM"
+            >
+              Samoa
+            </option>
+            <option
+              value="SMR"
+            >
+              San Marino
+            </option>
+            <option
+              value="STP"
+            >
+              Sao Tome and Principe
+            </option>
+            <option
+              value="SAU"
+            >
+              Saudi Arabia
+            </option>
+            <option
+              value="SEN"
+            >
+              Senegal
+            </option>
+            <option
+              value="SRB"
+            >
+              Serbia
+            </option>
+            <option
+              value="SYC"
+            >
+              Seychelles
+            </option>
+            <option
+              value="SLE"
+            >
+              Sierra Leone
+            </option>
+            <option
+              value="SGP"
+            >
+              Singapore
+            </option>
+            <option
+              value="SXM"
+            >
+              Sint Maarten (Dutch part)
+            </option>
+            <option
+              value="SVK"
+            >
+              Slovakia
+            </option>
+            <option
+              value="SVN"
+            >
+              Slovenia
+            </option>
+            <option
+              value="SLB"
+            >
+              Solomon Islands
+            </option>
+            <option
+              value="SOM"
+            >
+              Somalia
+            </option>
+            <option
+              value="ZAF"
+            >
+              South Africa
+            </option>
+            <option
+              value="SSD"
+            >
+              South Sudan
+            </option>
+            <option
+              value="ESP"
+            >
+              Spain
+            </option>
+            <option
+              value="LKA"
+            >
+              Sri Lanka
+            </option>
+            <option
+              value="PSE"
+            >
+              State of Palestine
+            </option>
+            <option
+              value="SDN"
+            >
+              Sudan
+            </option>
+            <option
+              value="SUR"
+            >
+              Suriname
+            </option>
+            <option
+              value="SJM"
+            >
+              Svalbard and Jan Mayen Islands
+            </option>
+            <option
+              value="SWZ"
+            >
+              Swaziland
+            </option>
+            <option
+              value="SWE"
+            >
+              Sweden
+            </option>
+            <option
+              value="CHE"
+            >
+              Switzerland
+            </option>
+            <option
+              value="SYR"
+            >
+              Syrian Arab Republic
+            </option>
+            <option
+              value="TWAN"
+            >
+              Taiwan
+            </option>
+            <option
+              value="TJK"
+            >
+              Tajikistan
+            </option>
+            <option
+              value="THA"
+            >
+              Thailand
+            </option>
+            <option
+              value="MKD"
+            >
+              The former Yugoslav Republic of Macedonia
+            </option>
+            <option
+              value="TLS"
+            >
+              Timor-Leste
+            </option>
+            <option
+              value="TGO"
+            >
+              Togo
+            </option>
+            <option
+              value="TKL"
+            >
+              Tokelau
+            </option>
+            <option
+              value="TON"
+            >
+              Tonga
+            </option>
+            <option
+              value="TTO"
+            >
+              Trinidad and Tobago
+            </option>
+            <option
+              value="TUN"
+            >
+              Tunisia
+            </option>
+            <option
+              value="TUR"
+            >
+              Turkey
+            </option>
+            <option
+              value="TKM"
+            >
+              Turkmenistan
+            </option>
+            <option
+              value="TCA"
+            >
+              Turks and Caicos Islands
+            </option>
+            <option
+              value="TUV"
+            >
+              Tuvalu
+            </option>
+            <option
+              value="UGA"
+            >
+              Uganda
+            </option>
+            <option
+              value="UKR"
+            >
+              Ukraine
+            </option>
+            <option
+              value="ARE"
+            >
+              United Arab Emirates
+            </option>
+            <option
+              value="GBR"
+            >
+              United Kingdom of Great Britain and Northern Ireland
+            </option>
+            <option
+              value="TZA"
+            >
+              United Republic of Tanzania
+            </option>
+            <option
+              value="URY"
+            >
+              Uruguay
+            </option>
+            <option
+              value="UZB"
+            >
+              Uzbekistan
+            </option>
+            <option
+              value="VUT"
+            >
+              Vanuatu
+            </option>
+            <option
+              value="VEN"
+            >
+              Venezuela (Bolivarian Republic of)
+            </option>
+            <option
+              value="VNM"
+            >
+              Vietnam
+            </option>
+            <option
+              value="WLF"
+            >
+              Wallis and Futuna Islands
+            </option>
+            <option
+              value="ESH"
+            >
+              Western Sahara
+            </option>
+            <option
+              value="YEM"
+            >
+              Yemen
+            </option>
+            <option
+              value="ZMB"
+            >
+              Zambia
+            </option>
+            <option
+              value="ZWE"
+            >
+              Zimbabwe
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        className="emotion-3"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="select-496160159"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
+                }
+              }
+            >
+              State of Residence
+            </span>
+            <span
+              className="t--req"
+              style={
+                Object {
+                  "display": "flex",
+                }
+              }
+            >
+              Required
+            </span>
+          </label>
+          <div
+            className="sel-c  "
+          >
+            <select
+              aria-label=""
+              className="sel-f  "
+              id="select-496160159"
+              name="partnerA_residenceState"
+              onChange={[Function]}
+              value="MA"
+            >
+              <option
+                value=""
+              >
+                --
+              </option>
+              <option
+                value="AL"
+              >
+                AL
+              </option>
+              <option
+                value="AK"
+              >
+                AK
+              </option>
+              <option
+                value="AZ"
+              >
+                AZ
+              </option>
+              <option
+                value="AR"
+              >
+                AR
+              </option>
+              <option
+                value="CA"
+              >
+                CA
+              </option>
+              <option
+                value="CO"
+              >
+                CO
+              </option>
+              <option
+                value="CT"
+              >
+                CT
+              </option>
+              <option
+                value="DE"
+              >
+                DE
+              </option>
+              <option
+                value="DC"
+              >
+                DC
+              </option>
+              <option
+                value="FL"
+              >
+                FL
+              </option>
+              <option
+                value="GA"
+              >
+                GA
+              </option>
+              <option
+                value="HI"
+              >
+                HI
+              </option>
+              <option
+                value="ID"
+              >
+                ID
+              </option>
+              <option
+                value="IL"
+              >
+                IL
+              </option>
+              <option
+                value="IN"
+              >
+                IN
+              </option>
+              <option
+                value="IA"
+              >
+                IA
+              </option>
+              <option
+                value="KS"
+              >
+                KS
+              </option>
+              <option
+                value="KY"
+              >
+                KY
+              </option>
+              <option
+                value="LA"
+              >
+                LA
+              </option>
+              <option
+                value="ME"
+              >
+                ME
+              </option>
+              <option
+                value="MD"
+              >
+                MD
+              </option>
+              <option
+                value="MA"
+              >
+                MA
+              </option>
+              <option
+                value="MI"
+              >
+                MI
+              </option>
+              <option
+                value="MN"
+              >
+                MN
+              </option>
+              <option
+                value="MS"
+              >
+                MS
+              </option>
+              <option
+                value="MO"
+              >
+                MO
+              </option>
+              <option
+                value="MT"
+              >
+                MT
+              </option>
+              <option
+                value="NE"
+              >
+                NE
+              </option>
+              <option
+                value="NV"
+              >
+                NV
+              </option>
+              <option
+                value="NH"
+              >
+                NH
+              </option>
+              <option
+                value="NJ"
+              >
+                NJ
+              </option>
+              <option
+                value="NM"
+              >
+                NM
+              </option>
+              <option
+                value="NY"
+              >
+                NY
+              </option>
+              <option
+                value="NC"
+              >
+                NC
+              </option>
+              <option
+                value="ND"
+              >
+                ND
+              </option>
+              <option
+                value="OH"
+              >
+                OH
+              </option>
+              <option
+                value="OK"
+              >
+                OK
+              </option>
+              <option
+                value="OR"
+              >
+                OR
+              </option>
+              <option
+                value="PA"
+              >
+                PA
+              </option>
+              <option
+                value="RI"
+              >
+                RI
+              </option>
+              <option
+                value="SC"
+              >
+                SC
+              </option>
+              <option
+                value="SD"
+              >
+                SD
+              </option>
+              <option
+                value="TN"
+              >
+                TN
+              </option>
+              <option
+                value="TX"
+              >
+                TX
+              </option>
+              <option
+                value="UT"
+              >
+                UT
+              </option>
+              <option
+                value="VT"
+              >
+                VT
+              </option>
+              <option
+                value="VA"
+              >
+                VA
+              </option>
+              <option
+                value="WA"
+              >
+                WA
+              </option>
+              <option
+                value="WV"
+              >
+                WV
+              </option>
+              <option
+                value="WI"
+              >
+                WI
+              </option>
+              <option
+                value="WY"
+              >
+                WY
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-2580217931"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
+            style={
+              Object {
+                "display": "flex",
+                "marginRight": "0.5em",
+              }
+            }
+          >
+            Residence City/Town
+          </span>
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
+          >
+            Required
+          </span>
+        </label>
+        <label
+          className="notice emotion-4"
+        >
+          For Boston residents: Please put 'Boston' as the City, do not use neighborhood names.
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-2580217931"
+          maxLength={100}
+          name="partnerA_residenceCity"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="text"
+          value="Boston"
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
+        >
+           
+        </div>
+      </div>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-770365431"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
+            style={
+              Object {
+                "display": "flex",
+                "marginRight": "0.5em",
+              }
+            }
+          >
+            Residence Address
+          </span>
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
+          >
+            Required
+          </span>
+        </label>
+        <label
+          className="notice emotion-4"
+        >
+          Please include your apartment number if that applies.
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-770365431"
+          maxLength={100}
+          name="partnerA_residenceAddress"
+          onChange={[Function]}
+          type="text"
+          value="1 City Hall Square"
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
+        >
+           
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="input-2413436367"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
+            style={
+              Object {
+                "display": "flex",
+                "marginRight": "0.5em",
+              }
+            }
+          >
+            Residence Zip Code
+          </span>
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
+          >
+            Required
+          </span>
+        </label>
+        <input
+          aria-label=""
+          className="txt-f  "
+          id="input-2413436367"
+          maxLength={10}
+          minLength={5}
+          name="partnerA_residenceZip"
+          onChange={[Function]}
+          type="text"
+          value="02201"
+        />
+        <div
+          className="t--subinfo t--err m-b100 m-t100"
+        >
+           
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-48 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-48 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-48 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-47 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-47 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-47 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-47 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
+.emotion-50 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-50 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-50 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-50 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-50 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-49 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-17 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-17 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-15 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-15 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-15 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-15 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-15 input::-ms-clear {
+  display: none;
+}
+
+.emotion-15 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-15.disabled {
+  opacity: 0.4;
+}
+
+.emotion-15.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  table-layout: fixed;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-weight: bold;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  color: '#58585B';
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0.5em;
+  color: black;
+  background: #fff;
+  width: 2%;
+  font-size: 0.85em;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed.current {
+  cursor: pointer;
+  color: #fff;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused.current {
+  color: #000;
+  cursor: pointer;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  color: #000;
+  cursor: pointer;
+  background: #b0d9ff;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
+  cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
+.emotion-51 {
+  padding: 0px;
+}
+
+.emotion-4 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  padding-bottom: 0.25em;
+}
+
+.emotion-4 h2 {
+  margin-bottom: 3.9375rem;
+}
+
+.emotion-13 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 1.5em;
+}
+
+.emotion-13 label {
+  margin-top: 0em;
+}
+
+.emotion-13 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-13 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-13 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-13 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-13 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-13 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-13 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-13 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-13 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-5 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-5 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-5 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-5 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-9 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-9 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-9 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-9 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-9 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-8 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-7 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-7 .icon::before {
+  content: '?';
+}
+
+.emotion-7 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-7 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-7 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-7 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-11 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-11 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-11 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-11 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-11 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-11 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-11 .sel-c {
+  display: block;
+}
+
+.emotion-19 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-19 label {
+  margin-top: 0em;
+}
+
+.emotion-19 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-19 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-19 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-19 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-19 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-19 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-19 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-19 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-19 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-14 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
+}
+
+.emotion-14 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-14 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-14 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-16 {
+  margin-bottom: 2.25em;
+}
+
+.emotion-24 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-24 label {
+  margin-top: 0em;
+}
+
+.emotion-24 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-24 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-24 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-24 .t--opt {
+  color: #58585b !important;
+}
+
+.emotion-23 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-23 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-23 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-23 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-23 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-23 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-23 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-23 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-33 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-33 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-33 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-33 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-33 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-33 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-33 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-33 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-36 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-36 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-36 .icon::before {
+  content: '?';
+}
+
+.emotion-36 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-36 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-36 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-36 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-45 {
+  margin-bottom: 2.5em;
+}
+
+.emotion-45 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-45 h4 {
+  font-size: 1.25rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-45 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-45 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-45 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-45 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-45 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-45 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-45 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-43 {
+  margin-top: 1em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-43 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-43 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-43 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-43 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-43 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-43 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-43 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 2 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Person 1
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-51"
+            >
+              <div
+                className="emotion-48"
+              >
+                <fieldset
+                  className=" emotion-47"
+                >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Person 
+                      1
+                    </h2>
+                  </legend>
+                  <div
+                    className="emotion-13"
+                  >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Personal Information
+                      <div
+                        className="notice"
+                      >
+                        Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
+                      </div>
+                    </h1>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2048906072"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          First Name
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2048906072"
+                        maxLength={100}
+                        name="partnerA_firstName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2852212527"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Middle Name
+                        </span>
+                      </label>
+                      <label
+                        className="notice emotion-6"
+                      >
+                        Please enter your middle name if you have one. You cannot list a new middle name.
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2852212527"
+                        maxLength={50}
+                        name="partnerA_middleName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-1103291528"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Last Name
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-1103291528"
+                        maxLength={100}
+                        name="partnerA_lastName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          aria-labelledby="partnerA_useSurname-groupLabel"
+                          className="radio-group__label"
+                          role="group"
+                        >
+                          <div
+                            className="txt-l"
+                            id="partnerA_useSurname-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Would you like to change your last name?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+                              </div>
+                            </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-11"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-2202529938"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Suffix
+                          </span>
+                          <span
+                            className="t--req t--opt"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Optional
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-6"
+                        >
+                          Please select your suffix if you have one.
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-2202529938"
+                            name="partnerA_suffix"
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="I"
+                            >
+                              I
+                            </option>
+                            <option
+                              value="II"
+                            >
+                              II
+                            </option>
+                            <option
+                              value="III"
+                            >
+                              III
+                            </option>
+                            <option
+                              value="IV"
+                            >
+                              IV
+                            </option>
+                            <option
+                              value="V"
+                            >
+                              V
+                            </option>
+                            <option
+                              value="VI"
+                            >
+                              VI
+                            </option>
+                            <option
+                              value="Jr."
+                            >
+                              Jr.
+                            </option>
+                            <option
+                              value="Sr."
+                            >
+                              Sr.
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2786084594"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Occupation
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                          <span
+                            className="tool-tip__wrapper emotion-7"
+                          >
+                            <div
+                              className="icon"
+                            />
+                            <div
+                              className="msg"
+                            >
+                              This information is collected as required by the Massachusetts State Marriage Intention Form.
+                            </div>
+                          </span>
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2786084594"
+                        maxLength={100}
+                        name="partnerA_occupation"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-19"
+                  >
+                    <h1
+                      className="emotion-14"
+                    >
+                      Date and Place of Birth
+                    </h1>
+                    <fieldset
+                      className="emotion-17"
+                    >
+                      <div
+                        className="emotion-16"
+                      >
+                        <legend
+                          style={
+                            Object {
+                              "display": "none",
+                              "width": "100%",
+                            }
+                          }
+                        >
+                          Person A Date of Birth
+                        </legend>
+                        <div
+                          className=" emotion-15"
+                        >
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-month"
+                            >
+                              Month
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-month"
+                              max="12"
+                              maxLength={2}
+                              min="1"
+                              name="month"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="MM"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-day"
+                            >
+                              Day
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-day"
+                              max="31"
+                              maxLength={2}
+                              min="1"
+                              name="day"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="DD"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-year"
+                            >
+                              Year
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-year"
+                              max={2024}
+                              maxLength={4}
+                              min="1000"
+                              name="year"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="YYYY"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </fieldset>
+                    <div
+                      className="emotion-11"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-1817836307"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Birthplace Country
+                          </span>
+                          <span
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Required
+                          </span>
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-1817836307"
+                            name="partnerA_birthCountry"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="USA"
+                            >
+                              United States of America
+                            </option>
+                            <option
+                              value="VIR"
+                            >
+                              United States Virgin Islands
+                            </option>
+                            <option
+                              value="AFG"
+                            >
+                              Afghanistan
+                            </option>
+                            <option
+                              value="ALA"
+                            >
+                              Åland Islands
+                            </option>
+                            <option
+                              value="ALB"
+                            >
+                              Albania
+                            </option>
+                            <option
+                              value="DZA"
+                            >
+                              Algeria
+                            </option>
+                            <option
+                              value="ASM"
+                            >
+                              American Samoa
+                            </option>
+                            <option
+                              value="AND"
+                            >
+                              Andorra
+                            </option>
+                            <option
+                              value="AGO"
+                            >
+                              Angola
+                            </option>
+                            <option
+                              value="AIA"
+                            >
+                              Anguilla
+                            </option>
+                            <option
+                              value="ATG"
+                            >
+                              Antigua and Barbuda
+                            </option>
+                            <option
+                              value="ARG"
+                            >
+                              Argentina
+                            </option>
+                            <option
+                              value="ARM"
+                            >
+                              Armenia
+                            </option>
+                            <option
+                              value="ABW"
+                            >
+                              Aruba
+                            </option>
+                            <option
+                              value="AUS"
+                            >
+                              Australia
+                            </option>
+                            <option
+                              value="AUT"
+                            >
+                              Austria
+                            </option>
+                            <option
+                              value="AZE"
+                            >
+                              Azerbaijan
+                            </option>
+                            <option
+                              value="BHS"
+                            >
+                              Bahamas
+                            </option>
+                            <option
+                              value="BHR"
+                            >
+                              Bahrain
+                            </option>
+                            <option
+                              value="BGD"
+                            >
+                              Bangladesh
+                            </option>
+                            <option
+                              value="BRB"
+                            >
+                              Barbados
+                            </option>
+                            <option
+                              value="BLR"
+                            >
+                              Belarus
+                            </option>
+                            <option
+                              value="BEL"
+                            >
+                              Belgium
+                            </option>
+                            <option
+                              value="BLZ"
+                            >
+                              Belize
+                            </option>
+                            <option
+                              value="BEN"
+                            >
+                              Benin
+                            </option>
+                            <option
+                              value="BMU"
+                            >
+                              Bermuda
+                            </option>
+                            <option
+                              value="BTN"
+                            >
+                              Bhutan
+                            </option>
+                            <option
+                              value="BOL"
+                            >
+                              Bolivia (Plurinational State of)
+                            </option>
+                            <option
+                              value="BES"
+                            >
+                              Bonaire, Saint Eustatius and Saba
+                            </option>
+                            <option
+                              value="BIH"
+                            >
+                              Bosnia and Herzegovina
+                            </option>
+                            <option
+                              value="BWA"
+                            >
+                              Botswana
+                            </option>
+                            <option
+                              value="BRA"
+                            >
+                              Brazil
+                            </option>
+                            <option
+                              value="VGB"
+                            >
+                              British Virgin Islands
+                            </option>
+                            <option
+                              value="BRN"
+                            >
+                              Brunei Darussalam
+                            </option>
+                            <option
+                              value="BGR"
+                            >
+                              Bulgaria
+                            </option>
+                            <option
+                              value="BFA"
+                            >
+                              Burkina Faso
+                            </option>
+                            <option
+                              value="BDI"
+                            >
+                              Burundi
+                            </option>
+                            <option
+                              value="CPV"
+                            >
+                              Cabo Verde
+                            </option>
+                            <option
+                              value="KHM"
+                            >
+                              Cambodia
+                            </option>
+                            <option
+                              value="CMR"
+                            >
+                              Cameroon
+                            </option>
+                            <option
+                              value="CAN"
+                            >
+                              Canada
+                            </option>
+                            <option
+                              value="CYM"
+                            >
+                              Cayman Islands
+                            </option>
+                            <option
+                              value="CAF"
+                            >
+                              Central African Republic
+                            </option>
+                            <option
+                              value="TCD"
+                            >
+                              Chad
+                            </option>
+                            <option
+                              value="CHL"
+                            >
+                              Chile
+                            </option>
+                            <option
+                              value="CHN"
+                            >
+                              China
+                            </option>
+                            <option
+                              value="HKG"
+                            >
+                              China, Hong Kong Special Administrative Region
+                            </option>
+                            <option
+                              value="MAC"
+                            >
+                              China, Macao Special Administrative Region
+                            </option>
+                            <option
+                              value="COL"
+                            >
+                              Colombia
+                            </option>
+                            <option
+                              value="COM"
+                            >
+                              Comoros
+                            </option>
+                            <option
+                              value="COG"
+                            >
+                              Congo
+                            </option>
+                            <option
+                              value="COK"
+                            >
+                              Cook Islands
+                            </option>
+                            <option
+                              value="CRI"
+                            >
+                              Costa Rica
+                            </option>
+                            <option
+                              value="CIV"
+                            >
+                              Côte d'Ivoire
+                            </option>
+                            <option
+                              value="HRV"
+                            >
+                              Croatia
+                            </option>
+                            <option
+                              value="CUB"
+                            >
+                              Cuba
+                            </option>
+                            <option
+                              value="CUW"
+                            >
+                              Curaçao
+                            </option>
+                            <option
+                              value="CYP"
+                            >
+                              Cyprus
+                            </option>
+                            <option
+                              value="CZE"
+                            >
+                              Czech Republic
+                            </option>
+                            <option
+                              value="PRK"
+                            >
+                              Democratic People's Republic of Korea
+                            </option>
+                            <option
+                              value="COD"
+                            >
+                              Democratic Republic of the Congo
+                            </option>
+                            <option
+                              value="DNK"
+                            >
+                              Denmark
+                            </option>
+                            <option
+                              value="DJI"
+                            >
+                              Djibouti
+                            </option>
+                            <option
+                              value="DMA"
+                            >
+                              Dominica
+                            </option>
+                            <option
+                              value="DOM"
+                            >
+                              Dominican Republic
+                            </option>
+                            <option
+                              value="ECU"
+                            >
+                              Ecuador
+                            </option>
+                            <option
+                              value="EGY"
+                            >
+                              Egypt
+                            </option>
+                            <option
+                              value="SLV"
+                            >
+                              El Salvador
+                            </option>
+                            <option
+                              value="GNQ"
+                            >
+                              Equatorial Guinea
+                            </option>
+                            <option
+                              value="ERI"
+                            >
+                              Eritrea
+                            </option>
+                            <option
+                              value="EST"
+                            >
+                              Estonia
+                            </option>
+                            <option
+                              value="ETH"
+                            >
+                              Ethiopia
+                            </option>
+                            <option
+                              value="FRO"
+                            >
+                              Faeroe Islands
+                            </option>
+                            <option
+                              value="FLK"
+                            >
+                              Falkland Islands (Malvinas)
+                            </option>
+                            <option
+                              value="FJI"
+                            >
+                              Fiji
+                            </option>
+                            <option
+                              value="FIN"
+                            >
+                              Finland
+                            </option>
+                            <option
+                              value="FRA"
+                            >
+                              France
+                            </option>
+                            <option
+                              value="GUF"
+                            >
+                              French Guiana
+                            </option>
+                            <option
+                              value="PYF"
+                            >
+                              French Polynesia
+                            </option>
+                            <option
+                              value="GAB"
+                            >
+                              Gabon
+                            </option>
+                            <option
+                              value="GMB"
+                            >
+                              Gambia
+                            </option>
+                            <option
+                              value="GEO"
+                            >
+                              Georgia
+                            </option>
+                            <option
+                              value="DEU"
+                            >
+                              Germany
+                            </option>
+                            <option
+                              value="GHA"
+                            >
+                              Ghana
+                            </option>
+                            <option
+                              value="GIB"
+                            >
+                              Gibraltar
+                            </option>
+                            <option
+                              value="GRC"
+                            >
+                              Greece
+                            </option>
+                            <option
+                              value="GRL"
+                            >
+                              Greenland
+                            </option>
+                            <option
+                              value="GRD"
+                            >
+                              Grenada
+                            </option>
+                            <option
+                              value="GLP"
+                            >
+                              Guadeloupe
+                            </option>
+                            <option
+                              value="GUM"
+                            >
+                              Guam
+                            </option>
+                            <option
+                              value="GTM"
+                            >
+                              Guatemala
+                            </option>
+                            <option
+                              value="GGY"
+                            >
+                              Guernsey
+                            </option>
+                            <option
+                              value="GIN"
+                            >
+                              Guinea
+                            </option>
+                            <option
+                              value="GNB"
+                            >
+                              Guinea-Bissau
+                            </option>
+                            <option
+                              value="GUY"
+                            >
+                              Guyana
+                            </option>
+                            <option
+                              value="HTI"
+                            >
+                              Haiti
+                            </option>
+                            <option
+                              value="VAT"
+                            >
+                              Holy See
+                            </option>
+                            <option
+                              value="HND"
+                            >
+                              Honduras
+                            </option>
+                            <option
+                              value="HUN"
+                            >
+                              Hungary
+                            </option>
+                            <option
+                              value="ISL"
+                            >
+                              Iceland
+                            </option>
+                            <option
+                              value="IND"
+                            >
+                              India
+                            </option>
+                            <option
+                              value="IDN"
+                            >
+                              Indonesia
+                            </option>
+                            <option
+                              value="IRN"
+                            >
+                              Iran (Islamic Republic of)
+                            </option>
+                            <option
+                              value="IRQ"
+                            >
+                              Iraq
+                            </option>
+                            <option
+                              value="IRL"
+                            >
+                              Ireland
+                            </option>
+                            <option
+                              value="IMN"
+                            >
+                              Isle of Man
+                            </option>
+                            <option
+                              value="ISR"
+                            >
+                              Israel
+                            </option>
+                            <option
+                              value="ITA"
+                            >
+                              Italy
+                            </option>
+                            <option
+                              value="JAM"
+                            >
+                              Jamaica
+                            </option>
+                            <option
+                              value="JPN"
+                            >
+                              Japan
+                            </option>
+                            <option
+                              value="JEY"
+                            >
+                              Jersey
+                            </option>
+                            <option
+                              value="JOR"
+                            >
+                              Jordan
+                            </option>
+                            <option
+                              value="KAZ"
+                            >
+                              Kazakhstan
+                            </option>
+                            <option
+                              value="KEN"
+                            >
+                              Kenya
+                            </option>
+                            <option
+                              value="KIR"
+                            >
+                              Kiribati
+                            </option>
+                            <option
+                              value="KWT"
+                            >
+                              Kuwait
+                            </option>
+                            <option
+                              value="KGZ"
+                            >
+                              Kyrgyzstan
+                            </option>
+                            <option
+                              value="LAO"
+                            >
+                              Lao People's Democratic Republic
+                            </option>
+                            <option
+                              value="LVA"
+                            >
+                              Latvia
+                            </option>
+                            <option
+                              value="LBN"
+                            >
+                              Lebanon
+                            </option>
+                            <option
+                              value="LSO"
+                            >
+                              Lesotho
+                            </option>
+                            <option
+                              value="LBR"
+                            >
+                              Liberia
+                            </option>
+                            <option
+                              value="LBY"
+                            >
+                              Libya
+                            </option>
+                            <option
+                              value="LIE"
+                            >
+                              Liechtenstein
+                            </option>
+                            <option
+                              value="LTU"
+                            >
+                              Lithuania
+                            </option>
+                            <option
+                              value="LUX"
+                            >
+                              Luxembourg
+                            </option>
+                            <option
+                              value="MDG"
+                            >
+                              Madagascar
+                            </option>
+                            <option
+                              value="MWI"
+                            >
+                              Malawi
+                            </option>
+                            <option
+                              value="MYS"
+                            >
+                              Malaysia
+                            </option>
+                            <option
+                              value="MDV"
+                            >
+                              Maldives
+                            </option>
+                            <option
+                              value="MLI"
+                            >
+                              Mali
+                            </option>
+                            <option
+                              value="MLT"
+                            >
+                              Malta
+                            </option>
+                            <option
+                              value="MHL"
+                            >
+                              Marshall Islands
+                            </option>
+                            <option
+                              value="MTQ"
+                            >
+                              Martinique
+                            </option>
+                            <option
+                              value="MRT"
+                            >
+                              Mauritania
+                            </option>
+                            <option
+                              value="MUS"
+                            >
+                              Mauritius
+                            </option>
+                            <option
+                              value="MYT"
+                            >
+                              Mayotte
+                            </option>
+                            <option
+                              value="MEX"
+                            >
+                              Mexico
+                            </option>
+                            <option
+                              value="FSM"
+                            >
+                              Micronesia (Federated States of)
+                            </option>
+                            <option
+                              value="MCO"
+                            >
+                              Monaco
+                            </option>
+                            <option
+                              value="MNG"
+                            >
+                              Mongolia
+                            </option>
+                            <option
+                              value="MNE"
+                            >
+                              Montenegro
+                            </option>
+                            <option
+                              value="MSR"
+                            >
+                              Montserrat
+                            </option>
+                            <option
+                              value="MAR"
+                            >
+                              Morocco
+                            </option>
+                            <option
+                              value="MOZ"
+                            >
+                              Mozambique
+                            </option>
+                            <option
+                              value="MMR"
+                            >
+                              Myanmar
+                            </option>
+                            <option
+                              value="NAM"
+                            >
+                              Namibia
+                            </option>
+                            <option
+                              value="NRU"
+                            >
+                              Nauru
+                            </option>
+                            <option
+                              value="NPL"
+                            >
+                              Nepal
+                            </option>
+                            <option
+                              value="NLD"
+                            >
+                              Netherlands
+                            </option>
+                            <option
+                              value="NCL"
+                            >
+                              New Caledonia
+                            </option>
+                            <option
+                              value="NZL"
+                            >
+                              New Zealand
+                            </option>
+                            <option
+                              value="NIC"
+                            >
+                              Nicaragua
+                            </option>
+                            <option
+                              value="NER"
+                            >
+                              Niger
+                            </option>
+                            <option
+                              value="NGA"
+                            >
+                              Nigeria
+                            </option>
+                            <option
+                              value="NIU"
+                            >
+                              Niue
+                            </option>
+                            <option
+                              value="NFK"
+                            >
+                              Norfolk Island
+                            </option>
+                            <option
+                              value="MNP"
+                            >
+                              Northern Mariana Islands
+                            </option>
+                            <option
+                              value="NOR"
+                            >
+                              Norway
+                            </option>
+                            <option
+                              value="OMN"
+                            >
+                              Oman
+                            </option>
+                            <option
+                              value="PAK"
+                            >
+                              Pakistan
+                            </option>
+                            <option
+                              value="PLW"
+                            >
+                              Palau
+                            </option>
+                            <option
+                              value="PAN"
+                            >
+                              Panama
+                            </option>
+                            <option
+                              value="PNG"
+                            >
+                              Papua New Guinea
+                            </option>
+                            <option
+                              value="PRY"
+                            >
+                              Paraguay
+                            </option>
+                            <option
+                              value="PER"
+                            >
+                              Peru
+                            </option>
+                            <option
+                              value="PHL"
+                            >
+                              Philippines
+                            </option>
+                            <option
+                              value="PCN"
+                            >
+                              Pitcairn
+                            </option>
+                            <option
+                              value="POL"
+                            >
+                              Poland
+                            </option>
+                            <option
+                              value="PRT"
+                            >
+                              Portugal
+                            </option>
+                            <option
+                              value="PRI"
+                            >
+                              Puerto Rico
+                            </option>
+                            <option
+                              value="QAT"
+                            >
+                              Qatar
+                            </option>
+                            <option
+                              value="KOR"
+                            >
+                              Republic of Korea
+                            </option>
+                            <option
+                              value="MDA"
+                            >
+                              Republic of Moldova
+                            </option>
+                            <option
+                              value="REU"
+                            >
+                              Réunion
+                            </option>
+                            <option
+                              value="ROU"
+                            >
+                              Romania
+                            </option>
+                            <option
+                              value="RUS"
+                            >
+                              Russian Federation
+                            </option>
+                            <option
+                              value="RWA"
+                            >
+                              Rwanda
+                            </option>
+                            <option
+                              value="BLM"
+                            >
+                              Saint-Barthélemy
+                            </option>
+                            <option
+                              value="SHN"
+                            >
+                              Saint Helena
+                            </option>
+                            <option
+                              value="KNA"
+                            >
+                              Saint Kitts and Nevis
+                            </option>
+                            <option
+                              value="LCA"
+                            >
+                              Saint Lucia
+                            </option>
+                            <option
+                              value="MAF"
+                            >
+                              Saint-Martin (French part)
+                            </option>
+                            <option
+                              value="SPM"
+                            >
+                              Saint Pierre and Miquelon
+                            </option>
+                            <option
+                              value="VCT"
+                            >
+                              Saint Vincent and the Grenadines
+                            </option>
+                            <option
+                              value="WSM"
+                            >
+                              Samoa
+                            </option>
+                            <option
+                              value="SMR"
+                            >
+                              San Marino
+                            </option>
+                            <option
+                              value="STP"
+                            >
+                              Sao Tome and Principe
+                            </option>
+                            <option
+                              value="SAU"
+                            >
+                              Saudi Arabia
+                            </option>
+                            <option
+                              value="SEN"
+                            >
+                              Senegal
+                            </option>
+                            <option
+                              value="SRB"
+                            >
+                              Serbia
+                            </option>
+                            <option
+                              value="SYC"
+                            >
+                              Seychelles
+                            </option>
+                            <option
+                              value="SLE"
+                            >
+                              Sierra Leone
+                            </option>
+                            <option
+                              value="SGP"
+                            >
+                              Singapore
+                            </option>
+                            <option
+                              value="SXM"
+                            >
+                              Sint Maarten (Dutch part)
+                            </option>
+                            <option
+                              value="SVK"
+                            >
+                              Slovakia
+                            </option>
+                            <option
+                              value="SVN"
+                            >
+                              Slovenia
+                            </option>
+                            <option
+                              value="SLB"
+                            >
+                              Solomon Islands
+                            </option>
+                            <option
+                              value="SOM"
+                            >
+                              Somalia
+                            </option>
+                            <option
+                              value="ZAF"
+                            >
+                              South Africa
+                            </option>
+                            <option
+                              value="SSD"
+                            >
+                              South Sudan
+                            </option>
+                            <option
+                              value="ESP"
+                            >
+                              Spain
+                            </option>
+                            <option
+                              value="LKA"
+                            >
+                              Sri Lanka
+                            </option>
+                            <option
+                              value="PSE"
+                            >
+                              State of Palestine
+                            </option>
+                            <option
+                              value="SDN"
+                            >
+                              Sudan
+                            </option>
+                            <option
+                              value="SUR"
+                            >
+                              Suriname
+                            </option>
+                            <option
+                              value="SJM"
+                            >
+                              Svalbard and Jan Mayen Islands
+                            </option>
+                            <option
+                              value="SWZ"
+                            >
+                              Swaziland
+                            </option>
+                            <option
+                              value="SWE"
+                            >
+                              Sweden
+                            </option>
+                            <option
+                              value="CHE"
+                            >
+                              Switzerland
+                            </option>
+                            <option
+                              value="SYR"
+                            >
+                              Syrian Arab Republic
+                            </option>
+                            <option
+                              value="TWAN"
+                            >
+                              Taiwan
+                            </option>
+                            <option
+                              value="TJK"
+                            >
+                              Tajikistan
+                            </option>
+                            <option
+                              value="THA"
+                            >
+                              Thailand
+                            </option>
+                            <option
+                              value="MKD"
+                            >
+                              The former Yugoslav Republic of Macedonia
+                            </option>
+                            <option
+                              value="TLS"
+                            >
+                              Timor-Leste
+                            </option>
+                            <option
+                              value="TGO"
+                            >
+                              Togo
+                            </option>
+                            <option
+                              value="TKL"
+                            >
+                              Tokelau
+                            </option>
+                            <option
+                              value="TON"
+                            >
+                              Tonga
+                            </option>
+                            <option
+                              value="TTO"
+                            >
+                              Trinidad and Tobago
+                            </option>
+                            <option
+                              value="TUN"
+                            >
+                              Tunisia
+                            </option>
+                            <option
+                              value="TUR"
+                            >
+                              Turkey
+                            </option>
+                            <option
+                              value="TKM"
+                            >
+                              Turkmenistan
+                            </option>
+                            <option
+                              value="TCA"
+                            >
+                              Turks and Caicos Islands
+                            </option>
+                            <option
+                              value="TUV"
+                            >
+                              Tuvalu
+                            </option>
+                            <option
+                              value="UGA"
+                            >
+                              Uganda
+                            </option>
+                            <option
+                              value="UKR"
+                            >
+                              Ukraine
+                            </option>
+                            <option
+                              value="ARE"
+                            >
+                              United Arab Emirates
+                            </option>
+                            <option
+                              value="GBR"
+                            >
+                              United Kingdom of Great Britain and Northern Ireland
+                            </option>
+                            <option
+                              value="TZA"
+                            >
+                              United Republic of Tanzania
+                            </option>
+                            <option
+                              value="URY"
+                            >
+                              Uruguay
+                            </option>
+                            <option
+                              value="UZB"
+                            >
+                              Uzbekistan
+                            </option>
+                            <option
+                              value="VUT"
+                            >
+                              Vanuatu
+                            </option>
+                            <option
+                              value="VEN"
+                            >
+                              Venezuela (Bolivarian Republic of)
+                            </option>
+                            <option
+                              value="VNM"
+                            >
+                              Vietnam
+                            </option>
+                            <option
+                              value="WLF"
+                            >
+                              Wallis and Futuna Islands
+                            </option>
+                            <option
+                              value="ESH"
+                            >
+                              Western Sahara
+                            </option>
+                            <option
+                              value="YEM"
+                            >
+                              Yemen
+                            </option>
+                            <option
+                              value="ZMB"
+                            >
+                              Zambia
+                            </option>
+                            <option
+                              value="ZWE"
+                            >
+                              Zimbabwe
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    
+                  </div>
+                  <div
+                    className="emotion-24"
+                  >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Residence
+                      <div
+                        className="notice"
+                      >
+                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+                      </div>
+                    </h1>
+                    <div
+                      className="emotion-23"
+                    >
+                      <div
+                        className="emotion-11"
                       >
                         <div>
                           <label
                             className="txt-l "
-                            htmlFor="select-1817836307"
-                            style={Object {}}
+                            htmlFor="select-3475791712"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
                             <span
                               style={
                                 Object {
+                                  "display": "flex",
                                   "marginRight": "0.5em",
-                                  "whiteSpace": "nowrap",
                                 }
                               }
                             >
-                              Birthplace Country
+                              Country of Residence
+                            </span>
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Required
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+                                </div>
+                              </span>
                             </span>
                           </label>
                           <div
@@ -65389,9 +77008,8 @@ Array [
                             <select
                               aria-label=""
                               className="sel-f  "
-                              id="select-1817836307"
-                              name="partnerA_birthCountry"
-                              onBlur={[Function]}
+                              id="select-3475791712"
+                              name="partnerA_residenceCountry"
                               onChange={[Function]}
                               value=""
                             >
@@ -66604,1403 +78222,143 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-16"
+                    className="emotion-19"
                   >
-                    <div
-                      className="emotion-13"
+                    <h1
+                      className="emotion-5"
                     >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Residence
-                      </h2>
-                    </div>
+                      Marriage
+                      <div
+                        className="notice"
+                      />
+                    </h1>
                     <div
                       className="emotion-9"
                     >
                       <div
-                        className="emotion-7"
+                        className="emotion-8"
                       >
                         <div
-                          className="fs-c m-b300"
+                          aria-labelledby="partnerA_bloodRelation-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
                           <div
-                            className="sel"
+                            className="txt-l"
+                            id="partnerA_bloodRelation-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            <div>
-                              <label
-                                className="txt-l "
-                                htmlFor="select-3550464744"
-                                style={Object {}}
-                              >
-                                <span
-                                  style={
-                                    Object {
-                                      "marginRight": "0.5em",
-                                    }
-                                  }
-                                >
-                                  Select Country of Residence
-                                </span>
-                              </label>
+                            Are you related by blood or marriage to your future spouse?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
                               <div
-                                className="sel-c  "
-                              >
-                                <select
-                                  aria-label=""
-                                  className="sel-f  "
-                                  id="select-3550464744"
-                                  name="partnerA_residenceCountry"
-                                  onChange={[Function]}
-                                  value=""
-                                >
-                                  <option />
-                                  <option
-                                    value="USA"
-                                  >
-                                    United States of America
-                                  </option>
-                                  <option
-                                    value="VIR"
-                                  >
-                                    United States Virgin Islands
-                                  </option>
-                                  <option
-                                    value="AFG"
-                                  >
-                                    Afghanistan
-                                  </option>
-                                  <option
-                                    value="ALA"
-                                  >
-                                    Åland Islands
-                                  </option>
-                                  <option
-                                    value="ALB"
-                                  >
-                                    Albania
-                                  </option>
-                                  <option
-                                    value="DZA"
-                                  >
-                                    Algeria
-                                  </option>
-                                  <option
-                                    value="ASM"
-                                  >
-                                    American Samoa
-                                  </option>
-                                  <option
-                                    value="AND"
-                                  >
-                                    Andorra
-                                  </option>
-                                  <option
-                                    value="AGO"
-                                  >
-                                    Angola
-                                  </option>
-                                  <option
-                                    value="AIA"
-                                  >
-                                    Anguilla
-                                  </option>
-                                  <option
-                                    value="ATG"
-                                  >
-                                    Antigua and Barbuda
-                                  </option>
-                                  <option
-                                    value="ARG"
-                                  >
-                                    Argentina
-                                  </option>
-                                  <option
-                                    value="ARM"
-                                  >
-                                    Armenia
-                                  </option>
-                                  <option
-                                    value="ABW"
-                                  >
-                                    Aruba
-                                  </option>
-                                  <option
-                                    value="AUS"
-                                  >
-                                    Australia
-                                  </option>
-                                  <option
-                                    value="AUT"
-                                  >
-                                    Austria
-                                  </option>
-                                  <option
-                                    value="AZE"
-                                  >
-                                    Azerbaijan
-                                  </option>
-                                  <option
-                                    value="BHS"
-                                  >
-                                    Bahamas
-                                  </option>
-                                  <option
-                                    value="BHR"
-                                  >
-                                    Bahrain
-                                  </option>
-                                  <option
-                                    value="BGD"
-                                  >
-                                    Bangladesh
-                                  </option>
-                                  <option
-                                    value="BRB"
-                                  >
-                                    Barbados
-                                  </option>
-                                  <option
-                                    value="BLR"
-                                  >
-                                    Belarus
-                                  </option>
-                                  <option
-                                    value="BEL"
-                                  >
-                                    Belgium
-                                  </option>
-                                  <option
-                                    value="BLZ"
-                                  >
-                                    Belize
-                                  </option>
-                                  <option
-                                    value="BEN"
-                                  >
-                                    Benin
-                                  </option>
-                                  <option
-                                    value="BMU"
-                                  >
-                                    Bermuda
-                                  </option>
-                                  <option
-                                    value="BTN"
-                                  >
-                                    Bhutan
-                                  </option>
-                                  <option
-                                    value="BOL"
-                                  >
-                                    Bolivia (Plurinational State of)
-                                  </option>
-                                  <option
-                                    value="BES"
-                                  >
-                                    Bonaire, Saint Eustatius and Saba
-                                  </option>
-                                  <option
-                                    value="BIH"
-                                  >
-                                    Bosnia and Herzegovina
-                                  </option>
-                                  <option
-                                    value="BWA"
-                                  >
-                                    Botswana
-                                  </option>
-                                  <option
-                                    value="BRA"
-                                  >
-                                    Brazil
-                                  </option>
-                                  <option
-                                    value="VGB"
-                                  >
-                                    British Virgin Islands
-                                  </option>
-                                  <option
-                                    value="BRN"
-                                  >
-                                    Brunei Darussalam
-                                  </option>
-                                  <option
-                                    value="BGR"
-                                  >
-                                    Bulgaria
-                                  </option>
-                                  <option
-                                    value="BFA"
-                                  >
-                                    Burkina Faso
-                                  </option>
-                                  <option
-                                    value="BDI"
-                                  >
-                                    Burundi
-                                  </option>
-                                  <option
-                                    value="CPV"
-                                  >
-                                    Cabo Verde
-                                  </option>
-                                  <option
-                                    value="KHM"
-                                  >
-                                    Cambodia
-                                  </option>
-                                  <option
-                                    value="CMR"
-                                  >
-                                    Cameroon
-                                  </option>
-                                  <option
-                                    value="CAN"
-                                  >
-                                    Canada
-                                  </option>
-                                  <option
-                                    value="CYM"
-                                  >
-                                    Cayman Islands
-                                  </option>
-                                  <option
-                                    value="CAF"
-                                  >
-                                    Central African Republic
-                                  </option>
-                                  <option
-                                    value="TCD"
-                                  >
-                                    Chad
-                                  </option>
-                                  <option
-                                    value="CHL"
-                                  >
-                                    Chile
-                                  </option>
-                                  <option
-                                    value="CHN"
-                                  >
-                                    China
-                                  </option>
-                                  <option
-                                    value="HKG"
-                                  >
-                                    China, Hong Kong Special Administrative Region
-                                  </option>
-                                  <option
-                                    value="MAC"
-                                  >
-                                    China, Macao Special Administrative Region
-                                  </option>
-                                  <option
-                                    value="COL"
-                                  >
-                                    Colombia
-                                  </option>
-                                  <option
-                                    value="COM"
-                                  >
-                                    Comoros
-                                  </option>
-                                  <option
-                                    value="COG"
-                                  >
-                                    Congo
-                                  </option>
-                                  <option
-                                    value="COK"
-                                  >
-                                    Cook Islands
-                                  </option>
-                                  <option
-                                    value="CRI"
-                                  >
-                                    Costa Rica
-                                  </option>
-                                  <option
-                                    value="CIV"
-                                  >
-                                    Côte d'Ivoire
-                                  </option>
-                                  <option
-                                    value="HRV"
-                                  >
-                                    Croatia
-                                  </option>
-                                  <option
-                                    value="CUB"
-                                  >
-                                    Cuba
-                                  </option>
-                                  <option
-                                    value="CUW"
-                                  >
-                                    Curaçao
-                                  </option>
-                                  <option
-                                    value="CYP"
-                                  >
-                                    Cyprus
-                                  </option>
-                                  <option
-                                    value="CZE"
-                                  >
-                                    Czech Republic
-                                  </option>
-                                  <option
-                                    value="PRK"
-                                  >
-                                    Democratic People's Republic of Korea
-                                  </option>
-                                  <option
-                                    value="COD"
-                                  >
-                                    Democratic Republic of the Congo
-                                  </option>
-                                  <option
-                                    value="DNK"
-                                  >
-                                    Denmark
-                                  </option>
-                                  <option
-                                    value="DJI"
-                                  >
-                                    Djibouti
-                                  </option>
-                                  <option
-                                    value="DMA"
-                                  >
-                                    Dominica
-                                  </option>
-                                  <option
-                                    value="DOM"
-                                  >
-                                    Dominican Republic
-                                  </option>
-                                  <option
-                                    value="ECU"
-                                  >
-                                    Ecuador
-                                  </option>
-                                  <option
-                                    value="EGY"
-                                  >
-                                    Egypt
-                                  </option>
-                                  <option
-                                    value="SLV"
-                                  >
-                                    El Salvador
-                                  </option>
-                                  <option
-                                    value="GNQ"
-                                  >
-                                    Equatorial Guinea
-                                  </option>
-                                  <option
-                                    value="ERI"
-                                  >
-                                    Eritrea
-                                  </option>
-                                  <option
-                                    value="EST"
-                                  >
-                                    Estonia
-                                  </option>
-                                  <option
-                                    value="ETH"
-                                  >
-                                    Ethiopia
-                                  </option>
-                                  <option
-                                    value="FRO"
-                                  >
-                                    Faeroe Islands
-                                  </option>
-                                  <option
-                                    value="FLK"
-                                  >
-                                    Falkland Islands (Malvinas)
-                                  </option>
-                                  <option
-                                    value="FJI"
-                                  >
-                                    Fiji
-                                  </option>
-                                  <option
-                                    value="FIN"
-                                  >
-                                    Finland
-                                  </option>
-                                  <option
-                                    value="FRA"
-                                  >
-                                    France
-                                  </option>
-                                  <option
-                                    value="GUF"
-                                  >
-                                    French Guiana
-                                  </option>
-                                  <option
-                                    value="PYF"
-                                  >
-                                    French Polynesia
-                                  </option>
-                                  <option
-                                    value="GAB"
-                                  >
-                                    Gabon
-                                  </option>
-                                  <option
-                                    value="GMB"
-                                  >
-                                    Gambia
-                                  </option>
-                                  <option
-                                    value="GEO"
-                                  >
-                                    Georgia
-                                  </option>
-                                  <option
-                                    value="DEU"
-                                  >
-                                    Germany
-                                  </option>
-                                  <option
-                                    value="GHA"
-                                  >
-                                    Ghana
-                                  </option>
-                                  <option
-                                    value="GIB"
-                                  >
-                                    Gibraltar
-                                  </option>
-                                  <option
-                                    value="GRC"
-                                  >
-                                    Greece
-                                  </option>
-                                  <option
-                                    value="GRL"
-                                  >
-                                    Greenland
-                                  </option>
-                                  <option
-                                    value="GRD"
-                                  >
-                                    Grenada
-                                  </option>
-                                  <option
-                                    value="GLP"
-                                  >
-                                    Guadeloupe
-                                  </option>
-                                  <option
-                                    value="GUM"
-                                  >
-                                    Guam
-                                  </option>
-                                  <option
-                                    value="GTM"
-                                  >
-                                    Guatemala
-                                  </option>
-                                  <option
-                                    value="GGY"
-                                  >
-                                    Guernsey
-                                  </option>
-                                  <option
-                                    value="GIN"
-                                  >
-                                    Guinea
-                                  </option>
-                                  <option
-                                    value="GNB"
-                                  >
-                                    Guinea-Bissau
-                                  </option>
-                                  <option
-                                    value="GUY"
-                                  >
-                                    Guyana
-                                  </option>
-                                  <option
-                                    value="HTI"
-                                  >
-                                    Haiti
-                                  </option>
-                                  <option
-                                    value="VAT"
-                                  >
-                                    Holy See
-                                  </option>
-                                  <option
-                                    value="HND"
-                                  >
-                                    Honduras
-                                  </option>
-                                  <option
-                                    value="HUN"
-                                  >
-                                    Hungary
-                                  </option>
-                                  <option
-                                    value="ISL"
-                                  >
-                                    Iceland
-                                  </option>
-                                  <option
-                                    value="IND"
-                                  >
-                                    India
-                                  </option>
-                                  <option
-                                    value="IDN"
-                                  >
-                                    Indonesia
-                                  </option>
-                                  <option
-                                    value="IRN"
-                                  >
-                                    Iran (Islamic Republic of)
-                                  </option>
-                                  <option
-                                    value="IRQ"
-                                  >
-                                    Iraq
-                                  </option>
-                                  <option
-                                    value="IRL"
-                                  >
-                                    Ireland
-                                  </option>
-                                  <option
-                                    value="IMN"
-                                  >
-                                    Isle of Man
-                                  </option>
-                                  <option
-                                    value="ISR"
-                                  >
-                                    Israel
-                                  </option>
-                                  <option
-                                    value="ITA"
-                                  >
-                                    Italy
-                                  </option>
-                                  <option
-                                    value="JAM"
-                                  >
-                                    Jamaica
-                                  </option>
-                                  <option
-                                    value="JPN"
-                                  >
-                                    Japan
-                                  </option>
-                                  <option
-                                    value="JEY"
-                                  >
-                                    Jersey
-                                  </option>
-                                  <option
-                                    value="JOR"
-                                  >
-                                    Jordan
-                                  </option>
-                                  <option
-                                    value="KAZ"
-                                  >
-                                    Kazakhstan
-                                  </option>
-                                  <option
-                                    value="KEN"
-                                  >
-                                    Kenya
-                                  </option>
-                                  <option
-                                    value="KIR"
-                                  >
-                                    Kiribati
-                                  </option>
-                                  <option
-                                    value="KWT"
-                                  >
-                                    Kuwait
-                                  </option>
-                                  <option
-                                    value="KGZ"
-                                  >
-                                    Kyrgyzstan
-                                  </option>
-                                  <option
-                                    value="LAO"
-                                  >
-                                    Lao People's Democratic Republic
-                                  </option>
-                                  <option
-                                    value="LVA"
-                                  >
-                                    Latvia
-                                  </option>
-                                  <option
-                                    value="LBN"
-                                  >
-                                    Lebanon
-                                  </option>
-                                  <option
-                                    value="LSO"
-                                  >
-                                    Lesotho
-                                  </option>
-                                  <option
-                                    value="LBR"
-                                  >
-                                    Liberia
-                                  </option>
-                                  <option
-                                    value="LBY"
-                                  >
-                                    Libya
-                                  </option>
-                                  <option
-                                    value="LIE"
-                                  >
-                                    Liechtenstein
-                                  </option>
-                                  <option
-                                    value="LTU"
-                                  >
-                                    Lithuania
-                                  </option>
-                                  <option
-                                    value="LUX"
-                                  >
-                                    Luxembourg
-                                  </option>
-                                  <option
-                                    value="MDG"
-                                  >
-                                    Madagascar
-                                  </option>
-                                  <option
-                                    value="MWI"
-                                  >
-                                    Malawi
-                                  </option>
-                                  <option
-                                    value="MYS"
-                                  >
-                                    Malaysia
-                                  </option>
-                                  <option
-                                    value="MDV"
-                                  >
-                                    Maldives
-                                  </option>
-                                  <option
-                                    value="MLI"
-                                  >
-                                    Mali
-                                  </option>
-                                  <option
-                                    value="MLT"
-                                  >
-                                    Malta
-                                  </option>
-                                  <option
-                                    value="MHL"
-                                  >
-                                    Marshall Islands
-                                  </option>
-                                  <option
-                                    value="MTQ"
-                                  >
-                                    Martinique
-                                  </option>
-                                  <option
-                                    value="MRT"
-                                  >
-                                    Mauritania
-                                  </option>
-                                  <option
-                                    value="MUS"
-                                  >
-                                    Mauritius
-                                  </option>
-                                  <option
-                                    value="MYT"
-                                  >
-                                    Mayotte
-                                  </option>
-                                  <option
-                                    value="MEX"
-                                  >
-                                    Mexico
-                                  </option>
-                                  <option
-                                    value="FSM"
-                                  >
-                                    Micronesia (Federated States of)
-                                  </option>
-                                  <option
-                                    value="MCO"
-                                  >
-                                    Monaco
-                                  </option>
-                                  <option
-                                    value="MNG"
-                                  >
-                                    Mongolia
-                                  </option>
-                                  <option
-                                    value="MNE"
-                                  >
-                                    Montenegro
-                                  </option>
-                                  <option
-                                    value="MSR"
-                                  >
-                                    Montserrat
-                                  </option>
-                                  <option
-                                    value="MAR"
-                                  >
-                                    Morocco
-                                  </option>
-                                  <option
-                                    value="MOZ"
-                                  >
-                                    Mozambique
-                                  </option>
-                                  <option
-                                    value="MMR"
-                                  >
-                                    Myanmar
-                                  </option>
-                                  <option
-                                    value="NAM"
-                                  >
-                                    Namibia
-                                  </option>
-                                  <option
-                                    value="NRU"
-                                  >
-                                    Nauru
-                                  </option>
-                                  <option
-                                    value="NPL"
-                                  >
-                                    Nepal
-                                  </option>
-                                  <option
-                                    value="NLD"
-                                  >
-                                    Netherlands
-                                  </option>
-                                  <option
-                                    value="NCL"
-                                  >
-                                    New Caledonia
-                                  </option>
-                                  <option
-                                    value="NZL"
-                                  >
-                                    New Zealand
-                                  </option>
-                                  <option
-                                    value="NIC"
-                                  >
-                                    Nicaragua
-                                  </option>
-                                  <option
-                                    value="NER"
-                                  >
-                                    Niger
-                                  </option>
-                                  <option
-                                    value="NGA"
-                                  >
-                                    Nigeria
-                                  </option>
-                                  <option
-                                    value="NIU"
-                                  >
-                                    Niue
-                                  </option>
-                                  <option
-                                    value="NFK"
-                                  >
-                                    Norfolk Island
-                                  </option>
-                                  <option
-                                    value="MNP"
-                                  >
-                                    Northern Mariana Islands
-                                  </option>
-                                  <option
-                                    value="NOR"
-                                  >
-                                    Norway
-                                  </option>
-                                  <option
-                                    value="OMN"
-                                  >
-                                    Oman
-                                  </option>
-                                  <option
-                                    value="PAK"
-                                  >
-                                    Pakistan
-                                  </option>
-                                  <option
-                                    value="PLW"
-                                  >
-                                    Palau
-                                  </option>
-                                  <option
-                                    value="PAN"
-                                  >
-                                    Panama
-                                  </option>
-                                  <option
-                                    value="PNG"
-                                  >
-                                    Papua New Guinea
-                                  </option>
-                                  <option
-                                    value="PRY"
-                                  >
-                                    Paraguay
-                                  </option>
-                                  <option
-                                    value="PER"
-                                  >
-                                    Peru
-                                  </option>
-                                  <option
-                                    value="PHL"
-                                  >
-                                    Philippines
-                                  </option>
-                                  <option
-                                    value="PCN"
-                                  >
-                                    Pitcairn
-                                  </option>
-                                  <option
-                                    value="POL"
-                                  >
-                                    Poland
-                                  </option>
-                                  <option
-                                    value="PRT"
-                                  >
-                                    Portugal
-                                  </option>
-                                  <option
-                                    value="PRI"
-                                  >
-                                    Puerto Rico
-                                  </option>
-                                  <option
-                                    value="QAT"
-                                  >
-                                    Qatar
-                                  </option>
-                                  <option
-                                    value="KOR"
-                                  >
-                                    Republic of Korea
-                                  </option>
-                                  <option
-                                    value="MDA"
-                                  >
-                                    Republic of Moldova
-                                  </option>
-                                  <option
-                                    value="REU"
-                                  >
-                                    Réunion
-                                  </option>
-                                  <option
-                                    value="ROU"
-                                  >
-                                    Romania
-                                  </option>
-                                  <option
-                                    value="RUS"
-                                  >
-                                    Russian Federation
-                                  </option>
-                                  <option
-                                    value="RWA"
-                                  >
-                                    Rwanda
-                                  </option>
-                                  <option
-                                    value="BLM"
-                                  >
-                                    Saint-Barthélemy
-                                  </option>
-                                  <option
-                                    value="SHN"
-                                  >
-                                    Saint Helena
-                                  </option>
-                                  <option
-                                    value="KNA"
-                                  >
-                                    Saint Kitts and Nevis
-                                  </option>
-                                  <option
-                                    value="LCA"
-                                  >
-                                    Saint Lucia
-                                  </option>
-                                  <option
-                                    value="MAF"
-                                  >
-                                    Saint-Martin (French part)
-                                  </option>
-                                  <option
-                                    value="SPM"
-                                  >
-                                    Saint Pierre and Miquelon
-                                  </option>
-                                  <option
-                                    value="VCT"
-                                  >
-                                    Saint Vincent and the Grenadines
-                                  </option>
-                                  <option
-                                    value="WSM"
-                                  >
-                                    Samoa
-                                  </option>
-                                  <option
-                                    value="SMR"
-                                  >
-                                    San Marino
-                                  </option>
-                                  <option
-                                    value="STP"
-                                  >
-                                    Sao Tome and Principe
-                                  </option>
-                                  <option
-                                    value="SAU"
-                                  >
-                                    Saudi Arabia
-                                  </option>
-                                  <option
-                                    value="SEN"
-                                  >
-                                    Senegal
-                                  </option>
-                                  <option
-                                    value="SRB"
-                                  >
-                                    Serbia
-                                  </option>
-                                  <option
-                                    value="SYC"
-                                  >
-                                    Seychelles
-                                  </option>
-                                  <option
-                                    value="SLE"
-                                  >
-                                    Sierra Leone
-                                  </option>
-                                  <option
-                                    value="SGP"
-                                  >
-                                    Singapore
-                                  </option>
-                                  <option
-                                    value="SXM"
-                                  >
-                                    Sint Maarten (Dutch part)
-                                  </option>
-                                  <option
-                                    value="SVK"
-                                  >
-                                    Slovakia
-                                  </option>
-                                  <option
-                                    value="SVN"
-                                  >
-                                    Slovenia
-                                  </option>
-                                  <option
-                                    value="SLB"
-                                  >
-                                    Solomon Islands
-                                  </option>
-                                  <option
-                                    value="SOM"
-                                  >
-                                    Somalia
-                                  </option>
-                                  <option
-                                    value="ZAF"
-                                  >
-                                    South Africa
-                                  </option>
-                                  <option
-                                    value="SSD"
-                                  >
-                                    South Sudan
-                                  </option>
-                                  <option
-                                    value="ESP"
-                                  >
-                                    Spain
-                                  </option>
-                                  <option
-                                    value="LKA"
-                                  >
-                                    Sri Lanka
-                                  </option>
-                                  <option
-                                    value="PSE"
-                                  >
-                                    State of Palestine
-                                  </option>
-                                  <option
-                                    value="SDN"
-                                  >
-                                    Sudan
-                                  </option>
-                                  <option
-                                    value="SUR"
-                                  >
-                                    Suriname
-                                  </option>
-                                  <option
-                                    value="SJM"
-                                  >
-                                    Svalbard and Jan Mayen Islands
-                                  </option>
-                                  <option
-                                    value="SWZ"
-                                  >
-                                    Swaziland
-                                  </option>
-                                  <option
-                                    value="SWE"
-                                  >
-                                    Sweden
-                                  </option>
-                                  <option
-                                    value="CHE"
-                                  >
-                                    Switzerland
-                                  </option>
-                                  <option
-                                    value="SYR"
-                                  >
-                                    Syrian Arab Republic
-                                  </option>
-                                  <option
-                                    value="TWAN"
-                                  >
-                                    Taiwan
-                                  </option>
-                                  <option
-                                    value="TJK"
-                                  >
-                                    Tajikistan
-                                  </option>
-                                  <option
-                                    value="THA"
-                                  >
-                                    Thailand
-                                  </option>
-                                  <option
-                                    value="MKD"
-                                  >
-                                    The former Yugoslav Republic of Macedonia
-                                  </option>
-                                  <option
-                                    value="TLS"
-                                  >
-                                    Timor-Leste
-                                  </option>
-                                  <option
-                                    value="TGO"
-                                  >
-                                    Togo
-                                  </option>
-                                  <option
-                                    value="TKL"
-                                  >
-                                    Tokelau
-                                  </option>
-                                  <option
-                                    value="TON"
-                                  >
-                                    Tonga
-                                  </option>
-                                  <option
-                                    value="TTO"
-                                  >
-                                    Trinidad and Tobago
-                                  </option>
-                                  <option
-                                    value="TUN"
-                                  >
-                                    Tunisia
-                                  </option>
-                                  <option
-                                    value="TUR"
-                                  >
-                                    Turkey
-                                  </option>
-                                  <option
-                                    value="TKM"
-                                  >
-                                    Turkmenistan
-                                  </option>
-                                  <option
-                                    value="TCA"
-                                  >
-                                    Turks and Caicos Islands
-                                  </option>
-                                  <option
-                                    value="TUV"
-                                  >
-                                    Tuvalu
-                                  </option>
-                                  <option
-                                    value="UGA"
-                                  >
-                                    Uganda
-                                  </option>
-                                  <option
-                                    value="UKR"
-                                  >
-                                    Ukraine
-                                  </option>
-                                  <option
-                                    value="ARE"
-                                  >
-                                    United Arab Emirates
-                                  </option>
-                                  <option
-                                    value="GBR"
-                                  >
-                                    United Kingdom of Great Britain and Northern Ireland
-                                  </option>
-                                  <option
-                                    value="TZA"
-                                  >
-                                    United Republic of Tanzania
-                                  </option>
-                                  <option
-                                    value="URY"
-                                  >
-                                    Uruguay
-                                  </option>
-                                  <option
-                                    value="UZB"
-                                  >
-                                    Uzbekistan
-                                  </option>
-                                  <option
-                                    value="VUT"
-                                  >
-                                    Vanuatu
-                                  </option>
-                                  <option
-                                    value="VEN"
-                                  >
-                                    Venezuela (Bolivarian Republic of)
-                                  </option>
-                                  <option
-                                    value="VNM"
-                                  >
-                                    Vietnam
-                                  </option>
-                                  <option
-                                    value="WLF"
-                                  >
-                                    Wallis and Futuna Islands
-                                  </option>
-                                  <option
-                                    value="ESH"
-                                  >
-                                    Western Sahara
-                                  </option>
-                                  <option
-                                    value="YEM"
-                                  >
-                                    Yemen
-                                  </option>
-                                  <option
-                                    value="ZMB"
-                                  >
-                                    Zambia
-                                  </option>
-                                  <option
-                                    value="ZWE"
-                                  >
-                                    Zimbabwe
-                                  </option>
-                                </select>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      
-                      <div
-                        className="emotion-7"
-                      >
-                        <div
-                          className="fs-c m-b300"
-                        >
-                          <div
-                            className="sel"
-                          >
-                            <div>
-                              <label
-                                className="txt-l "
-                                htmlFor="select-3699612000"
-                                style={Object {}}
-                              >
-                                <span
-                                  style={
-                                    Object {
-                                      "marginRight": "0.5em",
-                                      "whiteSpace": "nowrap",
-                                    }
-                                  }
-                                >
-                                  This Marriage is your ...
-                                </span>
-                              </label>
+                                className="icon"
+                              />
                               <div
-                                className="sel-c  "
-                              >
-                                <select
-                                  aria-label=""
-                                  className="sel-f  "
-                                  id="select-3699612000"
-                                  name="partnerA_marriageNumb"
-                                  onChange={[Function]}
-                                  value=""
-                                >
-                                  <option />
-                                  <option
-                                    value="1st"
-                                  >
-                                    1st
-                                  </option>
-                                  <option
-                                    value="2nd"
-                                  >
-                                    2nd
-                                  </option>
-                                  <option
-                                    value="3rd"
-                                  >
-                                    3rd
-                                  </option>
-                                  <option
-                                    value="4th"
-                                  >
-                                    4th
-                                  </option>
-                                  <option
-                                    value="5th"
-                                  >
-                                    5th
-                                  </option>
-                                  <option
-                                    value="6th"
-                                  >
-                                    6th
-                                  </option>
-                                  <option
-                                    value="7th"
-                                  >
-                                    7th
-                                  </option>
-                                  <option
-                                    value="8th"
-                                  >
-                                    8th
-                                  </option>
-                                  <option
-                                    value="9th"
-                                  >
-                                    9th
-                                  </option>
-                                </select>
+                                className="msg"
+                              >
+                                This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
                               </div>
-                            </div>
+                            </span>
                           </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_bloodRelation"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_bloodRelation"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
                     <div
-                      className="emotion-29"
+                      className="emotion-9"
                     >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Were you ever a member of a ...
-                      </h2>
                       <div
-                        className="emotion-28"
+                        className="emotion-8"
                       >
                         <div
-                          aria-label=""
+                          aria-labelledby="partnerA_marriedBefore-groupLabel"
+                          className="radio-group__label"
                           role="group"
                         >
-                          <label
-                            className="ra  "
+                          <div
+                            className="txt-l"
+                            id="partnerA_marriedBefore-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            <input
-                              className="ra-f"
-                              name="partnerA_partnershipType"
-                              onChange={[Function]}
-                              type="radio"
-                              value="N/A"
-                            />
+                            Have you ever been married before?
                             <span
-                              className="ra-l"
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
                             >
-                              Does Not Apply
+                              Required
                             </span>
-                          </label>
+                          </div>
                           <label
                             className="ra  "
                           >
                             <input
                               className="ra-f"
-                              name="partnerA_partnershipType"
+                              name="partnerA_marriedBefore"
                               onChange={[Function]}
                               type="radio"
-                              value="CIV"
+                              value="1"
                             />
                             <span
                               className="ra-l"
                             >
-                              Civil Unions
+                              Yes
                             </span>
                           </label>
                           <label
@@ -68008,106 +78366,190 @@ Array [
                           >
                             <input
                               className="ra-f"
-                              name="partnerA_partnershipType"
+                              name="partnerA_marriedBefore"
                               onChange={[Function]}
                               type="radio"
-                              value="DOM"
+                              value="0"
                             />
                             <span
                               className="ra-l"
                             >
-                              Domestic Partnership
+                              No
                             </span>
                           </label>
                         </div>
                       </div>
                     </div>
-                    
+                    
+                    <div
+                      className="emotion-24"
+                    >
+                      <div
+                        className="emotion-33"
+                      >
+                        <div
+                          className="emotion-9"
+                        >
+                          <div
+                            aria-labelledby="partnerA_partnershipType-groupLabel"
+                            className="radio-group__label"
+                            role="group"
+                          >
+                            <div
+                              className="txt-l"
+                              id="partnerA_partnershipType-groupLabel"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Were you ever a member of a civil union or domestic partnership?
+                              <span
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "display": "flex",
+                                    "paddingLeft": "0.25em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  This information is collected as required by the Massachusetts State Marriage Intention Form.
+                                </div>
+                              </span>
+                            </div>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="CIV"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a civil union
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="DOM"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a domestic partnership
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="N/A"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
                   </div>
                   <div
-                    className="emotion-16"
+                    className="emotion-24"
                   >
-                    <div
-                      className="emotion-32"
+                    <h1
+                      className="emotion-5"
                     >
-                      <h2
-                        className="emotion-4"
+                      Parents
+                      <div
+                        className="notice"
                       >
-                        Parents
-                      </h2>
-                    </div>
+                        Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
+                        <span
+                          className="tool-tip__wrapper emotion-36"
+                        >
+                          <div
+                            className="icon"
+                          />
+                          <div
+                            className="msg"
+                          >
+                            This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
+                          </div>
+                        </span>
+                      </div>
+                    </h1>
                     <div
-                      className="emotion-35"
-                      style={
-                        Object {
-                          "marginBottom": "2.5em",
-                        }
-                      }
+                      className="emotion-45"
                     >
-                      <h4
-                        className="emotion-4"
-                      >
-                        Name of Parent 1/Mother
-                      </h4>
                       <div>
                         <label
                           className="txt-l "
-                          htmlFor="input-2217447742"
-                          style={Object {}}
+                          htmlFor="input-507056287"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
                           <span
                             style={
                               Object {
+                                "display": "flex",
                                 "marginRight": "0.5em",
                               }
                             }
                           >
-                            Parent 1/Mother - First Middle Last
+                            Parent 1 - First Middle Last Name
                           </span>
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-2217447742"
-                          maxLength={38}
-                          name="partnerA_parentA_Name"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-1925864057"
-                          style={Object {}}
-                        >
                           <span
+                            aria-hidden="true"
+                            className="t--req"
                             style={
                               Object {
-                                "marginRight": "0.5em",
+                                "display": "flex",
+                                "flexGrow": 1,
                               }
                             }
                           >
-                            Parent 1/Mother - Maiden Name/Surname at Birth or Adoption
+                            Required
                           </span>
                         </label>
-                        <label
-                          className="notice emotion-5"
-                        >
-                          This should be your parent's last name at the time of their birth or adoption.
-                        </label>
                         <input
                           aria-label=""
                           className="txt-f  "
-                          id="input-1925864057"
+                          id="input-507056287"
                           maxLength={38}
-                          name="partnerA_parentA_Surname"
+                          name="partnerA_parentA_Name"
                           onChange={[Function]}
                           type="text"
                           value=""
@@ -68118,79 +78560,50 @@ Array [
                            
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="emotion-35"
-                      style={
-                        Object {
-                          "marginBottom": "2.5em",
-                        }
-                      }
-                    >
-                      <h4
-                        className="emotion-4"
-                      >
-                        Name of Parent 2/Father
-                      </h4>
                       <div>
                         <label
                           className="txt-l "
-                          htmlFor="input-738420088"
-                          style={Object {}}
+                          htmlFor="input-4196106810"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
                           <span
                             style={
                               Object {
+                                "display": "flex",
                                 "marginRight": "0.5em",
                               }
                             }
                           >
-                            Parent 2/Father - First Middle Last
+                            Parent 1 - Family Name/Last Name At the time of their birth or adoption
                           </span>
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-738420088"
-                          maxLength={38}
-                          name="partnerA_parentB_Name"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-2538005951"
-                          style={Object {}}
-                        >
                           <span
+                            aria-hidden="true"
+                            className="t--req"
                             style={
                               Object {
-                                "marginRight": "0.5em",
+                                "display": "flex",
+                                "flexGrow": 1,
                               }
                             }
                           >
-                            Parent 2/Father - Maiden Name/Surname at Birth or Adoption
+                            Required
                           </span>
                         </label>
                         <label
-                          className="notice emotion-5"
+                          className="notice emotion-6"
                         >
-                          This should be your parent's last name at the time of their birth or adoption.
+                          This information might be found on your birth certificate.
                         </label>
                         <input
                           aria-label=""
                           className="txt-f  "
-                          id="input-2538005951"
+                          id="input-4196106810"
                           maxLength={38}
-                          name="partnerA_parentB_Surname"
+                          name="partnerA_parentA_Surname"
                           onChange={[Function]}
                           type="text"
                           value=""
@@ -68201,119 +78614,155 @@ Array [
                            
                         </div>
                       </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
-                    <div
-                      className="emotion-19"
-                    >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Were your parents married at the time of your birth?
-                      </h2>
                       <div
-                        className="emotion-28"
+                        className="emotion-9"
                       >
                         <div
-                          className="emotion-41"
+                          aria-labelledby="partnerA_additionalParent-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
                           <div
-                            aria-label=""
-                            role="group"
+                            className="txt-l"
+                            id="partnerA_additionalParent-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerA_parentsMarriedAtBirth"
-                                onChange={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
+                            Do you have a second parent?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
                             >
-                              <input
-                                className="ra-f"
-                                name="partnerA_parentsMarriedAtBirth"
-                                onChange={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                No
-                              </span>
-                            </label>
+                              Required
+                            </span>
                           </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
                         </div>
                       </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
-                    <div
-                      className="emotion-19"
-                    >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Related by blood or marriage to Person B
-                      </h2>
                       <div
-                        className="emotion-28"
+                        className="emotion-24"
                       >
                         <div
-                          className="emotion-41"
+                          className="emotion-43"
                         >
                           <div
-                            aria-label=""
-                            role="group"
+                            className="emotion-9"
                           >
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerA_bloodRelation"
-                                onChange={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
+                            <div
+                              className="emotion-8"
                             >
-                              <input
-                                className="ra-f"
-                                name="partnerA_bloodRelation"
-                                onChange={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ra-l"
+                              <div
+                                aria-labelledby="partnerA_parentsMarriedAtBirth-groupLabel"
+                                className="radio-group__label"
+                                role="group"
                               >
-                                No
-                              </span>
-                            </label>
+                                <div
+                                  className="txt-l"
+                                  id="partnerA_parentsMarriedAtBirth-groupLabel"
+                                  style={
+                                    Object {
+                                      "display": "flex",
+                                    }
+                                  }
+                                >
+                                  Were your parents married at the time of your birth?
+                                  <span
+                                    className="t--req"
+                                    style={
+                                      Object {
+                                        "display": "flex",
+                                        "paddingLeft": "0.25em",
+                                      }
+                                    }
+                                  >
+                                    Required
+                                  </span>
+                                  <span
+                                    className="tool-tip__wrapper emotion-7"
+                                  >
+                                    <div
+                                      className="icon"
+                                    />
+                                    <div
+                                      className="msg"
+                                    >
+                                      This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
+                                    </div>
+                                  </span>
+                                </div>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerA_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="1"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    Yes
+                                  </span>
+                                </label>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerA_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="0"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    No
+                                  </span>
+                                </label>
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -68322,13 +78771,13 @@ Array [
                 </fieldset>
               </div>
               <div
-                className="g g--mr emotion-53"
+                className="g g--mr emotion-50"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-52"
+                    className="lnk emotion-49"
                     onClick={[Function]}
                     type="button"
                   >
@@ -68513,40 +78962,40 @@ Array [
   color: #d22d23;
 }
 
-.emotion-51 fieldset + fieldset {
+.emotion-48 fieldset + fieldset {
   margin-top: 2rem;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-51 fieldset + fieldset {
+  .emotion-48 fieldset + fieldset {
     margin-top: 4rem;
   }
 
-  .emotion-51 fieldset + fieldset .lnk {
+  .emotion-48 fieldset + fieldset .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-50 {
+.emotion-47 {
   margin: 0;
   padding: 0;
   border: none;
 }
 
-.emotion-50 legend {
+.emotion-47 legend {
   padding-left: 0;
   padding-right: 0;
   width: 100%;
 }
 
-.emotion-50 h2 {
+.emotion-47 h2 {
   margin-bottom: 0;
   font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   color: #091f2f;
 }
 
-.emotion-50 .desc {
+.emotion-47 .desc {
   margin: 0.5rem 0 0.75rem;
   font-family: Lora,Georgia,serif;
   font-size: 0.9375em;
@@ -68555,69 +79004,49 @@ Array [
   line-height: 1.2em;
 }
 
-.emotion-4 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-4.secondary {
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  border-width: 3px;
-}
-
-.emotion-4.secondary em {
-  font-size: 1rem;
-}
-
-.emotion-53 {
+.emotion-50 {
   text-align: center;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-53 {
+  .emotion-50 {
     margin-top: 2.5rem;
     text-align: left;
   }
 
-  .emotion-53 > div {
+  .emotion-50 > div {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 
-  .emotion-53 > div.ta-r > button {
+  .emotion-50 > div.ta-r > button {
     margin-left: auto;
   }
 
-  .emotion-53 .lnk {
+  .emotion-50 .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-52 {
+.emotion-49 {
   padding: 1.25rem !important;
   padding-left: 0 !important;
 }
 
-.emotion-12 {
+.emotion-17 {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-.emotion-12 legend {
+.emotion-17 legend {
   padding-left: 0;
   font-size: 120%;
 }
 
-.emotion-11 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -68630,39 +79059,39 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-11 > div {
+.emotion-15 > div {
   -webkit-flex: 0 0 24%;
   -ms-flex: 0 0 24%;
   flex: 0 0 24%;
 }
 
-.emotion-11 > div:last-of-type {
+.emotion-15 > div:last-of-type {
   -webkit-flex: 0 0 50%;
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
 }
 
-.emotion-11 input {
+.emotion-15 input {
   -moz-appearance: textfield;
 }
 
-.emotion-11 input::-webkit-inner-spin-button {
+.emotion-15 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.emotion-11 input::-ms-clear {
+.emotion-15 input::-ms-clear {
   display: none;
 }
 
-.emotion-11 label {
+.emotion-15 label {
   margin-top: 0.5rem;
 }
 
-.emotion-11.disabled {
+.emotion-15.disabled {
   opacity: 0.4;
 }
 
-.emotion-11.disabled * {
+.emotion-15.disabled * {
   cursor: not-allowed;
 }
 
@@ -68682,7 +79111,6 @@ Array [
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-3 .progressbar {
@@ -68690,6 +79118,7 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -68701,18 +79130,13 @@ Array [
 
 .emotion-3 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -68722,11 +79146,10 @@ Array [
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -68807,27 +79230,254 @@ Array [
   }
 }
 
-.emotion-54 {
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
+.emotion-51 {
   padding: 0px;
 }
 
+.emotion-4 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  padding-bottom: 0.25em;
+}
+
+.emotion-4 h2 {
+  margin-bottom: 3.9375rem;
+}
+
+.emotion-13 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 1.5em;
+}
+
+.emotion-13 label {
+  margin-top: 0em;
+}
+
+.emotion-13 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-13 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-13 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-13 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-13 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-13 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-13 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-13 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-13 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-5 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-5 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-5 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-5 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
 .emotion-9 {
-  margin-bottom: 2.5em;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-9 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-9 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-9 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-9 {
+  .emotion-9 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-9 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-8 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-7 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-7 .icon::before {
+  content: '?';
+}
+
+.emotion-7 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-7 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-7 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-7 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-11 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-9 > div {
+.emotion-11 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-9 > div {
+  .emotion-11 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -68835,44 +79485,74 @@ Array [
   }
 }
 
-.emotion-9 > .RADIOGROUP label {
+.emotion-11 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-9 h3 {
+.emotion-11 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-9 .notice {
-  font-size: 0.7em;
+.emotion-11 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-9 .emotion-5:after {
+.emotion-11 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
+.emotion-11 .sel-c {
+  display: block;
+}
+
+.emotion-19 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-19 label {
+  margin-top: 0em;
+}
+
+.emotion-19 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-19 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-19 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-19 .t--opt {
+  color: #58585b !important;
+}
+
 @media screen and (min-width:768px) {
-  .emotion-7 {
+  .emotion-19 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-7 > div {
+.emotion-19 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-7 > div {
+  .emotion-19 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -68880,52 +79560,111 @@ Array [
   }
 }
 
-.emotion-7 > .RADIOGROUP label {
+.emotion-19 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-7 h3 {
+.emotion-19 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-7 .notice {
-  font-size: 0.7em;
+.emotion-19 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-7 .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-19 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-14 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
+}
+
+.emotion-14 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-14 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-14 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-16 {
+  margin-bottom: 2.25em;
+}
+
+.emotion-24 {
+  margin-bottom: 3em;
+  background: none;
+}
+
+.emotion-24 label {
+  margin-top: 0em;
+}
+
+.emotion-24 .spacingTop {
+  margin-top: 1.5em;
 }
 
-.emotion-7 .sel-c {
-  display: block;
+.emotion-24 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
 }
 
-.emotion-16 {
+.emotion-24 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-24 .t--opt {
+  color: #58585b !important;
+}
+
+.emotion-23 {
   margin-bottom: 2.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-13 {
+  .emotion-23 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-13 > div {
+.emotion-23 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-13 > div {
+  .emotion-23 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -68933,48 +79672,49 @@ Array [
   }
 }
 
-.emotion-13 > .RADIOGROUP label {
+.emotion-23 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-13 h3 {
+.emotion-23 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-13 .notice {
-  font-size: 0.7em;
+.emotion-23 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-13 .emotion-5:after {
+.emotion-23 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-19 {
+.emotion-33 {
   margin-top: 1em;
+  margin-bottom: 0.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-19 {
+  .emotion-33 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-19 > div {
+.emotion-33 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-19 > div {
+  .emotion-33 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -68982,49 +79722,118 @@ Array [
   }
 }
 
-.emotion-19 > .RADIOGROUP label {
+.emotion-33 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-19 h3 {
+.emotion-33 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-19 .notice {
-  font-size: 0.7em;
+.emotion-33 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-19 .emotion-5:after {
+.emotion-33 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-29 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
+.emotion-36 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-36 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-36 .icon::before {
+  content: '?';
+}
+
+.emotion-36 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-36 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-36 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-36 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-45 {
+  margin-bottom: 2.5em;
+}
+
+.emotion-45 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-45 h4 {
+  font-size: 1.25rem;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-29 {
+  .emotion-45 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-29 > div {
+.emotion-45 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-29 > div {
+  .emotion-45 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -69032,89 +79841,48 @@ Array [
   }
 }
 
-.emotion-29 > .RADIOGROUP label {
+.emotion-45 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-29 h3 {
+.emotion-45 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-29 .notice {
-  font-size: 0.7em;
+.emotion-45 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-29 .emotion-5:after {
+.emotion-45 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-28 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  padding-top: 1em;
-}
-
-.emotion-28 > label {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-left: 0;
-  margin-bottom: 1em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-28 .cb {
-    margin: 0;
-    margin-left: 0;
-    margin-bottom: 1em;
-  }
-
-  .emotion-28 .cb:not(:first-of-type) {
-    margin-left: 0;
-  }
-}
-
-.emotion-32 {
+.emotion-43 {
   margin-top: 1em;
-  padding-bottom: 2em;
-}
-
-.emotion-35 {
-  margin-bottom: 2.5em;
-}
-
-.emotion-35 h2 {
-  font-size: 1.5rem;
-}
-
-.emotion-35 h4 {
-  font-size: 1.25rem;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-35 {
+  .emotion-43 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-35 > div {
+.emotion-43 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-35 > div {
+  .emotion-43 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -69122,33 +79890,39 @@ Array [
   }
 }
 
-.emotion-35 > .RADIOGROUP label {
+.emotion-43 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-35 h3 {
+.emotion-43 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-35 .notice {
-  font-size: 0.7em;
+.emotion-43 .notice {
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
-.emotion-35 .emotion-5:after {
+.emotion-43 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-41 {
-  margin-bottom: 1.5em;
+.css-17tc7bx .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1nn14tl .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
 <div
@@ -69429,40 +80203,67 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-54"
+              className="b-c b-c--nbp emotion-51"
             >
               <div
-                className="emotion-51"
+                className="emotion-48"
               >
                 <fieldset
-                  className=" emotion-50"
+                  className=" emotion-47"
                 >
                   <legend>
                     <h2
                       className="emotion-4"
                     >
                       Person 
-                      B
+                      2
                     </h2>
                   </legend>
                   <div
-                    className="emotion-9"
+                    className="emotion-13"
                   >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Personal Information
+                      <div
+                        className="notice"
+                      >
+                        Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
+                      </div>
+                    </h1>
                     <div>
                       <label
                         className="txt-l "
                         htmlFor="input-2048906072"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                             }
                           }
                         >
                           First Name
                         </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         aria-label=""
@@ -69484,11 +80285,16 @@ Array [
                       <label
                         className="txt-l "
                         htmlFor="input-2852212527"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                             }
                           }
@@ -69497,9 +80303,9 @@ Array [
                         </span>
                       </label>
                       <label
-                        className="notice emotion-5"
+                        className="notice emotion-6"
                       >
-                        This is your current middle name if you have one. You may not list a new middle name.
+                        Please enter your middle name if you have one. You cannot list a new middle name.
                       </label>
                       <input
                         aria-label=""
@@ -69521,11 +80327,16 @@ Array [
                       <label
                         className="txt-l "
                         htmlFor="input-1103291528"
-                        style={Object {}}
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
                       >
                         <span
                           style={
                             Object {
+                              "display": "flex",
                               "marginRight": "0.5em",
                             }
                           }
@@ -69550,64 +80361,405 @@ Array [
                       </div>
                     </div>
                     <div
-                      className="emotion-7"
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          aria-labelledby="partnerB_useSurname-groupLabel"
+                          className="radio-group__label"
+                          role="group"
+                        >
+                          <div
+                            className="txt-l"
+                            id="partnerB_useSurname-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Would you like to change your last name?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+                              </div>
+                            </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-11"
                     >
                       <div>
                         <label
                           className="txt-l "
-                          htmlFor="input-1333361069"
-                          style={Object {}}
+                          htmlFor="select-2202529938"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
                           <span
                             style={
                               Object {
+                                "display": "flex",
                                 "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Suffix
+                          </span>
+                          <span
+                            className="t--req t--opt"
+                            style={
+                              Object {
+                                "display": "flex",
                               }
                             }
                           >
-                            Last Name / SURNAME to be used after marriage
+                            Optional
                           </span>
                         </label>
                         <label
-                          className="notice emotion-5"
+                          className="notice emotion-6"
                         >
-                          You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name.
+                          Please select your suffix if you have one.
                         </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-1333361069"
-                          maxLength={50}
-                          name="partnerB_surName"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
                         <div
-                          className="t--subinfo t--err m-b100 m-t100"
+                          className="sel-c  "
                         >
-                           
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-2202529938"
+                            name="partnerB_suffix"
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="I"
+                            >
+                              I
+                            </option>
+                            <option
+                              value="II"
+                            >
+                              II
+                            </option>
+                            <option
+                              value="III"
+                            >
+                              III
+                            </option>
+                            <option
+                              value="IV"
+                            >
+                              IV
+                            </option>
+                            <option
+                              value="V"
+                            >
+                              V
+                            </option>
+                            <option
+                              value="VI"
+                            >
+                              VI
+                            </option>
+                            <option
+                              value="Jr."
+                            >
+                              Jr.
+                            </option>
+                            <option
+                              value="Sr."
+                            >
+                              Sr.
+                            </option>
+                          </select>
                         </div>
                       </div>
                     </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2786084594"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Occupation
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                          <span
+                            className="tool-tip__wrapper emotion-7"
+                          >
+                            <div
+                              className="icon"
+                            />
+                            <div
+                              className="msg"
+                            >
+                              This information is collected as required by the Massachusetts State Marriage Intention Form.
+                            </div>
+                          </span>
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f  "
+                        id="input-2786084594"
+                        maxLength={100}
+                        name="partnerB_occupation"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-19"
+                  >
+                    <h1
+                      className="emotion-14"
+                    >
+                      Date and Place of Birth
+                    </h1>
+                    <fieldset
+                      className="emotion-17"
+                    >
+                      <div
+                        className="emotion-16"
+                      >
+                        <legend
+                          style={
+                            Object {
+                              "display": "none",
+                              "width": "100%",
+                            }
+                          }
+                        >
+                          Person B Date of Birth
+                        </legend>
+                        <div
+                          className=" emotion-15"
+                        >
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-month"
+                            >
+                              Month
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-month"
+                              max="12"
+                              maxLength={2}
+                              min="1"
+                              name="month"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="MM"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-day"
+                            >
+                              Day
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-day"
+                              max="31"
+                              maxLength={2}
+                              min="1"
+                              name="day"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="DD"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-year"
+                            >
+                              Year
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-year"
+                              max={2024}
+                              maxLength={4}
+                              min="1000"
+                              name="year"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="YYYY"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </fieldset>
                     <div
-                      className="emotion-7"
+                      className="emotion-11"
                     >
                       <div>
                         <label
                           className="txt-l "
-                          htmlFor="select-2202529938"
-                          style={Object {}}
+                          htmlFor="select-1817836307"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
                           <span
                             style={
                               Object {
+                                "display": "flex",
                                 "marginRight": "0.5em",
                                 "whiteSpace": "nowrap",
                               }
                             }
                           >
-                            Suffix
+                            Birthplace Country
+                          </span>
+                          <span
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Required
                           </span>
                         </label>
                         <div
@@ -69616,269 +80768,1279 @@ Array [
                           <select
                             aria-label=""
                             className="sel-f  "
-                            id="select-2202529938"
-                            name="partnerB_suffix"
+                            id="select-1817836307"
+                            name="partnerB_birthCountry"
+                            onBlur={[Function]}
                             onChange={[Function]}
                             value=""
                           >
                             <option />
                             <option
-                              value="N/A"
+                              value="USA"
+                            >
+                              United States of America
+                            </option>
+                            <option
+                              value="VIR"
+                            >
+                              United States Virgin Islands
+                            </option>
+                            <option
+                              value="AFG"
+                            >
+                              Afghanistan
+                            </option>
+                            <option
+                              value="ALA"
+                            >
+                              Åland Islands
+                            </option>
+                            <option
+                              value="ALB"
+                            >
+                              Albania
+                            </option>
+                            <option
+                              value="DZA"
+                            >
+                              Algeria
+                            </option>
+                            <option
+                              value="ASM"
+                            >
+                              American Samoa
+                            </option>
+                            <option
+                              value="AND"
+                            >
+                              Andorra
+                            </option>
+                            <option
+                              value="AGO"
+                            >
+                              Angola
+                            </option>
+                            <option
+                              value="AIA"
+                            >
+                              Anguilla
+                            </option>
+                            <option
+                              value="ATG"
+                            >
+                              Antigua and Barbuda
+                            </option>
+                            <option
+                              value="ARG"
+                            >
+                              Argentina
+                            </option>
+                            <option
+                              value="ARM"
+                            >
+                              Armenia
+                            </option>
+                            <option
+                              value="ABW"
+                            >
+                              Aruba
+                            </option>
+                            <option
+                              value="AUS"
+                            >
+                              Australia
+                            </option>
+                            <option
+                              value="AUT"
+                            >
+                              Austria
+                            </option>
+                            <option
+                              value="AZE"
+                            >
+                              Azerbaijan
+                            </option>
+                            <option
+                              value="BHS"
+                            >
+                              Bahamas
+                            </option>
+                            <option
+                              value="BHR"
+                            >
+                              Bahrain
+                            </option>
+                            <option
+                              value="BGD"
+                            >
+                              Bangladesh
+                            </option>
+                            <option
+                              value="BRB"
+                            >
+                              Barbados
+                            </option>
+                            <option
+                              value="BLR"
+                            >
+                              Belarus
+                            </option>
+                            <option
+                              value="BEL"
+                            >
+                              Belgium
+                            </option>
+                            <option
+                              value="BLZ"
+                            >
+                              Belize
+                            </option>
+                            <option
+                              value="BEN"
+                            >
+                              Benin
+                            </option>
+                            <option
+                              value="BMU"
+                            >
+                              Bermuda
+                            </option>
+                            <option
+                              value="BTN"
+                            >
+                              Bhutan
+                            </option>
+                            <option
+                              value="BOL"
+                            >
+                              Bolivia (Plurinational State of)
+                            </option>
+                            <option
+                              value="BES"
+                            >
+                              Bonaire, Saint Eustatius and Saba
+                            </option>
+                            <option
+                              value="BIH"
+                            >
+                              Bosnia and Herzegovina
+                            </option>
+                            <option
+                              value="BWA"
+                            >
+                              Botswana
+                            </option>
+                            <option
+                              value="BRA"
+                            >
+                              Brazil
+                            </option>
+                            <option
+                              value="VGB"
+                            >
+                              British Virgin Islands
+                            </option>
+                            <option
+                              value="BRN"
+                            >
+                              Brunei Darussalam
+                            </option>
+                            <option
+                              value="BGR"
+                            >
+                              Bulgaria
+                            </option>
+                            <option
+                              value="BFA"
+                            >
+                              Burkina Faso
+                            </option>
+                            <option
+                              value="BDI"
+                            >
+                              Burundi
+                            </option>
+                            <option
+                              value="CPV"
+                            >
+                              Cabo Verde
+                            </option>
+                            <option
+                              value="KHM"
+                            >
+                              Cambodia
+                            </option>
+                            <option
+                              value="CMR"
+                            >
+                              Cameroon
+                            </option>
+                            <option
+                              value="CAN"
+                            >
+                              Canada
+                            </option>
+                            <option
+                              value="CYM"
+                            >
+                              Cayman Islands
+                            </option>
+                            <option
+                              value="CAF"
+                            >
+                              Central African Republic
+                            </option>
+                            <option
+                              value="TCD"
+                            >
+                              Chad
+                            </option>
+                            <option
+                              value="CHL"
+                            >
+                              Chile
+                            </option>
+                            <option
+                              value="CHN"
+                            >
+                              China
+                            </option>
+                            <option
+                              value="HKG"
+                            >
+                              China, Hong Kong Special Administrative Region
+                            </option>
+                            <option
+                              value="MAC"
+                            >
+                              China, Macao Special Administrative Region
+                            </option>
+                            <option
+                              value="COL"
+                            >
+                              Colombia
+                            </option>
+                            <option
+                              value="COM"
+                            >
+                              Comoros
+                            </option>
+                            <option
+                              value="COG"
+                            >
+                              Congo
+                            </option>
+                            <option
+                              value="COK"
+                            >
+                              Cook Islands
+                            </option>
+                            <option
+                              value="CRI"
+                            >
+                              Costa Rica
+                            </option>
+                            <option
+                              value="CIV"
+                            >
+                              Côte d'Ivoire
+                            </option>
+                            <option
+                              value="HRV"
+                            >
+                              Croatia
+                            </option>
+                            <option
+                              value="CUB"
+                            >
+                              Cuba
+                            </option>
+                            <option
+                              value="CUW"
+                            >
+                              Curaçao
+                            </option>
+                            <option
+                              value="CYP"
+                            >
+                              Cyprus
+                            </option>
+                            <option
+                              value="CZE"
+                            >
+                              Czech Republic
+                            </option>
+                            <option
+                              value="PRK"
+                            >
+                              Democratic People's Republic of Korea
+                            </option>
+                            <option
+                              value="COD"
+                            >
+                              Democratic Republic of the Congo
+                            </option>
+                            <option
+                              value="DNK"
+                            >
+                              Denmark
+                            </option>
+                            <option
+                              value="DJI"
+                            >
+                              Djibouti
+                            </option>
+                            <option
+                              value="DMA"
+                            >
+                              Dominica
+                            </option>
+                            <option
+                              value="DOM"
+                            >
+                              Dominican Republic
+                            </option>
+                            <option
+                              value="ECU"
+                            >
+                              Ecuador
+                            </option>
+                            <option
+                              value="EGY"
+                            >
+                              Egypt
+                            </option>
+                            <option
+                              value="SLV"
+                            >
+                              El Salvador
+                            </option>
+                            <option
+                              value="GNQ"
+                            >
+                              Equatorial Guinea
+                            </option>
+                            <option
+                              value="ERI"
+                            >
+                              Eritrea
+                            </option>
+                            <option
+                              value="EST"
+                            >
+                              Estonia
+                            </option>
+                            <option
+                              value="ETH"
+                            >
+                              Ethiopia
+                            </option>
+                            <option
+                              value="FRO"
+                            >
+                              Faeroe Islands
+                            </option>
+                            <option
+                              value="FLK"
+                            >
+                              Falkland Islands (Malvinas)
+                            </option>
+                            <option
+                              value="FJI"
+                            >
+                              Fiji
+                            </option>
+                            <option
+                              value="FIN"
+                            >
+                              Finland
+                            </option>
+                            <option
+                              value="FRA"
+                            >
+                              France
+                            </option>
+                            <option
+                              value="GUF"
+                            >
+                              French Guiana
+                            </option>
+                            <option
+                              value="PYF"
+                            >
+                              French Polynesia
+                            </option>
+                            <option
+                              value="GAB"
+                            >
+                              Gabon
+                            </option>
+                            <option
+                              value="GMB"
+                            >
+                              Gambia
+                            </option>
+                            <option
+                              value="GEO"
+                            >
+                              Georgia
+                            </option>
+                            <option
+                              value="DEU"
+                            >
+                              Germany
+                            </option>
+                            <option
+                              value="GHA"
+                            >
+                              Ghana
+                            </option>
+                            <option
+                              value="GIB"
+                            >
+                              Gibraltar
+                            </option>
+                            <option
+                              value="GRC"
+                            >
+                              Greece
+                            </option>
+                            <option
+                              value="GRL"
+                            >
+                              Greenland
+                            </option>
+                            <option
+                              value="GRD"
+                            >
+                              Grenada
+                            </option>
+                            <option
+                              value="GLP"
+                            >
+                              Guadeloupe
+                            </option>
+                            <option
+                              value="GUM"
+                            >
+                              Guam
+                            </option>
+                            <option
+                              value="GTM"
+                            >
+                              Guatemala
+                            </option>
+                            <option
+                              value="GGY"
+                            >
+                              Guernsey
+                            </option>
+                            <option
+                              value="GIN"
+                            >
+                              Guinea
+                            </option>
+                            <option
+                              value="GNB"
+                            >
+                              Guinea-Bissau
+                            </option>
+                            <option
+                              value="GUY"
+                            >
+                              Guyana
+                            </option>
+                            <option
+                              value="HTI"
+                            >
+                              Haiti
+                            </option>
+                            <option
+                              value="VAT"
+                            >
+                              Holy See
+                            </option>
+                            <option
+                              value="HND"
+                            >
+                              Honduras
+                            </option>
+                            <option
+                              value="HUN"
+                            >
+                              Hungary
+                            </option>
+                            <option
+                              value="ISL"
+                            >
+                              Iceland
+                            </option>
+                            <option
+                              value="IND"
+                            >
+                              India
+                            </option>
+                            <option
+                              value="IDN"
+                            >
+                              Indonesia
+                            </option>
+                            <option
+                              value="IRN"
+                            >
+                              Iran (Islamic Republic of)
+                            </option>
+                            <option
+                              value="IRQ"
+                            >
+                              Iraq
+                            </option>
+                            <option
+                              value="IRL"
+                            >
+                              Ireland
+                            </option>
+                            <option
+                              value="IMN"
+                            >
+                              Isle of Man
+                            </option>
+                            <option
+                              value="ISR"
+                            >
+                              Israel
+                            </option>
+                            <option
+                              value="ITA"
+                            >
+                              Italy
+                            </option>
+                            <option
+                              value="JAM"
+                            >
+                              Jamaica
+                            </option>
+                            <option
+                              value="JPN"
+                            >
+                              Japan
+                            </option>
+                            <option
+                              value="JEY"
+                            >
+                              Jersey
+                            </option>
+                            <option
+                              value="JOR"
+                            >
+                              Jordan
+                            </option>
+                            <option
+                              value="KAZ"
+                            >
+                              Kazakhstan
+                            </option>
+                            <option
+                              value="KEN"
+                            >
+                              Kenya
+                            </option>
+                            <option
+                              value="KIR"
+                            >
+                              Kiribati
+                            </option>
+                            <option
+                              value="KWT"
+                            >
+                              Kuwait
+                            </option>
+                            <option
+                              value="KGZ"
+                            >
+                              Kyrgyzstan
+                            </option>
+                            <option
+                              value="LAO"
+                            >
+                              Lao People's Democratic Republic
+                            </option>
+                            <option
+                              value="LVA"
+                            >
+                              Latvia
+                            </option>
+                            <option
+                              value="LBN"
+                            >
+                              Lebanon
+                            </option>
+                            <option
+                              value="LSO"
+                            >
+                              Lesotho
+                            </option>
+                            <option
+                              value="LBR"
+                            >
+                              Liberia
+                            </option>
+                            <option
+                              value="LBY"
+                            >
+                              Libya
+                            </option>
+                            <option
+                              value="LIE"
+                            >
+                              Liechtenstein
+                            </option>
+                            <option
+                              value="LTU"
+                            >
+                              Lithuania
+                            </option>
+                            <option
+                              value="LUX"
+                            >
+                              Luxembourg
+                            </option>
+                            <option
+                              value="MDG"
+                            >
+                              Madagascar
+                            </option>
+                            <option
+                              value="MWI"
+                            >
+                              Malawi
+                            </option>
+                            <option
+                              value="MYS"
+                            >
+                              Malaysia
+                            </option>
+                            <option
+                              value="MDV"
+                            >
+                              Maldives
+                            </option>
+                            <option
+                              value="MLI"
+                            >
+                              Mali
+                            </option>
+                            <option
+                              value="MLT"
+                            >
+                              Malta
+                            </option>
+                            <option
+                              value="MHL"
+                            >
+                              Marshall Islands
+                            </option>
+                            <option
+                              value="MTQ"
+                            >
+                              Martinique
+                            </option>
+                            <option
+                              value="MRT"
+                            >
+                              Mauritania
+                            </option>
+                            <option
+                              value="MUS"
+                            >
+                              Mauritius
+                            </option>
+                            <option
+                              value="MYT"
+                            >
+                              Mayotte
+                            </option>
+                            <option
+                              value="MEX"
+                            >
+                              Mexico
+                            </option>
+                            <option
+                              value="FSM"
+                            >
+                              Micronesia (Federated States of)
+                            </option>
+                            <option
+                              value="MCO"
+                            >
+                              Monaco
+                            </option>
+                            <option
+                              value="MNG"
+                            >
+                              Mongolia
+                            </option>
+                            <option
+                              value="MNE"
+                            >
+                              Montenegro
+                            </option>
+                            <option
+                              value="MSR"
+                            >
+                              Montserrat
+                            </option>
+                            <option
+                              value="MAR"
+                            >
+                              Morocco
+                            </option>
+                            <option
+                              value="MOZ"
+                            >
+                              Mozambique
+                            </option>
+                            <option
+                              value="MMR"
+                            >
+                              Myanmar
+                            </option>
+                            <option
+                              value="NAM"
+                            >
+                              Namibia
+                            </option>
+                            <option
+                              value="NRU"
+                            >
+                              Nauru
+                            </option>
+                            <option
+                              value="NPL"
+                            >
+                              Nepal
+                            </option>
+                            <option
+                              value="NLD"
+                            >
+                              Netherlands
+                            </option>
+                            <option
+                              value="NCL"
+                            >
+                              New Caledonia
+                            </option>
+                            <option
+                              value="NZL"
+                            >
+                              New Zealand
+                            </option>
+                            <option
+                              value="NIC"
+                            >
+                              Nicaragua
+                            </option>
+                            <option
+                              value="NER"
+                            >
+                              Niger
+                            </option>
+                            <option
+                              value="NGA"
+                            >
+                              Nigeria
+                            </option>
+                            <option
+                              value="NIU"
+                            >
+                              Niue
+                            </option>
+                            <option
+                              value="NFK"
+                            >
+                              Norfolk Island
+                            </option>
+                            <option
+                              value="MNP"
+                            >
+                              Northern Mariana Islands
+                            </option>
+                            <option
+                              value="NOR"
+                            >
+                              Norway
+                            </option>
+                            <option
+                              value="OMN"
+                            >
+                              Oman
+                            </option>
+                            <option
+                              value="PAK"
+                            >
+                              Pakistan
+                            </option>
+                            <option
+                              value="PLW"
+                            >
+                              Palau
+                            </option>
+                            <option
+                              value="PAN"
+                            >
+                              Panama
+                            </option>
+                            <option
+                              value="PNG"
+                            >
+                              Papua New Guinea
+                            </option>
+                            <option
+                              value="PRY"
+                            >
+                              Paraguay
+                            </option>
+                            <option
+                              value="PER"
+                            >
+                              Peru
+                            </option>
+                            <option
+                              value="PHL"
+                            >
+                              Philippines
+                            </option>
+                            <option
+                              value="PCN"
+                            >
+                              Pitcairn
+                            </option>
+                            <option
+                              value="POL"
+                            >
+                              Poland
+                            </option>
+                            <option
+                              value="PRT"
+                            >
+                              Portugal
+                            </option>
+                            <option
+                              value="PRI"
+                            >
+                              Puerto Rico
+                            </option>
+                            <option
+                              value="QAT"
+                            >
+                              Qatar
+                            </option>
+                            <option
+                              value="KOR"
+                            >
+                              Republic of Korea
+                            </option>
+                            <option
+                              value="MDA"
+                            >
+                              Republic of Moldova
+                            </option>
+                            <option
+                              value="REU"
+                            >
+                              Réunion
+                            </option>
+                            <option
+                              value="ROU"
+                            >
+                              Romania
+                            </option>
+                            <option
+                              value="RUS"
+                            >
+                              Russian Federation
+                            </option>
+                            <option
+                              value="RWA"
+                            >
+                              Rwanda
+                            </option>
+                            <option
+                              value="BLM"
+                            >
+                              Saint-Barthélemy
+                            </option>
+                            <option
+                              value="SHN"
+                            >
+                              Saint Helena
+                            </option>
+                            <option
+                              value="KNA"
+                            >
+                              Saint Kitts and Nevis
+                            </option>
+                            <option
+                              value="LCA"
+                            >
+                              Saint Lucia
+                            </option>
+                            <option
+                              value="MAF"
+                            >
+                              Saint-Martin (French part)
+                            </option>
+                            <option
+                              value="SPM"
+                            >
+                              Saint Pierre and Miquelon
+                            </option>
+                            <option
+                              value="VCT"
+                            >
+                              Saint Vincent and the Grenadines
+                            </option>
+                            <option
+                              value="WSM"
+                            >
+                              Samoa
+                            </option>
+                            <option
+                              value="SMR"
+                            >
+                              San Marino
+                            </option>
+                            <option
+                              value="STP"
+                            >
+                              Sao Tome and Principe
+                            </option>
+                            <option
+                              value="SAU"
+                            >
+                              Saudi Arabia
+                            </option>
+                            <option
+                              value="SEN"
+                            >
+                              Senegal
+                            </option>
+                            <option
+                              value="SRB"
+                            >
+                              Serbia
+                            </option>
+                            <option
+                              value="SYC"
+                            >
+                              Seychelles
+                            </option>
+                            <option
+                              value="SLE"
+                            >
+                              Sierra Leone
+                            </option>
+                            <option
+                              value="SGP"
+                            >
+                              Singapore
+                            </option>
+                            <option
+                              value="SXM"
+                            >
+                              Sint Maarten (Dutch part)
+                            </option>
+                            <option
+                              value="SVK"
+                            >
+                              Slovakia
+                            </option>
+                            <option
+                              value="SVN"
+                            >
+                              Slovenia
+                            </option>
+                            <option
+                              value="SLB"
+                            >
+                              Solomon Islands
+                            </option>
+                            <option
+                              value="SOM"
+                            >
+                              Somalia
+                            </option>
+                            <option
+                              value="ZAF"
+                            >
+                              South Africa
+                            </option>
+                            <option
+                              value="SSD"
+                            >
+                              South Sudan
+                            </option>
+                            <option
+                              value="ESP"
+                            >
+                              Spain
+                            </option>
+                            <option
+                              value="LKA"
+                            >
+                              Sri Lanka
+                            </option>
+                            <option
+                              value="PSE"
+                            >
+                              State of Palestine
+                            </option>
+                            <option
+                              value="SDN"
+                            >
+                              Sudan
+                            </option>
+                            <option
+                              value="SUR"
+                            >
+                              Suriname
+                            </option>
+                            <option
+                              value="SJM"
                             >
-                              Does Not Apply
+                              Svalbard and Jan Mayen Islands
                             </option>
                             <option
-                              value="I"
+                              value="SWZ"
                             >
-                              I
+                              Swaziland
                             </option>
                             <option
-                              value="II"
+                              value="SWE"
                             >
-                              II
+                              Sweden
                             </option>
                             <option
-                              value="III"
+                              value="CHE"
                             >
-                              III
+                              Switzerland
                             </option>
                             <option
-                              value="IV"
+                              value="SYR"
                             >
-                              IV
+                              Syrian Arab Republic
                             </option>
                             <option
-                              value="V"
+                              value="TWAN"
                             >
-                              V
+                              Taiwan
                             </option>
                             <option
-                              value="VI"
+                              value="TJK"
                             >
-                              VI
+                              Tajikistan
                             </option>
                             <option
-                              value="Jr."
+                              value="THA"
                             >
-                              Jr.
+                              Thailand
                             </option>
                             <option
-                              value="Sr."
+                              value="MKD"
                             >
-                              Sr.
+                              The former Yugoslav Republic of Macedonia
+                            </option>
+                            <option
+                              value="TLS"
+                            >
+                              Timor-Leste
+                            </option>
+                            <option
+                              value="TGO"
+                            >
+                              Togo
+                            </option>
+                            <option
+                              value="TKL"
+                            >
+                              Tokelau
+                            </option>
+                            <option
+                              value="TON"
+                            >
+                              Tonga
+                            </option>
+                            <option
+                              value="TTO"
+                            >
+                              Trinidad and Tobago
+                            </option>
+                            <option
+                              value="TUN"
+                            >
+                              Tunisia
+                            </option>
+                            <option
+                              value="TUR"
+                            >
+                              Turkey
+                            </option>
+                            <option
+                              value="TKM"
+                            >
+                              Turkmenistan
+                            </option>
+                            <option
+                              value="TCA"
+                            >
+                              Turks and Caicos Islands
+                            </option>
+                            <option
+                              value="TUV"
+                            >
+                              Tuvalu
+                            </option>
+                            <option
+                              value="UGA"
+                            >
+                              Uganda
+                            </option>
+                            <option
+                              value="UKR"
+                            >
+                              Ukraine
+                            </option>
+                            <option
+                              value="ARE"
+                            >
+                              United Arab Emirates
+                            </option>
+                            <option
+                              value="GBR"
+                            >
+                              United Kingdom of Great Britain and Northern Ireland
+                            </option>
+                            <option
+                              value="TZA"
+                            >
+                              United Republic of Tanzania
+                            </option>
+                            <option
+                              value="URY"
+                            >
+                              Uruguay
+                            </option>
+                            <option
+                              value="UZB"
+                            >
+                              Uzbekistan
+                            </option>
+                            <option
+                              value="VUT"
+                            >
+                              Vanuatu
+                            </option>
+                            <option
+                              value="VEN"
+                            >
+                              Venezuela (Bolivarian Republic of)
+                            </option>
+                            <option
+                              value="VNM"
+                            >
+                              Vietnam
+                            </option>
+                            <option
+                              value="WLF"
+                            >
+                              Wallis and Futuna Islands
+                            </option>
+                            <option
+                              value="ESH"
+                            >
+                              Western Sahara
+                            </option>
+                            <option
+                              value="YEM"
+                            >
+                              Yemen
+                            </option>
+                            <option
+                              value="ZMB"
+                            >
+                              Zambia
+                            </option>
+                            <option
+                              value="ZWE"
+                            >
+                              Zimbabwe
                             </option>
                           </select>
                         </div>
                       </div>
                     </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2786084594"
-                        style={Object {}}
-                      >
-                        <span
-                          style={
-                            Object {
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Occupation
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f  "
-                        id="input-2786084594"
-                        maxLength={100}
-                        name="partnerB_occupation"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
+                    
                   </div>
                   <div
-                    className="emotion-16"
+                    className="emotion-24"
                   >
-                    <div
-                      className="emotion-13"
+                    <h1
+                      className="emotion-5"
                     >
-                      <h2
-                        className="emotion-4"
-                        style={
-                          Object {
-                            "marginBottom": "1.5rem",
-                          }
-                        }
-                      >
-                        Date of Birth
-                      </h2>
-                      <fieldset
-                        className="emotion-12"
+                      Residence
+                      <div
+                        className="notice"
                       >
-                        <div>
-                          <legend
-                            style={
-                              Object {
-                                "display": "none",
-                                "width": "100%",
-                              }
-                            }
-                          >
-                            Person B Date of Birth
-                          </legend>
-                          <div
-                            className=" emotion-11"
-                          >
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="dob-month"
-                              >
-                                Month
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="dob-month"
-                                max="12"
-                                maxLength={2}
-                                min="1"
-                                name="month"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="MM"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="dob-day"
-                              >
-                                Day
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="dob-day"
-                                max="31"
-                                maxLength={2}
-                                min="1"
-                                name="day"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="DD"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="dob-year"
-                              >
-                                Year
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="dob-year"
-                                max={2024}
-                                maxLength={4}
-                                min="1000"
-                                name="year"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="YYYY"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </fieldset>
-                    </div>
-                    <div
-                      className="emotion-13"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-193405638"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Age
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-5"
-                        >
-                          Your age will be automatically calculated based on your date of birth.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          disabled={true}
-                          id="input-193405638"
-                          maxLength={2}
-                          name="partnerB_age"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
+                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
                       </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
+                    </h1>
                     <div
-                      className="emotion-19"
+                      className="emotion-23"
                     >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Birthplace
-                      </h2>
                       <div
-                        className="emotion-7"
+                        className="emotion-11"
                       >
                         <div>
                           <label
                             className="txt-l "
-                            htmlFor="select-1817836307"
-                            style={Object {}}
+                            htmlFor="select-3475791712"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
                             <span
                               style={
                                 Object {
+                                  "display": "flex",
                                   "marginRight": "0.5em",
-                                  "whiteSpace": "nowrap",
                                 }
                               }
                             >
-                              Birthplace Country
+                              Country of Residence
+                            </span>
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Required
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+                                </div>
+                              </span>
                             </span>
                           </label>
                           <div
@@ -69887,9 +82049,8 @@ Array [
                             <select
                               aria-label=""
                               className="sel-f  "
-                              id="select-1817836307"
-                              name="partnerB_birthCountry"
-                              onBlur={[Function]}
+                              id="select-3475791712"
+                              name="partnerB_residenceCountry"
                               onChange={[Function]}
                               value=""
                             >
@@ -70582,1923 +82743,595 @@ Array [
                               <option
                                 value="MEX"
                               >
-                                Mexico
-                              </option>
-                              <option
-                                value="FSM"
-                              >
-                                Micronesia (Federated States of)
-                              </option>
-                              <option
-                                value="MCO"
-                              >
-                                Monaco
-                              </option>
-                              <option
-                                value="MNG"
-                              >
-                                Mongolia
-                              </option>
-                              <option
-                                value="MNE"
-                              >
-                                Montenegro
-                              </option>
-                              <option
-                                value="MSR"
-                              >
-                                Montserrat
-                              </option>
-                              <option
-                                value="MAR"
-                              >
-                                Morocco
-                              </option>
-                              <option
-                                value="MOZ"
-                              >
-                                Mozambique
-                              </option>
-                              <option
-                                value="MMR"
-                              >
-                                Myanmar
-                              </option>
-                              <option
-                                value="NAM"
-                              >
-                                Namibia
-                              </option>
-                              <option
-                                value="NRU"
-                              >
-                                Nauru
-                              </option>
-                              <option
-                                value="NPL"
-                              >
-                                Nepal
-                              </option>
-                              <option
-                                value="NLD"
-                              >
-                                Netherlands
-                              </option>
-                              <option
-                                value="NCL"
-                              >
-                                New Caledonia
-                              </option>
-                              <option
-                                value="NZL"
-                              >
-                                New Zealand
-                              </option>
-                              <option
-                                value="NIC"
-                              >
-                                Nicaragua
-                              </option>
-                              <option
-                                value="NER"
-                              >
-                                Niger
-                              </option>
-                              <option
-                                value="NGA"
-                              >
-                                Nigeria
-                              </option>
-                              <option
-                                value="NIU"
-                              >
-                                Niue
-                              </option>
-                              <option
-                                value="NFK"
-                              >
-                                Norfolk Island
-                              </option>
-                              <option
-                                value="MNP"
-                              >
-                                Northern Mariana Islands
-                              </option>
-                              <option
-                                value="NOR"
-                              >
-                                Norway
-                              </option>
-                              <option
-                                value="OMN"
-                              >
-                                Oman
-                              </option>
-                              <option
-                                value="PAK"
-                              >
-                                Pakistan
-                              </option>
-                              <option
-                                value="PLW"
-                              >
-                                Palau
-                              </option>
-                              <option
-                                value="PAN"
-                              >
-                                Panama
-                              </option>
-                              <option
-                                value="PNG"
-                              >
-                                Papua New Guinea
-                              </option>
-                              <option
-                                value="PRY"
-                              >
-                                Paraguay
-                              </option>
-                              <option
-                                value="PER"
-                              >
-                                Peru
-                              </option>
-                              <option
-                                value="PHL"
-                              >
-                                Philippines
-                              </option>
-                              <option
-                                value="PCN"
-                              >
-                                Pitcairn
-                              </option>
-                              <option
-                                value="POL"
-                              >
-                                Poland
-                              </option>
-                              <option
-                                value="PRT"
-                              >
-                                Portugal
-                              </option>
-                              <option
-                                value="PRI"
-                              >
-                                Puerto Rico
-                              </option>
-                              <option
-                                value="QAT"
-                              >
-                                Qatar
-                              </option>
-                              <option
-                                value="KOR"
-                              >
-                                Republic of Korea
-                              </option>
-                              <option
-                                value="MDA"
-                              >
-                                Republic of Moldova
-                              </option>
-                              <option
-                                value="REU"
-                              >
-                                Réunion
-                              </option>
-                              <option
-                                value="ROU"
-                              >
-                                Romania
-                              </option>
-                              <option
-                                value="RUS"
-                              >
-                                Russian Federation
-                              </option>
-                              <option
-                                value="RWA"
-                              >
-                                Rwanda
-                              </option>
-                              <option
-                                value="BLM"
-                              >
-                                Saint-Barthélemy
-                              </option>
-                              <option
-                                value="SHN"
-                              >
-                                Saint Helena
-                              </option>
-                              <option
-                                value="KNA"
-                              >
-                                Saint Kitts and Nevis
-                              </option>
-                              <option
-                                value="LCA"
-                              >
-                                Saint Lucia
-                              </option>
-                              <option
-                                value="MAF"
-                              >
-                                Saint-Martin (French part)
-                              </option>
-                              <option
-                                value="SPM"
-                              >
-                                Saint Pierre and Miquelon
-                              </option>
-                              <option
-                                value="VCT"
-                              >
-                                Saint Vincent and the Grenadines
-                              </option>
-                              <option
-                                value="WSM"
-                              >
-                                Samoa
+                                Mexico
                               </option>
                               <option
-                                value="SMR"
+                                value="FSM"
                               >
-                                San Marino
+                                Micronesia (Federated States of)
                               </option>
                               <option
-                                value="STP"
+                                value="MCO"
                               >
-                                Sao Tome and Principe
+                                Monaco
                               </option>
                               <option
-                                value="SAU"
+                                value="MNG"
                               >
-                                Saudi Arabia
+                                Mongolia
                               </option>
                               <option
-                                value="SEN"
+                                value="MNE"
                               >
-                                Senegal
+                                Montenegro
                               </option>
                               <option
-                                value="SRB"
+                                value="MSR"
                               >
-                                Serbia
+                                Montserrat
                               </option>
                               <option
-                                value="SYC"
+                                value="MAR"
                               >
-                                Seychelles
+                                Morocco
                               </option>
                               <option
-                                value="SLE"
+                                value="MOZ"
                               >
-                                Sierra Leone
+                                Mozambique
                               </option>
                               <option
-                                value="SGP"
+                                value="MMR"
                               >
-                                Singapore
+                                Myanmar
                               </option>
                               <option
-                                value="SXM"
+                                value="NAM"
                               >
-                                Sint Maarten (Dutch part)
+                                Namibia
                               </option>
                               <option
-                                value="SVK"
+                                value="NRU"
                               >
-                                Slovakia
+                                Nauru
                               </option>
                               <option
-                                value="SVN"
+                                value="NPL"
                               >
-                                Slovenia
+                                Nepal
                               </option>
                               <option
-                                value="SLB"
+                                value="NLD"
                               >
-                                Solomon Islands
+                                Netherlands
                               </option>
                               <option
-                                value="SOM"
+                                value="NCL"
                               >
-                                Somalia
+                                New Caledonia
                               </option>
                               <option
-                                value="ZAF"
+                                value="NZL"
                               >
-                                South Africa
+                                New Zealand
                               </option>
                               <option
-                                value="SSD"
+                                value="NIC"
                               >
-                                South Sudan
+                                Nicaragua
                               </option>
                               <option
-                                value="ESP"
+                                value="NER"
                               >
-                                Spain
+                                Niger
                               </option>
                               <option
-                                value="LKA"
+                                value="NGA"
                               >
-                                Sri Lanka
+                                Nigeria
                               </option>
                               <option
-                                value="PSE"
+                                value="NIU"
                               >
-                                State of Palestine
+                                Niue
                               </option>
                               <option
-                                value="SDN"
+                                value="NFK"
                               >
-                                Sudan
+                                Norfolk Island
                               </option>
                               <option
-                                value="SUR"
+                                value="MNP"
                               >
-                                Suriname
+                                Northern Mariana Islands
                               </option>
                               <option
-                                value="SJM"
+                                value="NOR"
                               >
-                                Svalbard and Jan Mayen Islands
+                                Norway
                               </option>
                               <option
-                                value="SWZ"
+                                value="OMN"
                               >
-                                Swaziland
+                                Oman
                               </option>
                               <option
-                                value="SWE"
+                                value="PAK"
                               >
-                                Sweden
+                                Pakistan
                               </option>
                               <option
-                                value="CHE"
+                                value="PLW"
                               >
-                                Switzerland
+                                Palau
                               </option>
                               <option
-                                value="SYR"
+                                value="PAN"
                               >
-                                Syrian Arab Republic
+                                Panama
                               </option>
                               <option
-                                value="TWAN"
+                                value="PNG"
                               >
-                                Taiwan
+                                Papua New Guinea
                               </option>
                               <option
-                                value="TJK"
+                                value="PRY"
                               >
-                                Tajikistan
+                                Paraguay
                               </option>
                               <option
-                                value="THA"
+                                value="PER"
                               >
-                                Thailand
+                                Peru
                               </option>
                               <option
-                                value="MKD"
+                                value="PHL"
                               >
-                                The former Yugoslav Republic of Macedonia
+                                Philippines
                               </option>
                               <option
-                                value="TLS"
+                                value="PCN"
                               >
-                                Timor-Leste
+                                Pitcairn
                               </option>
                               <option
-                                value="TGO"
+                                value="POL"
                               >
-                                Togo
+                                Poland
                               </option>
                               <option
-                                value="TKL"
+                                value="PRT"
                               >
-                                Tokelau
+                                Portugal
                               </option>
                               <option
-                                value="TON"
+                                value="PRI"
                               >
-                                Tonga
+                                Puerto Rico
                               </option>
                               <option
-                                value="TTO"
+                                value="QAT"
                               >
-                                Trinidad and Tobago
+                                Qatar
                               </option>
                               <option
-                                value="TUN"
+                                value="KOR"
                               >
-                                Tunisia
+                                Republic of Korea
                               </option>
                               <option
-                                value="TUR"
+                                value="MDA"
                               >
-                                Turkey
+                                Republic of Moldova
                               </option>
                               <option
-                                value="TKM"
+                                value="REU"
                               >
-                                Turkmenistan
+                                Réunion
                               </option>
                               <option
-                                value="TCA"
+                                value="ROU"
                               >
-                                Turks and Caicos Islands
+                                Romania
                               </option>
                               <option
-                                value="TUV"
+                                value="RUS"
                               >
-                                Tuvalu
+                                Russian Federation
                               </option>
                               <option
-                                value="UGA"
+                                value="RWA"
                               >
-                                Uganda
+                                Rwanda
                               </option>
                               <option
-                                value="UKR"
+                                value="BLM"
                               >
-                                Ukraine
+                                Saint-Barthélemy
                               </option>
                               <option
-                                value="ARE"
+                                value="SHN"
                               >
-                                United Arab Emirates
+                                Saint Helena
                               </option>
                               <option
-                                value="GBR"
+                                value="KNA"
                               >
-                                United Kingdom of Great Britain and Northern Ireland
+                                Saint Kitts and Nevis
                               </option>
                               <option
-                                value="TZA"
+                                value="LCA"
                               >
-                                United Republic of Tanzania
+                                Saint Lucia
                               </option>
                               <option
-                                value="URY"
+                                value="MAF"
                               >
-                                Uruguay
+                                Saint-Martin (French part)
                               </option>
                               <option
-                                value="UZB"
+                                value="SPM"
                               >
-                                Uzbekistan
+                                Saint Pierre and Miquelon
                               </option>
                               <option
-                                value="VUT"
+                                value="VCT"
                               >
-                                Vanuatu
+                                Saint Vincent and the Grenadines
                               </option>
                               <option
-                                value="VEN"
+                                value="WSM"
                               >
-                                Venezuela (Bolivarian Republic of)
+                                Samoa
                               </option>
                               <option
-                                value="VNM"
+                                value="SMR"
                               >
-                                Vietnam
+                                San Marino
                               </option>
                               <option
-                                value="WLF"
+                                value="STP"
                               >
-                                Wallis and Futuna Islands
+                                Sao Tome and Principe
                               </option>
                               <option
-                                value="ESH"
+                                value="SAU"
                               >
-                                Western Sahara
+                                Saudi Arabia
                               </option>
                               <option
-                                value="YEM"
+                                value="SEN"
                               >
-                                Yemen
+                                Senegal
                               </option>
                               <option
-                                value="ZMB"
+                                value="SRB"
                               >
-                                Zambia
+                                Serbia
                               </option>
                               <option
-                                value="ZWE"
+                                value="SYC"
                               >
-                                Zimbabwe
+                                Seychelles
                               </option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                      
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
-                    <div
-                      className="emotion-13"
-                    >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Residence
-                      </h2>
-                    </div>
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-7"
-                      >
-                        <div
-                          className="fs-c m-b300"
-                        >
-                          <div
-                            className="sel"
-                          >
-                            <div>
-                              <label
-                                className="txt-l "
-                                htmlFor="select-3550464744"
-                                style={Object {}}
+                              <option
+                                value="SLE"
                               >
-                                <span
-                                  style={
-                                    Object {
-                                      "marginRight": "0.5em",
-                                    }
-                                  }
-                                >
-                                  Select Country of Residence
-                                </span>
-                              </label>
-                              <div
-                                className="sel-c  "
-                              >
-                                <select
-                                  aria-label=""
-                                  className="sel-f  "
-                                  id="select-3550464744"
-                                  name="partnerB_residenceCountry"
-                                  onChange={[Function]}
-                                  value=""
-                                >
-                                  <option />
-                                  <option
-                                    value="USA"
-                                  >
-                                    United States of America
-                                  </option>
-                                  <option
-                                    value="VIR"
-                                  >
-                                    United States Virgin Islands
-                                  </option>
-                                  <option
-                                    value="AFG"
-                                  >
-                                    Afghanistan
-                                  </option>
-                                  <option
-                                    value="ALA"
-                                  >
-                                    Åland Islands
-                                  </option>
-                                  <option
-                                    value="ALB"
-                                  >
-                                    Albania
-                                  </option>
-                                  <option
-                                    value="DZA"
-                                  >
-                                    Algeria
-                                  </option>
-                                  <option
-                                    value="ASM"
-                                  >
-                                    American Samoa
-                                  </option>
-                                  <option
-                                    value="AND"
-                                  >
-                                    Andorra
-                                  </option>
-                                  <option
-                                    value="AGO"
-                                  >
-                                    Angola
-                                  </option>
-                                  <option
-                                    value="AIA"
-                                  >
-                                    Anguilla
-                                  </option>
-                                  <option
-                                    value="ATG"
-                                  >
-                                    Antigua and Barbuda
-                                  </option>
-                                  <option
-                                    value="ARG"
-                                  >
-                                    Argentina
-                                  </option>
-                                  <option
-                                    value="ARM"
-                                  >
-                                    Armenia
-                                  </option>
-                                  <option
-                                    value="ABW"
-                                  >
-                                    Aruba
-                                  </option>
-                                  <option
-                                    value="AUS"
-                                  >
-                                    Australia
-                                  </option>
-                                  <option
-                                    value="AUT"
-                                  >
-                                    Austria
-                                  </option>
-                                  <option
-                                    value="AZE"
-                                  >
-                                    Azerbaijan
-                                  </option>
-                                  <option
-                                    value="BHS"
-                                  >
-                                    Bahamas
-                                  </option>
-                                  <option
-                                    value="BHR"
-                                  >
-                                    Bahrain
-                                  </option>
-                                  <option
-                                    value="BGD"
-                                  >
-                                    Bangladesh
-                                  </option>
-                                  <option
-                                    value="BRB"
-                                  >
-                                    Barbados
-                                  </option>
-                                  <option
-                                    value="BLR"
-                                  >
-                                    Belarus
-                                  </option>
-                                  <option
-                                    value="BEL"
-                                  >
-                                    Belgium
-                                  </option>
-                                  <option
-                                    value="BLZ"
-                                  >
-                                    Belize
-                                  </option>
-                                  <option
-                                    value="BEN"
-                                  >
-                                    Benin
-                                  </option>
-                                  <option
-                                    value="BMU"
-                                  >
-                                    Bermuda
-                                  </option>
-                                  <option
-                                    value="BTN"
-                                  >
-                                    Bhutan
-                                  </option>
-                                  <option
-                                    value="BOL"
-                                  >
-                                    Bolivia (Plurinational State of)
-                                  </option>
-                                  <option
-                                    value="BES"
-                                  >
-                                    Bonaire, Saint Eustatius and Saba
-                                  </option>
-                                  <option
-                                    value="BIH"
-                                  >
-                                    Bosnia and Herzegovina
-                                  </option>
-                                  <option
-                                    value="BWA"
-                                  >
-                                    Botswana
-                                  </option>
-                                  <option
-                                    value="BRA"
-                                  >
-                                    Brazil
-                                  </option>
-                                  <option
-                                    value="VGB"
-                                  >
-                                    British Virgin Islands
-                                  </option>
-                                  <option
-                                    value="BRN"
-                                  >
-                                    Brunei Darussalam
-                                  </option>
-                                  <option
-                                    value="BGR"
-                                  >
-                                    Bulgaria
-                                  </option>
-                                  <option
-                                    value="BFA"
-                                  >
-                                    Burkina Faso
-                                  </option>
-                                  <option
-                                    value="BDI"
-                                  >
-                                    Burundi
-                                  </option>
-                                  <option
-                                    value="CPV"
-                                  >
-                                    Cabo Verde
-                                  </option>
-                                  <option
-                                    value="KHM"
-                                  >
-                                    Cambodia
-                                  </option>
-                                  <option
-                                    value="CMR"
-                                  >
-                                    Cameroon
-                                  </option>
-                                  <option
-                                    value="CAN"
-                                  >
-                                    Canada
-                                  </option>
-                                  <option
-                                    value="CYM"
-                                  >
-                                    Cayman Islands
-                                  </option>
-                                  <option
-                                    value="CAF"
-                                  >
-                                    Central African Republic
-                                  </option>
-                                  <option
-                                    value="TCD"
-                                  >
-                                    Chad
-                                  </option>
-                                  <option
-                                    value="CHL"
-                                  >
-                                    Chile
-                                  </option>
-                                  <option
-                                    value="CHN"
-                                  >
-                                    China
-                                  </option>
-                                  <option
-                                    value="HKG"
-                                  >
-                                    China, Hong Kong Special Administrative Region
-                                  </option>
-                                  <option
-                                    value="MAC"
-                                  >
-                                    China, Macao Special Administrative Region
-                                  </option>
-                                  <option
-                                    value="COL"
-                                  >
-                                    Colombia
-                                  </option>
-                                  <option
-                                    value="COM"
-                                  >
-                                    Comoros
-                                  </option>
-                                  <option
-                                    value="COG"
-                                  >
-                                    Congo
-                                  </option>
-                                  <option
-                                    value="COK"
-                                  >
-                                    Cook Islands
-                                  </option>
-                                  <option
-                                    value="CRI"
-                                  >
-                                    Costa Rica
-                                  </option>
-                                  <option
-                                    value="CIV"
-                                  >
-                                    Côte d'Ivoire
-                                  </option>
-                                  <option
-                                    value="HRV"
-                                  >
-                                    Croatia
-                                  </option>
-                                  <option
-                                    value="CUB"
-                                  >
-                                    Cuba
-                                  </option>
-                                  <option
-                                    value="CUW"
-                                  >
-                                    Curaçao
-                                  </option>
-                                  <option
-                                    value="CYP"
-                                  >
-                                    Cyprus
-                                  </option>
-                                  <option
-                                    value="CZE"
-                                  >
-                                    Czech Republic
-                                  </option>
-                                  <option
-                                    value="PRK"
-                                  >
-                                    Democratic People's Republic of Korea
-                                  </option>
-                                  <option
-                                    value="COD"
-                                  >
-                                    Democratic Republic of the Congo
-                                  </option>
-                                  <option
-                                    value="DNK"
-                                  >
-                                    Denmark
-                                  </option>
-                                  <option
-                                    value="DJI"
-                                  >
-                                    Djibouti
-                                  </option>
-                                  <option
-                                    value="DMA"
-                                  >
-                                    Dominica
-                                  </option>
-                                  <option
-                                    value="DOM"
-                                  >
-                                    Dominican Republic
-                                  </option>
-                                  <option
-                                    value="ECU"
-                                  >
-                                    Ecuador
-                                  </option>
-                                  <option
-                                    value="EGY"
-                                  >
-                                    Egypt
-                                  </option>
-                                  <option
-                                    value="SLV"
-                                  >
-                                    El Salvador
-                                  </option>
-                                  <option
-                                    value="GNQ"
-                                  >
-                                    Equatorial Guinea
-                                  </option>
-                                  <option
-                                    value="ERI"
-                                  >
-                                    Eritrea
-                                  </option>
-                                  <option
-                                    value="EST"
-                                  >
-                                    Estonia
-                                  </option>
-                                  <option
-                                    value="ETH"
-                                  >
-                                    Ethiopia
-                                  </option>
-                                  <option
-                                    value="FRO"
-                                  >
-                                    Faeroe Islands
-                                  </option>
-                                  <option
-                                    value="FLK"
-                                  >
-                                    Falkland Islands (Malvinas)
-                                  </option>
-                                  <option
-                                    value="FJI"
-                                  >
-                                    Fiji
-                                  </option>
-                                  <option
-                                    value="FIN"
-                                  >
-                                    Finland
-                                  </option>
-                                  <option
-                                    value="FRA"
-                                  >
-                                    France
-                                  </option>
-                                  <option
-                                    value="GUF"
-                                  >
-                                    French Guiana
-                                  </option>
-                                  <option
-                                    value="PYF"
-                                  >
-                                    French Polynesia
-                                  </option>
-                                  <option
-                                    value="GAB"
-                                  >
-                                    Gabon
-                                  </option>
-                                  <option
-                                    value="GMB"
-                                  >
-                                    Gambia
-                                  </option>
-                                  <option
-                                    value="GEO"
-                                  >
-                                    Georgia
-                                  </option>
-                                  <option
-                                    value="DEU"
-                                  >
-                                    Germany
-                                  </option>
-                                  <option
-                                    value="GHA"
-                                  >
-                                    Ghana
-                                  </option>
-                                  <option
-                                    value="GIB"
-                                  >
-                                    Gibraltar
-                                  </option>
-                                  <option
-                                    value="GRC"
-                                  >
-                                    Greece
-                                  </option>
-                                  <option
-                                    value="GRL"
-                                  >
-                                    Greenland
-                                  </option>
-                                  <option
-                                    value="GRD"
-                                  >
-                                    Grenada
-                                  </option>
-                                  <option
-                                    value="GLP"
-                                  >
-                                    Guadeloupe
-                                  </option>
-                                  <option
-                                    value="GUM"
-                                  >
-                                    Guam
-                                  </option>
-                                  <option
-                                    value="GTM"
-                                  >
-                                    Guatemala
-                                  </option>
-                                  <option
-                                    value="GGY"
-                                  >
-                                    Guernsey
-                                  </option>
-                                  <option
-                                    value="GIN"
-                                  >
-                                    Guinea
-                                  </option>
-                                  <option
-                                    value="GNB"
-                                  >
-                                    Guinea-Bissau
-                                  </option>
-                                  <option
-                                    value="GUY"
-                                  >
-                                    Guyana
-                                  </option>
-                                  <option
-                                    value="HTI"
-                                  >
-                                    Haiti
-                                  </option>
-                                  <option
-                                    value="VAT"
-                                  >
-                                    Holy See
-                                  </option>
-                                  <option
-                                    value="HND"
-                                  >
-                                    Honduras
-                                  </option>
-                                  <option
-                                    value="HUN"
-                                  >
-                                    Hungary
-                                  </option>
-                                  <option
-                                    value="ISL"
-                                  >
-                                    Iceland
-                                  </option>
-                                  <option
-                                    value="IND"
-                                  >
-                                    India
-                                  </option>
-                                  <option
-                                    value="IDN"
-                                  >
-                                    Indonesia
-                                  </option>
-                                  <option
-                                    value="IRN"
-                                  >
-                                    Iran (Islamic Republic of)
-                                  </option>
-                                  <option
-                                    value="IRQ"
-                                  >
-                                    Iraq
-                                  </option>
-                                  <option
-                                    value="IRL"
-                                  >
-                                    Ireland
-                                  </option>
-                                  <option
-                                    value="IMN"
-                                  >
-                                    Isle of Man
-                                  </option>
-                                  <option
-                                    value="ISR"
-                                  >
-                                    Israel
-                                  </option>
-                                  <option
-                                    value="ITA"
-                                  >
-                                    Italy
-                                  </option>
-                                  <option
-                                    value="JAM"
-                                  >
-                                    Jamaica
-                                  </option>
-                                  <option
-                                    value="JPN"
-                                  >
-                                    Japan
-                                  </option>
-                                  <option
-                                    value="JEY"
-                                  >
-                                    Jersey
-                                  </option>
-                                  <option
-                                    value="JOR"
-                                  >
-                                    Jordan
-                                  </option>
-                                  <option
-                                    value="KAZ"
-                                  >
-                                    Kazakhstan
-                                  </option>
-                                  <option
-                                    value="KEN"
-                                  >
-                                    Kenya
-                                  </option>
-                                  <option
-                                    value="KIR"
-                                  >
-                                    Kiribati
-                                  </option>
-                                  <option
-                                    value="KWT"
-                                  >
-                                    Kuwait
-                                  </option>
-                                  <option
-                                    value="KGZ"
-                                  >
-                                    Kyrgyzstan
-                                  </option>
-                                  <option
-                                    value="LAO"
-                                  >
-                                    Lao People's Democratic Republic
-                                  </option>
-                                  <option
-                                    value="LVA"
-                                  >
-                                    Latvia
-                                  </option>
-                                  <option
-                                    value="LBN"
-                                  >
-                                    Lebanon
-                                  </option>
-                                  <option
-                                    value="LSO"
-                                  >
-                                    Lesotho
-                                  </option>
-                                  <option
-                                    value="LBR"
-                                  >
-                                    Liberia
-                                  </option>
-                                  <option
-                                    value="LBY"
-                                  >
-                                    Libya
-                                  </option>
-                                  <option
-                                    value="LIE"
-                                  >
-                                    Liechtenstein
-                                  </option>
-                                  <option
-                                    value="LTU"
-                                  >
-                                    Lithuania
-                                  </option>
-                                  <option
-                                    value="LUX"
-                                  >
-                                    Luxembourg
-                                  </option>
-                                  <option
-                                    value="MDG"
-                                  >
-                                    Madagascar
-                                  </option>
-                                  <option
-                                    value="MWI"
-                                  >
-                                    Malawi
-                                  </option>
-                                  <option
-                                    value="MYS"
-                                  >
-                                    Malaysia
-                                  </option>
-                                  <option
-                                    value="MDV"
-                                  >
-                                    Maldives
-                                  </option>
-                                  <option
-                                    value="MLI"
-                                  >
-                                    Mali
-                                  </option>
-                                  <option
-                                    value="MLT"
-                                  >
-                                    Malta
-                                  </option>
-                                  <option
-                                    value="MHL"
-                                  >
-                                    Marshall Islands
-                                  </option>
-                                  <option
-                                    value="MTQ"
-                                  >
-                                    Martinique
-                                  </option>
-                                  <option
-                                    value="MRT"
-                                  >
-                                    Mauritania
-                                  </option>
-                                  <option
-                                    value="MUS"
-                                  >
-                                    Mauritius
-                                  </option>
-                                  <option
-                                    value="MYT"
-                                  >
-                                    Mayotte
-                                  </option>
-                                  <option
-                                    value="MEX"
-                                  >
-                                    Mexico
-                                  </option>
-                                  <option
-                                    value="FSM"
-                                  >
-                                    Micronesia (Federated States of)
-                                  </option>
-                                  <option
-                                    value="MCO"
-                                  >
-                                    Monaco
-                                  </option>
-                                  <option
-                                    value="MNG"
-                                  >
-                                    Mongolia
-                                  </option>
-                                  <option
-                                    value="MNE"
-                                  >
-                                    Montenegro
-                                  </option>
-                                  <option
-                                    value="MSR"
-                                  >
-                                    Montserrat
-                                  </option>
-                                  <option
-                                    value="MAR"
-                                  >
-                                    Morocco
-                                  </option>
-                                  <option
-                                    value="MOZ"
-                                  >
-                                    Mozambique
-                                  </option>
-                                  <option
-                                    value="MMR"
-                                  >
-                                    Myanmar
-                                  </option>
-                                  <option
-                                    value="NAM"
-                                  >
-                                    Namibia
-                                  </option>
-                                  <option
-                                    value="NRU"
-                                  >
-                                    Nauru
-                                  </option>
-                                  <option
-                                    value="NPL"
-                                  >
-                                    Nepal
-                                  </option>
-                                  <option
-                                    value="NLD"
-                                  >
-                                    Netherlands
-                                  </option>
-                                  <option
-                                    value="NCL"
-                                  >
-                                    New Caledonia
-                                  </option>
-                                  <option
-                                    value="NZL"
-                                  >
-                                    New Zealand
-                                  </option>
-                                  <option
-                                    value="NIC"
-                                  >
-                                    Nicaragua
-                                  </option>
-                                  <option
-                                    value="NER"
-                                  >
-                                    Niger
-                                  </option>
-                                  <option
-                                    value="NGA"
-                                  >
-                                    Nigeria
-                                  </option>
-                                  <option
-                                    value="NIU"
-                                  >
-                                    Niue
-                                  </option>
-                                  <option
-                                    value="NFK"
-                                  >
-                                    Norfolk Island
-                                  </option>
-                                  <option
-                                    value="MNP"
-                                  >
-                                    Northern Mariana Islands
-                                  </option>
-                                  <option
-                                    value="NOR"
-                                  >
-                                    Norway
-                                  </option>
-                                  <option
-                                    value="OMN"
-                                  >
-                                    Oman
-                                  </option>
-                                  <option
-                                    value="PAK"
-                                  >
-                                    Pakistan
-                                  </option>
-                                  <option
-                                    value="PLW"
-                                  >
-                                    Palau
-                                  </option>
-                                  <option
-                                    value="PAN"
-                                  >
-                                    Panama
-                                  </option>
-                                  <option
-                                    value="PNG"
-                                  >
-                                    Papua New Guinea
-                                  </option>
-                                  <option
-                                    value="PRY"
-                                  >
-                                    Paraguay
-                                  </option>
-                                  <option
-                                    value="PER"
-                                  >
-                                    Peru
-                                  </option>
-                                  <option
-                                    value="PHL"
-                                  >
-                                    Philippines
-                                  </option>
-                                  <option
-                                    value="PCN"
-                                  >
-                                    Pitcairn
-                                  </option>
-                                  <option
-                                    value="POL"
-                                  >
-                                    Poland
-                                  </option>
-                                  <option
-                                    value="PRT"
-                                  >
-                                    Portugal
-                                  </option>
-                                  <option
-                                    value="PRI"
-                                  >
-                                    Puerto Rico
-                                  </option>
-                                  <option
-                                    value="QAT"
-                                  >
-                                    Qatar
-                                  </option>
-                                  <option
-                                    value="KOR"
-                                  >
-                                    Republic of Korea
-                                  </option>
-                                  <option
-                                    value="MDA"
-                                  >
-                                    Republic of Moldova
-                                  </option>
-                                  <option
-                                    value="REU"
-                                  >
-                                    Réunion
-                                  </option>
-                                  <option
-                                    value="ROU"
-                                  >
-                                    Romania
-                                  </option>
-                                  <option
-                                    value="RUS"
-                                  >
-                                    Russian Federation
-                                  </option>
-                                  <option
-                                    value="RWA"
-                                  >
-                                    Rwanda
-                                  </option>
-                                  <option
-                                    value="BLM"
-                                  >
-                                    Saint-Barthélemy
-                                  </option>
-                                  <option
-                                    value="SHN"
-                                  >
-                                    Saint Helena
-                                  </option>
-                                  <option
-                                    value="KNA"
-                                  >
-                                    Saint Kitts and Nevis
-                                  </option>
-                                  <option
-                                    value="LCA"
-                                  >
-                                    Saint Lucia
-                                  </option>
-                                  <option
-                                    value="MAF"
-                                  >
-                                    Saint-Martin (French part)
-                                  </option>
-                                  <option
-                                    value="SPM"
-                                  >
-                                    Saint Pierre and Miquelon
-                                  </option>
-                                  <option
-                                    value="VCT"
-                                  >
-                                    Saint Vincent and the Grenadines
-                                  </option>
-                                  <option
-                                    value="WSM"
-                                  >
-                                    Samoa
-                                  </option>
-                                  <option
-                                    value="SMR"
-                                  >
-                                    San Marino
-                                  </option>
-                                  <option
-                                    value="STP"
-                                  >
-                                    Sao Tome and Principe
-                                  </option>
-                                  <option
-                                    value="SAU"
-                                  >
-                                    Saudi Arabia
-                                  </option>
-                                  <option
-                                    value="SEN"
-                                  >
-                                    Senegal
-                                  </option>
-                                  <option
-                                    value="SRB"
-                                  >
-                                    Serbia
-                                  </option>
-                                  <option
-                                    value="SYC"
-                                  >
-                                    Seychelles
-                                  </option>
-                                  <option
-                                    value="SLE"
-                                  >
-                                    Sierra Leone
-                                  </option>
-                                  <option
-                                    value="SGP"
-                                  >
-                                    Singapore
-                                  </option>
-                                  <option
-                                    value="SXM"
-                                  >
-                                    Sint Maarten (Dutch part)
-                                  </option>
-                                  <option
-                                    value="SVK"
-                                  >
-                                    Slovakia
-                                  </option>
-                                  <option
-                                    value="SVN"
-                                  >
-                                    Slovenia
-                                  </option>
-                                  <option
-                                    value="SLB"
-                                  >
-                                    Solomon Islands
-                                  </option>
-                                  <option
-                                    value="SOM"
-                                  >
-                                    Somalia
-                                  </option>
-                                  <option
-                                    value="ZAF"
-                                  >
-                                    South Africa
-                                  </option>
-                                  <option
-                                    value="SSD"
-                                  >
-                                    South Sudan
-                                  </option>
-                                  <option
-                                    value="ESP"
-                                  >
-                                    Spain
-                                  </option>
-                                  <option
-                                    value="LKA"
-                                  >
-                                    Sri Lanka
-                                  </option>
-                                  <option
-                                    value="PSE"
-                                  >
-                                    State of Palestine
-                                  </option>
-                                  <option
-                                    value="SDN"
-                                  >
-                                    Sudan
-                                  </option>
-                                  <option
-                                    value="SUR"
-                                  >
-                                    Suriname
-                                  </option>
-                                  <option
-                                    value="SJM"
-                                  >
-                                    Svalbard and Jan Mayen Islands
-                                  </option>
-                                  <option
-                                    value="SWZ"
-                                  >
-                                    Swaziland
-                                  </option>
-                                  <option
-                                    value="SWE"
-                                  >
-                                    Sweden
-                                  </option>
-                                  <option
-                                    value="CHE"
-                                  >
-                                    Switzerland
-                                  </option>
-                                  <option
-                                    value="SYR"
-                                  >
-                                    Syrian Arab Republic
-                                  </option>
-                                  <option
-                                    value="TWAN"
-                                  >
-                                    Taiwan
-                                  </option>
-                                  <option
-                                    value="TJK"
-                                  >
-                                    Tajikistan
-                                  </option>
-                                  <option
-                                    value="THA"
-                                  >
-                                    Thailand
-                                  </option>
-                                  <option
-                                    value="MKD"
-                                  >
-                                    The former Yugoslav Republic of Macedonia
-                                  </option>
-                                  <option
-                                    value="TLS"
-                                  >
-                                    Timor-Leste
-                                  </option>
-                                  <option
-                                    value="TGO"
-                                  >
-                                    Togo
-                                  </option>
-                                  <option
-                                    value="TKL"
-                                  >
-                                    Tokelau
-                                  </option>
-                                  <option
-                                    value="TON"
-                                  >
-                                    Tonga
-                                  </option>
-                                  <option
-                                    value="TTO"
-                                  >
-                                    Trinidad and Tobago
-                                  </option>
-                                  <option
-                                    value="TUN"
-                                  >
-                                    Tunisia
-                                  </option>
-                                  <option
-                                    value="TUR"
-                                  >
-                                    Turkey
-                                  </option>
-                                  <option
-                                    value="TKM"
-                                  >
-                                    Turkmenistan
-                                  </option>
-                                  <option
-                                    value="TCA"
-                                  >
-                                    Turks and Caicos Islands
-                                  </option>
-                                  <option
-                                    value="TUV"
-                                  >
-                                    Tuvalu
-                                  </option>
-                                  <option
-                                    value="UGA"
-                                  >
-                                    Uganda
-                                  </option>
-                                  <option
-                                    value="UKR"
-                                  >
-                                    Ukraine
-                                  </option>
-                                  <option
-                                    value="ARE"
-                                  >
-                                    United Arab Emirates
-                                  </option>
-                                  <option
-                                    value="GBR"
-                                  >
-                                    United Kingdom of Great Britain and Northern Ireland
-                                  </option>
-                                  <option
-                                    value="TZA"
-                                  >
-                                    United Republic of Tanzania
-                                  </option>
-                                  <option
-                                    value="URY"
-                                  >
-                                    Uruguay
-                                  </option>
-                                  <option
-                                    value="UZB"
-                                  >
-                                    Uzbekistan
-                                  </option>
-                                  <option
-                                    value="VUT"
-                                  >
-                                    Vanuatu
-                                  </option>
-                                  <option
-                                    value="VEN"
-                                  >
-                                    Venezuela (Bolivarian Republic of)
-                                  </option>
-                                  <option
-                                    value="VNM"
-                                  >
-                                    Vietnam
-                                  </option>
-                                  <option
-                                    value="WLF"
-                                  >
-                                    Wallis and Futuna Islands
-                                  </option>
-                                  <option
-                                    value="ESH"
-                                  >
-                                    Western Sahara
-                                  </option>
-                                  <option
-                                    value="YEM"
-                                  >
-                                    Yemen
-                                  </option>
-                                  <option
-                                    value="ZMB"
-                                  >
-                                    Zambia
-                                  </option>
-                                  <option
-                                    value="ZWE"
-                                  >
-                                    Zimbabwe
-                                  </option>
-                                </select>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      
-                      <div
-                        className="emotion-7"
-                      >
-                        <div
-                          className="fs-c m-b300"
-                        >
-                          <div
-                            className="sel"
-                          >
-                            <div>
-                              <label
-                                className="txt-l "
-                                htmlFor="select-3699612000"
-                                style={Object {}}
+                                Sierra Leone
+                              </option>
+                              <option
+                                value="SGP"
                               >
-                                <span
-                                  style={
-                                    Object {
-                                      "marginRight": "0.5em",
-                                      "whiteSpace": "nowrap",
-                                    }
-                                  }
-                                >
-                                  This Marriage is your ...
-                                </span>
-                              </label>
-                              <div
-                                className="sel-c  "
-                              >
-                                <select
-                                  aria-label=""
-                                  className="sel-f  "
-                                  id="select-3699612000"
-                                  name="partnerB_marriageNumb"
-                                  onChange={[Function]}
-                                  value=""
-                                >
-                                  <option />
-                                  <option
-                                    value="1st"
-                                  >
-                                    1st
-                                  </option>
-                                  <option
-                                    value="2nd"
-                                  >
-                                    2nd
-                                  </option>
-                                  <option
-                                    value="3rd"
-                                  >
-                                    3rd
-                                  </option>
-                                  <option
-                                    value="4th"
-                                  >
-                                    4th
-                                  </option>
-                                  <option
-                                    value="5th"
-                                  >
-                                    5th
-                                  </option>
-                                  <option
-                                    value="6th"
-                                  >
-                                    6th
-                                  </option>
-                                  <option
-                                    value="7th"
-                                  >
-                                    7th
-                                  </option>
-                                  <option
-                                    value="8th"
-                                  >
-                                    8th
-                                  </option>
-                                  <option
-                                    value="9th"
-                                  >
-                                    9th
-                                  </option>
-                                </select>
-                              </div>
-                            </div>
+                                Singapore
+                              </option>
+                              <option
+                                value="SXM"
+                              >
+                                Sint Maarten (Dutch part)
+                              </option>
+                              <option
+                                value="SVK"
+                              >
+                                Slovakia
+                              </option>
+                              <option
+                                value="SVN"
+                              >
+                                Slovenia
+                              </option>
+                              <option
+                                value="SLB"
+                              >
+                                Solomon Islands
+                              </option>
+                              <option
+                                value="SOM"
+                              >
+                                Somalia
+                              </option>
+                              <option
+                                value="ZAF"
+                              >
+                                South Africa
+                              </option>
+                              <option
+                                value="SSD"
+                              >
+                                South Sudan
+                              </option>
+                              <option
+                                value="ESP"
+                              >
+                                Spain
+                              </option>
+                              <option
+                                value="LKA"
+                              >
+                                Sri Lanka
+                              </option>
+                              <option
+                                value="PSE"
+                              >
+                                State of Palestine
+                              </option>
+                              <option
+                                value="SDN"
+                              >
+                                Sudan
+                              </option>
+                              <option
+                                value="SUR"
+                              >
+                                Suriname
+                              </option>
+                              <option
+                                value="SJM"
+                              >
+                                Svalbard and Jan Mayen Islands
+                              </option>
+                              <option
+                                value="SWZ"
+                              >
+                                Swaziland
+                              </option>
+                              <option
+                                value="SWE"
+                              >
+                                Sweden
+                              </option>
+                              <option
+                                value="CHE"
+                              >
+                                Switzerland
+                              </option>
+                              <option
+                                value="SYR"
+                              >
+                                Syrian Arab Republic
+                              </option>
+                              <option
+                                value="TWAN"
+                              >
+                                Taiwan
+                              </option>
+                              <option
+                                value="TJK"
+                              >
+                                Tajikistan
+                              </option>
+                              <option
+                                value="THA"
+                              >
+                                Thailand
+                              </option>
+                              <option
+                                value="MKD"
+                              >
+                                The former Yugoslav Republic of Macedonia
+                              </option>
+                              <option
+                                value="TLS"
+                              >
+                                Timor-Leste
+                              </option>
+                              <option
+                                value="TGO"
+                              >
+                                Togo
+                              </option>
+                              <option
+                                value="TKL"
+                              >
+                                Tokelau
+                              </option>
+                              <option
+                                value="TON"
+                              >
+                                Tonga
+                              </option>
+                              <option
+                                value="TTO"
+                              >
+                                Trinidad and Tobago
+                              </option>
+                              <option
+                                value="TUN"
+                              >
+                                Tunisia
+                              </option>
+                              <option
+                                value="TUR"
+                              >
+                                Turkey
+                              </option>
+                              <option
+                                value="TKM"
+                              >
+                                Turkmenistan
+                              </option>
+                              <option
+                                value="TCA"
+                              >
+                                Turks and Caicos Islands
+                              </option>
+                              <option
+                                value="TUV"
+                              >
+                                Tuvalu
+                              </option>
+                              <option
+                                value="UGA"
+                              >
+                                Uganda
+                              </option>
+                              <option
+                                value="UKR"
+                              >
+                                Ukraine
+                              </option>
+                              <option
+                                value="ARE"
+                              >
+                                United Arab Emirates
+                              </option>
+                              <option
+                                value="GBR"
+                              >
+                                United Kingdom of Great Britain and Northern Ireland
+                              </option>
+                              <option
+                                value="TZA"
+                              >
+                                United Republic of Tanzania
+                              </option>
+                              <option
+                                value="URY"
+                              >
+                                Uruguay
+                              </option>
+                              <option
+                                value="UZB"
+                              >
+                                Uzbekistan
+                              </option>
+                              <option
+                                value="VUT"
+                              >
+                                Vanuatu
+                              </option>
+                              <option
+                                value="VEN"
+                              >
+                                Venezuela (Bolivarian Republic of)
+                              </option>
+                              <option
+                                value="VNM"
+                              >
+                                Vietnam
+                              </option>
+                              <option
+                                value="WLF"
+                              >
+                                Wallis and Futuna Islands
+                              </option>
+                              <option
+                                value="ESH"
+                              >
+                                Western Sahara
+                              </option>
+                              <option
+                                value="YEM"
+                              >
+                                Yemen
+                              </option>
+                              <option
+                                value="ZMB"
+                              >
+                                Zambia
+                              </option>
+                              <option
+                                value="ZWE"
+                              >
+                                Zimbabwe
+                              </option>
+                            </select>
                           </div>
                         </div>
                       </div>
+                      
                     </div>
                   </div>
                   <div
-                    className="emotion-16"
+                    className="emotion-19"
                   >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Marriage
+                      <div
+                        className="notice"
+                      />
+                    </h1>
                     <div
-                      className="emotion-29"
+                      className="emotion-9"
                     >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Were you ever a member of a ...
-                      </h2>
                       <div
-                        className="emotion-28"
+                        className="emotion-8"
                       >
                         <div
-                          aria-label=""
+                          aria-labelledby="partnerB_bloodRelation-groupLabel"
+                          className="radio-group__label"
                           role="group"
                         >
-                          <label
-                            className="ra  "
+                          <div
+                            className="txt-l"
+                            id="partnerB_bloodRelation-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            <input
-                              className="ra-f"
-                              name="partnerB_partnershipType"
-                              onChange={[Function]}
-                              type="radio"
-                              value="N/A"
-                            />
+                            Are you related by blood or marriage to your future spouse?
                             <span
-                              className="ra-l"
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
                             >
-                              Does Not Apply
+                              Required
                             </span>
-                          </label>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+                              </div>
+                            </span>
+                          </div>
                           <label
                             className="ra  "
                           >
                             <input
                               className="ra-f"
-                              name="partnerB_partnershipType"
+                              name="partnerB_bloodRelation"
                               onChange={[Function]}
                               type="radio"
-                              value="CIV"
+                              value="1"
                             />
                             <span
                               className="ra-l"
                             >
-                              Civil Unions
+                              Yes
                             </span>
                           </label>
                           <label
@@ -72506,236 +83339,167 @@ Array [
                           >
                             <input
                               className="ra-f"
-                              name="partnerB_partnershipType"
+                              name="partnerB_bloodRelation"
                               onChange={[Function]}
                               type="radio"
-                              value="DOM"
+                              value="0"
                             />
                             <span
                               className="ra-l"
                             >
-                              Domestic Partnership
+                              No
                             </span>
                           </label>
                         </div>
                       </div>
                     </div>
-                    
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
-                    <div
-                      className="emotion-32"
-                    >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Parents
-                      </h2>
-                    </div>
                     <div
-                      className="emotion-35"
-                      style={
-                        Object {
-                          "marginBottom": "2.5em",
-                        }
-                      }
+                      className="emotion-9"
                     >
-                      <h4
-                        className="emotion-4"
+                      <div
+                        className="emotion-8"
                       >
-                        Name of Parent 1/Mother
-                      </h4>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-2217447742"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Parent 1/Mother - First Middle Last
-                          </span>
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-2217447742"
-                          maxLength={38}
-                          name="partnerB_parentA_Name"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
                         <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-1925864057"
-                          style={Object {}}
+                          aria-labelledby="partnerB_marriedBefore-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
-                          <span
+                          <div
+                            className="txt-l"
+                            id="partnerB_marriedBefore-groupLabel"
                             style={
                               Object {
-                                "marginRight": "0.5em",
+                                "display": "flex",
                               }
                             }
                           >
-                            Parent 1/Mother - Maiden Name/Surname at Birth or Adoption
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-5"
-                        >
-                          This should be your parent's last name at the time of their birth or adoption.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-1925864057"
-                          maxLength={38}
-                          name="partnerB_parentA_Surname"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-35"
-                      style={
-                        Object {
-                          "marginBottom": "2.5em",
-                        }
-                      }
-                    >
-                      <h4
-                        className="emotion-4"
-                      >
-                        Name of Parent 2/Father
-                      </h4>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-738420088"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
+                            Have you ever been married before?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
                               }
-                            }
+                            >
+                              Required
+                            </span>
+                          </div>
+                          <label
+                            className="ra  "
                           >
-                            Parent 2/Father - First Middle Last
-                          </span>
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-738420088"
-                          maxLength={38}
-                          name="partnerB_parentB_Name"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-2538005951"
-                          style={Object {}}
-                        >
-                          <span
-                            style={
-                              Object {
-                                "marginRight": "0.5em",
-                              }
-                            }
+                            <input
+                              className="ra-f"
+                              name="partnerB_marriedBefore"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
                           >
-                            Parent 2/Father - Maiden Name/Surname at Birth or Adoption
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-5"
-                        >
-                          This should be your parent's last name at the time of their birth or adoption.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f  "
-                          id="input-2538005951"
-                          maxLength={38}
-                          name="partnerB_parentB_Surname"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
+                            <input
+                              className="ra-f"
+                              name="partnerB_marriedBefore"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div
-                    className="emotion-16"
-                  >
+                    
                     <div
-                      className="emotion-19"
+                      className="emotion-24"
                     >
-                      <h2
-                        className="emotion-4"
-                      >
-                        Were your parents married at the time of your birth?
-                      </h2>
                       <div
-                        className="emotion-28"
+                        className="emotion-33"
                       >
                         <div
-                          className="emotion-41"
+                          className="emotion-9"
                         >
                           <div
-                            aria-label=""
+                            aria-labelledby="partnerB_partnershipType-groupLabel"
+                            className="radio-group__label"
                             role="group"
                           >
+                            <div
+                              className="txt-l"
+                              id="partnerB_partnershipType-groupLabel"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Were you ever a member of a civil union or domestic partnership?
+                              <span
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "display": "flex",
+                                    "paddingLeft": "0.25em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  This information is collected as required by the Massachusetts State Marriage Intention Form.
+                                </div>
+                              </span>
+                            </div>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="CIV"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a civil union
+                              </span>
+                            </label>
                             <label
                               className="ra  "
                             >
                               <input
                                 className="ra-f"
-                                name="partnerB_parentsMarriedAtBirth"
+                                name="partnerB_partnershipType"
                                 onChange={[Function]}
                                 type="radio"
-                                value="1"
+                                value="DOM"
                               />
                               <span
                                 className="ra-l"
                               >
-                                Yes
+                                Yes, a domestic partnership
                               </span>
                             </label>
                             <label
@@ -72743,10 +83507,10 @@ Array [
                             >
                               <input
                                 className="ra-f"
-                                name="partnerB_parentsMarriedAtBirth"
+                                name="partnerB_partnershipType"
                                 onChange={[Function]}
                                 type="radio"
-                                value="0"
+                                value="N/A"
                               />
                               <span
                                 className="ra-l"
@@ -72757,61 +83521,289 @@ Array [
                           </div>
                         </div>
                       </div>
+                      
                     </div>
                   </div>
                   <div
-                    className="emotion-16"
+                    className="emotion-24"
                   >
-                    <div
-                      className="emotion-19"
+                    <h1
+                      className="emotion-5"
                     >
-                      <h2
-                        className="emotion-4"
+                      Parents
+                      <div
+                        className="notice"
                       >
-                        Related by blood or marriage to Person B
-                      </h2>
+                        Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
+                        <span
+                          className="tool-tip__wrapper emotion-36"
+                        >
+                          <div
+                            className="icon"
+                          />
+                          <div
+                            className="msg"
+                          >
+                            This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
+                          </div>
+                        </span>
+                      </div>
+                    </h1>
+                    <div
+                      className="emotion-45"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-507056287"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1 - First Middle Last Name
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "flexGrow": 1,
+                              }
+                            }
+                          >
+                            Required
+                          </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-507056287"
+                          maxLength={38}
+                          name="partnerB_parentA_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-4196106810"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1 - Family Name/Last Name At the time of their birth or adoption
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "flexGrow": 1,
+                              }
+                            }
+                          >
+                            Required
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-6"
+                        >
+                          This information might be found on your birth certificate.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f  "
+                          id="input-4196106810"
+                          maxLength={38}
+                          name="partnerB_parentA_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
+                        </div>
+                      </div>
                       <div
-                        className="emotion-28"
+                        className="emotion-9"
                       >
                         <div
-                          className="emotion-41"
+                          aria-labelledby="partnerB_additionalParent-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
                           <div
-                            aria-label=""
-                            role="group"
+                            className="txt-l"
+                            id="partnerB_additionalParent-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            <label
-                              className="ra  "
+                            Do you have a second parent?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
                             >
-                              <input
-                                className="ra-f"
-                                name="partnerB_bloodRelation"
-                                onChange={[Function]}
-                                type="radio"
-                                value="1"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
+                              Required
+                            </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
                             >
-                              <input
-                                className="ra-f"
-                                name="partnerB_bloodRelation"
-                                onChange={[Function]}
-                                type="radio"
-                                value="0"
-                              />
-                              <span
-                                className="ra-l"
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                      <div
+                        className="emotion-24"
+                      >
+                        <div
+                          className="emotion-43"
+                        >
+                          <div
+                            className="emotion-9"
+                          >
+                            <div
+                              className="emotion-8"
+                            >
+                              <div
+                                aria-labelledby="partnerB_parentsMarriedAtBirth-groupLabel"
+                                className="radio-group__label"
+                                role="group"
                               >
-                                No
-                              </span>
-                            </label>
+                                <div
+                                  className="txt-l"
+                                  id="partnerB_parentsMarriedAtBirth-groupLabel"
+                                  style={
+                                    Object {
+                                      "display": "flex",
+                                    }
+                                  }
+                                >
+                                  Were your parents married at the time of your birth?
+                                  <span
+                                    className="t--req"
+                                    style={
+                                      Object {
+                                        "display": "flex",
+                                        "paddingLeft": "0.25em",
+                                      }
+                                    }
+                                  >
+                                    Required
+                                  </span>
+                                  <span
+                                    className="tool-tip__wrapper emotion-7"
+                                  >
+                                    <div
+                                      className="icon"
+                                    />
+                                    <div
+                                      className="msg"
+                                    >
+                                      This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
+                                    </div>
+                                  </span>
+                                </div>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerB_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="1"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    Yes
+                                  </span>
+                                </label>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerB_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="0"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    No
+                                  </span>
+                                </label>
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -72820,13 +83812,13 @@ Array [
                 </fieldset>
               </div>
               <div
-                className="g g--mr emotion-53"
+                className="g g--mr emotion-50"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-52"
+                    className="lnk emotion-49"
                     onClick={[Function]}
                     type="button"
                   >
@@ -73160,7 +84152,6 @@ Array [
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-3 .progressbar {
@@ -73168,6 +84159,7 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -73179,18 +84171,13 @@ Array [
 
 .emotion-3 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -73200,11 +84187,10 @@ Array [
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -73285,16 +84271,53 @@ Array [
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 .emotion-17 {
   padding: 0px;
 }
 
-.css-1anrsns .emotion-5:after {
+.css-1d92czb .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ndjemn .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1btkjiq .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-lbsctu .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-3y8lfr .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-908v3n .emotion-5:after {
+.css-sifr7p .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-zx7u86 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-17tc7bx .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -73330,12 +84353,12 @@ Array [
 }
 
 .emotion-11 .notice {
-  font-size: 0.7em;
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
@@ -73344,21 +84367,6 @@ Array [
   opacity: 0;
 }
 
-.css-1pys2nt .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-k0050r .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-1n1xjtd .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
 .emotion-4 {
   color: #091f2f;
   font-weight: 700;
@@ -73446,12 +84454,12 @@ Array [
 }
 
 .emotion-7 .notice {
-  font-size: 0.7em;
+  font-size: 0.8125em;
   clear: both;
   min-height: 1px;
   overflow: hidden;
   display: block;
-  margin: 1% 0 1.5%;
+  margin: 0.25em 0 0.75em 0;
   line-height: 1.5em;
 }
 
@@ -73811,11 +84819,16 @@ Array [
                           <label
                             className="txt-l "
                             htmlFor="input-2778663327"
-                            style={Object {}}
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
                             <span
                               style={
                                 Object {
+                                  "display": "flex",
                                   "marginRight": "0.5em",
                                   "whiteSpace": "nowrap",
                                 }
@@ -73826,11 +84839,16 @@ Array [
                             <span
                               aria-hidden="true"
                               className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "flexGrow": 1,
+                                }
+                              }
                             >
                               Required
                             </span>
                           </label>
-                          
                           <input
                             aria-label=""
                             className="txt-f  "
@@ -73853,11 +84871,16 @@ Array [
                           <label
                             className="txt-l "
                             htmlFor="input-1813726221"
-                            style={Object {}}
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
                             <span
                               style={
                                 Object {
+                                  "display": "flex",
                                   "marginRight": "0.5em",
                                   "whiteSpace": "nowrap",
                                 }
@@ -73868,11 +84891,16 @@ Array [
                             <span
                               aria-hidden="true"
                               className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "flexGrow": 1,
+                                }
+                              }
                             >
                               Required
                             </span>
                           </label>
-                          
                           <input
                             aria-label=""
                             className="txt-f  "
@@ -73895,11 +84923,16 @@ Array [
                           <label
                             className="txt-l "
                             htmlFor="input-1267882554"
-                            style={Object {}}
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
                             <span
                               style={
                                 Object {
+                                  "display": "flex",
                                   "marginRight": "0.5em",
                                   "whiteSpace": "nowrap",
                                 }
@@ -73910,6 +84943,12 @@ Array [
                             <span
                               aria-hidden="true"
                               className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "flexGrow": 1,
+                                }
+                              }
                             >
                               Required
                             </span>
@@ -73980,6 +85019,17 @@ Array [
                                 htmlFor="appointmentDate-month"
                               >
                                 Month
+                                <span
+                                  aria-hidden="true"
+                                  className="t--req"
+                                  style={
+                                    Object {
+                                      "marginLeft": "0.35em",
+                                    }
+                                  }
+                                >
+                                  Required
+                                </span>
                               </label>
                               <input
                                 className="txt-f"
@@ -74002,6 +85052,17 @@ Array [
                                 htmlFor="appointmentDate-day"
                               >
                                 Day
+                                <span
+                                  aria-hidden="true"
+                                  className="t--req"
+                                  style={
+                                    Object {
+                                      "marginLeft": "0.35em",
+                                    }
+                                  }
+                                >
+                                  Required
+                                </span>
                               </label>
                               <input
                                 className="txt-f"
@@ -74024,6 +85085,17 @@ Array [
                                 htmlFor="appointmentDate-year"
                               >
                                 Year
+                                <span
+                                  aria-hidden="true"
+                                  className="t--req"
+                                  style={
+                                    Object {
+                                      "marginLeft": "0.35em",
+                                    }
+                                  }
+                                >
+                                  Required
+                                </span>
                               </label>
                               <input
                                 className="txt-f"
@@ -74464,7 +85536,6 @@ Array [
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-3 .progressbar {
@@ -74472,6 +85543,7 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -74483,18 +85555,13 @@ Array [
 
 .emotion-3 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -74504,11 +85571,10 @@ Array [
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -74589,6 +85655,13 @@ Array [
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 .emotion-15 {
   padding: 0px;
 }
@@ -75000,7 +86073,7 @@ Array [
                     className="emotion-4"
                   >
                     <h1>
-                      Review Information
+                      Review Your Information
                     </h1>
                     <p>
                       <label>
@@ -75018,7 +86091,7 @@ Array [
                         className="wrapper-title"
                       >
                         <h1>
-                          Person A
+                          Person 1
                         </h1>
                       </div>
                       <div
@@ -75299,7 +86372,7 @@ Array [
                         className="wrapper-title"
                       >
                         <h1>
-                          Person B
+                          Person 2
                         </h1>
                       </div>
                       <div
@@ -76269,7 +87342,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -76302,7 +87375,6 @@ Array [
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-3 .progressbar {
@@ -76310,6 +87382,7 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -76321,18 +87394,13 @@ Array [
 
 .emotion-3 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -76342,11 +87410,10 @@ Array [
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -76427,6 +87494,13 @@ Array [
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 .emotion-10 {
   padding: 0px;
 }
@@ -76846,6 +87920,107 @@ Array [
 ]
 `;
 
+exports[`Storyshots Marriage Intention/Form Pages Tool-Tip 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-0 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-0 .icon::before {
+  content: '?';
+}
+
+.emotion-0 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-0 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-0 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-0 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-2 {
+  margin-top: 4em;
+}
+
+<div>
+  <div>
+    <span
+      className="tool-tip__wrapper emotion-0"
+    >
+      <div
+        className="icon"
+      />
+      <div
+        className="msg"
+      >
+        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+      </div>
+    </span>
+  </div>
+  <div
+    className="emotion-2"
+  >
+    <span
+      className="tool-tip__wrapper emotion-0"
+    >
+      <div
+        className="icon"
+      />
+      <div
+        className="msg"
+      >
+        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (default) 1`] = `
 .emotion-0 {
   display: grid;
@@ -76853,7 +88028,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -76861,6 +88035,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -76872,18 +88047,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -76893,11 +88063,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -76978,6 +88147,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -77088,7 +88264,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -77096,6 +88271,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -77107,18 +88283,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -77128,11 +88299,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -77213,6 +88383,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -77323,7 +88500,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -77331,6 +88507,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -77342,18 +88519,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -77363,11 +88535,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -77448,6 +88619,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -77558,7 +88736,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -77566,6 +88743,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -77577,18 +88755,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -77598,11 +88771,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -77683,6 +88855,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -77793,7 +88972,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -77801,6 +88979,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -77812,18 +88991,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -77833,11 +89007,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -77918,6 +89091,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -78028,7 +89208,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -78036,6 +89215,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -78047,18 +89227,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -78068,11 +89243,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -78153,6 +89327,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -78263,7 +89444,6 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
   margin-top: 0.75rem;
   grid-auto-columns: 1fr;
   grid-auto-rows: 1fr;
-  grid-template-columns: repeat(3; 1fr);
 }
 
 .emotion-0 .progressbar {
@@ -78271,6 +89451,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -78282,18 +89463,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
 
 .emotion-0 .progressbar .nav {
   display: table;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  table-layout: fixed;
   text-align: center;
   line-height: normal;
   font-style: normal;
   font-weight: bold;
-  font-family: Lora,serif;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
   color: '#58585B';
 }
 
@@ -78303,11 +89479,10 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
   border-color: black;
   border-style: solid;
   border-left-width: 0;
-  padding: 0.85em 0em;
-  min-width: 80px;
+  padding: 0.85em 0.5em;
   color: black;
   background: #fff;
-  min-width: 120px;
+  width: 2%;
   font-size: 0.85em;
 }
 
@@ -78388,6 +89563,13 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
   }
 }
 
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-0 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
 <div
   style={
     Object {
@@ -79567,7 +90749,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -80237,7 +91419,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -81408,7 +92590,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -82510,7 +93692,7 @@ exports[`Storyshots Marriage/Question Components/ClientInstructions default 1`]
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -82648,7 +93830,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -83236,7 +94418,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage default 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -83613,7 +94795,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -84015,6 +95197,17 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
                 htmlFor="dateOfMarriageStart-month"
               >
                 Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -84037,6 +95230,17 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
                 htmlFor="dateOfMarriageStart-day"
               >
                 Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -84059,6 +95263,17 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
                 htmlFor="dateOfMarriageStart-year"
               >
                 Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -84149,7 +95364,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -84551,6 +95766,17 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
                 htmlFor="dateOfMarriageStart-month"
               >
                 Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -84573,6 +95799,17 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
                 htmlFor="dateOfMarriageStart-day"
               >
                 Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -84595,6 +95832,17 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
                 htmlFor="dateOfMarriageStart-year"
               >
                 Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
+                >
+                  Required
+                </span>
               </label>
               <input
                 className="txt-f"
@@ -84709,7 +95957,7 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -85325,7 +96573,7 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston default 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -85775,7 +97023,7 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston user has selected
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -86247,7 +97495,7 @@ exports[`Storyshots Marriage/Question Components/FiledInBoston user is not sure
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -86717,7 +97965,7 @@ exports[`Storyshots Marriage/Question Components/ForWhom default 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -87139,7 +98387,7 @@ exports[`Storyshots Marriage/Question Components/ForWhom someone else’s 1`] =
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -87561,7 +98809,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -87862,11 +99110,16 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
         <label
           className="txt-l "
           htmlFor="input-1103008209"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -87896,7 +99149,11 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
         <label
           className="txt-l "
           htmlFor="input-5381"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           Maiden name 
           <span
@@ -88235,7 +99492,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -88531,11 +99788,16 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
         <label
           className="txt-l "
           htmlFor="input-1103008209"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -88565,7 +99827,11 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
         <label
           className="txt-l "
           htmlFor="input-5381"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           Maiden name 
           <span
@@ -88904,7 +100170,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -89200,11 +100466,16 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
         <label
           className="txt-l "
           htmlFor="input-1103008209"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           <span
             style={
               Object {
+                "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
               }
@@ -89234,7 +100505,11 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
         <label
           className="txt-l "
           htmlFor="input-5381"
-          style={Object {}}
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
         >
           Maiden name 
           <span
@@ -89585,7 +100860,7 @@ exports[`Storyshots Marriage/Question Components/VerifyIdentification default 1`
 .emotion-0 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -90317,7 +101592,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -91118,7 +102393,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -91665,7 +102940,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -92468,7 +103743,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -93254,7 +104529,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -93761,11 +105036,16 @@ Array [
                   <label
                     className="txt-l "
                     htmlFor="input-1103008209"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
@@ -93795,7 +105075,11 @@ Array [
                   <label
                     className="txt-l "
                     htmlFor="input-5381"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     Maiden name 
                     <span
@@ -94304,7 +105588,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -94811,11 +106095,16 @@ Array [
                   <label
                     className="txt-l "
                     htmlFor="input-1103008209"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     <span
                       style={
                         Object {
+                          "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
                         }
@@ -94845,7 +106134,11 @@ Array [
                   <label
                     className="txt-l "
                     htmlFor="input-5381"
-                    style={Object {}}
+                    style={
+                      Object {
+                        "display": "flex",
+                      }
+                    }
                   >
                     Maiden name 
                     <span
@@ -95366,7 +106659,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
@@ -96366,7 +107659,7 @@ Array [
 .emotion-4 {
   padding-bottom: 0.25rem;
   margin-bottom: 0;
-  font-family: Lora,Georgia,serif !important;
+  font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   font-size: 1.5rem;
   color: #091f2f;
diff --git a/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx b/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx
index a803f92d0..3eb5e3d7e 100644
--- a/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx
+++ b/services-js/registry-certs/client/common/question-components/FieldsetComponent.tsx
@@ -24,7 +24,7 @@ interface Props {
  */
 export default function FieldsetComponent(props: Props): JSX.Element {
   const { legendText, className, description } = props;
-  console.log('desc: ', description);
+
   return (
     <fieldset className={className || ''} css={FIELDSET_STYLING}>
       <legend>{legendText}</legend>
diff --git a/services-js/registry-certs/client/common/question-components/styling.tsx b/services-js/registry-certs/client/common/question-components/styling.tsx
index a093c409f..e4751c601 100644
--- a/services-js/registry-certs/client/common/question-components/styling.tsx
+++ b/services-js/registry-certs/client/common/question-components/styling.tsx
@@ -7,8 +7,9 @@ import {
   MEDIA_LARGE,
   MEDIA_MEDIUM,
   MEDIA_SMALL,
-  SERIF,
+  // SERIF,
   SANS,
+  DEFAULT_TEXT,
 } from '@cityofboston/react-fleet';
 
 export const THICK_BORDER_STYLE = `4px solid ${CHARLES_BLUE}`;
@@ -22,7 +23,7 @@ export const FOCUS_STYLE = css({
 export const SECTION_HEADING_STYLING = css({
   paddingBottom: '0.25rem',
   marginBottom: '0',
-  fontFamily: `${SERIF} !important`,
+  fontFamily: `${SANS}`,
   fontWeight: 700,
   fontSize: '1.5rem',
   color: CHARLES_BLUE,
@@ -179,13 +180,13 @@ export const NAME_FIELDS_BASIC_CONTAINER_STYLING = css({
   },
 
   '.notice': {
-    fontSize: '0.7em',
+    fontSize: '0.8125em',
 
     clear: 'both',
     minHeight: '1px',
     overflow: 'hidden',
     display: 'block',
-    margin: '1% 0 1.5%',
+    margin: '0.25em 0 0.75em 0',
     lineHeight: '1.5em',
   },
 
@@ -197,9 +198,13 @@ export const NAME_FIELDS_BASIC_CONTAINER_STYLING = css({
   },
 });
 
+export const SELECTINPUT_WRAPPER_STYLING = css(`
+  margin-bottom: 2em;
+`);
+
 export const RADIOGROUP_CONTAINER_STYLING = css({
   flexDirection: 'column',
-  paddingTop: '1em',
+  marginBottom: '1em',
 
   '> label': {
     display: 'flex',
@@ -207,6 +212,20 @@ export const RADIOGROUP_CONTAINER_STYLING = css({
     marginBottom: '1em',
   },
 
+  '.radio-group__label': {
+    label: {
+      '.ra-l': {
+        fontSize: '0.8125rem',
+      },
+    },
+
+    '.txt-l': {
+      fontSize: '0.875em',
+      marginBottom: '0.75em',
+      marginTop: 0,
+    },
+  },
+
   [MEDIA_MEDIUM]: {
     '.cb': {
       margin: 0,
@@ -228,17 +247,39 @@ export const HEADER_SPACING_2_STYLING = css({
   marginTop: '2em',
 });
 
-export const SECTION_WRAPPER_STYLING = css({
-  marginBottom: '2.5em',
-});
+export const SECTION_WRAPPER_STYLING = css(`
+  margin-bottom: 3em;
+  background: none;
+
+  label {
+    margin-top: 0em;
+  }
+
+  .spacingTop {
+    margin-top: 1.5em;
+  }
+
+  label.inputHeading {
+    font-size: 0.875em;
+    text-transform: uppercase;
+
+    .t--req {
+      margin-left: 0.5rem;
+    }
+  }
+
+  .t--opt {
+    color: ${DEFAULT_TEXT} !important;
+  }
+`);
 
 export const HEADER_PADDING_TOP_STYLING = css({
   paddingBottom: '2em',
 });
 
-export const BOTTOM_SPACING_STYLING = css({
-  marginBottom: '2.5em',
-});
+export const BOTTOM_SPACING_STYLING = css(`
+  margin-bottom: 2.25em;
+`);
 
 export const PAIRED_INPUT_STYLING = css({
   [MEDIA_MEDIUM]: {
@@ -262,11 +303,11 @@ export const MARRIAGE_INTENTION_FORM_STYLING = css({
   },
 });
 
-export const MARRIAGE_INTENTION_INTRO_STYLING = css({
-  fontSize: '1.5em',
-  lineHeight: '1.5em',
-  marginTop: '1em',
-});
+export const MARRIAGE_INTENTION_INTRO_STYLING = css(`
+  font-size: 1.5em;
+  line-height: 1.5em;
+  margin-top: 1em;
+`);
 
 export const MARRIAGE_INTENTION_INTRO_BODY_STYLING = css({
   lineHeight: '1.25em',
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
index 47ad39754..e6077ebda 100644
--- a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -1,6 +1,12 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/core';
+
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
+import { ToolTip } from '@cityofboston/react-fleet';
+
 import { MarriageIntentionCertificateRequestInformation } from '../../types';
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 
@@ -17,6 +23,15 @@ import {
 } from '../helpers/formUtils';
 import ContactUX from './reviewUI/contact';
 
+import {
+  nameFields,
+  datePlaceOfBirth,
+  residence,
+  marriageBlock,
+} from './partnerFormUI';
+
+import { BOSTON_NEIGHBORHOODS } from '../forms/inputData';
+
 function makeMarriageIntentionCertificateRequest(
   answers: Partial<MarriageIntentionCertificateRequestInformation> = {}
 ): MarriageIntentionCertificateRequest {
@@ -27,6 +42,108 @@ function makeMarriageIntentionCertificateRequest(
   return marriageIntentionCertificateRequest;
 }
 
+const marriageIntentionCert = makeMarriageIntentionCertificateRequest();
+
+export const updateAge = (age: string) => {
+  marriageIntentionCert.answerQuestion(
+    {
+      partnerA_age: age,
+    },
+    ''
+  );
+};
+
+export const calcAge = (dateObj: Date) => {
+  const today = new Date();
+  let age = today.getFullYear() - dateObj.getFullYear();
+  const m = today.getMonth() - dateObj.getMonth();
+
+  if (m < 0 || (m === 0 && today.getDate() < dateObj.getDate())) {
+    age = age - 1;
+  }
+
+  return age;
+};
+
+export const isDateObj = (dateObj: Date | null) => {
+  if (Object.prototype.toString.call(dateObj) === '[object Date]') {
+    return true;
+  }
+  return false;
+};
+
+export const handleBirthplaceCountryChange = (event: {
+  target: { value: string; name: any };
+}): void => {
+  console.log(
+    'handleBirthplaceCountryChange: ',
+    event.target.value,
+    event.target,
+    marriageIntentionCert.requestInformation
+  );
+  marriageIntentionCert.answerQuestion(
+    {
+      [event.target.name]: event.target.value,
+    },
+    ''
+  );
+  if (event.target.value !== 'USA') {
+    marriageIntentionCert.answerQuestion(
+      {
+        ['partnerA_birthState']: '',
+      },
+      ''
+    );
+  }
+};
+
+export const handleBirthDateChange = (newDate): void => {
+  const isDate = isDateObj(newDate);
+  let age = '';
+  if (isDate) {
+    age = `${calcAge(newDate)}`;
+    updateAge(age);
+  }
+  marriageIntentionCert.answerQuestion(
+    {
+      partnerA_dob: newDate,
+    },
+    ''
+  );
+};
+
+export const checkBirthCityForNeighborhood = (): void => {
+  const {
+    partnerA_birthCountry,
+    partnerA_birthCity,
+    partnerA_birthState,
+  } = marriageIntentionCert.requestInformation;
+  const inlowerCase = partnerA_birthCity.toLowerCase();
+  const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+
+  if (
+    partnerA_birthCountry === 'USA' &&
+    (partnerA_birthState === 'MA' || partnerA_birthState === 'Massachusetts') &&
+    isBosNeighborhood > -1
+  ) {
+    marriageIntentionCert.answerQuestion(
+      {
+        ['partnerA_birthCity']: 'Boston',
+      },
+      ''
+    );
+  }
+};
+
+export const handleChange = (event): void => {
+  marriageIntentionCert.answerQuestion(
+    {
+      [event.target.name]: event.target.value,
+    },
+    ''
+  );
+};
+
 storiesOf('Marriage Intention/Form Pages', module)
   .add('Step 1. Instructions', () => (
     <IndexPage
@@ -46,6 +163,142 @@ storiesOf('Marriage Intention/Form Pages', module)
       completedSteps={new Set([0, 1])}
     />
   ))
+  .add('Step 2. Person 1 - Naming Fields, no surname', () => {
+    return (
+      <>
+        {nameFields({
+          partnerFlag: `1`,
+          handleChange: () => {},
+          handleResidenceStateChange: () => {},
+          handleUseSurnameChange: () => {},
+          firstName: `Peter`,
+          lastName: `Pan`,
+          middleName: `Neverland`,
+          surName: `Neverland`,
+          useSurname: `0`,
+          occupation: 'Deveveloper',
+          suffix: ``,
+        })}
+      </>
+    );
+  })
+  .add('Step 2. Person 1 - Naming Fields, w/surname', () => {
+    return (
+      <>
+        {nameFields({
+          partnerFlag: `1`,
+          handleChange: () => {},
+          handleResidenceStateChange: () => {},
+          handleUseSurnameChange: () => {},
+          firstName: `Peter`,
+          lastName: `Pan`,
+          middleName: `Neverland`,
+          surName: `Neverland`,
+          useSurname: `1`,
+          occupation: 'Deveveloper',
+          suffix: ``,
+        })}
+      </>
+    );
+  })
+  .add('Step 2. Person 1 - Birth Date & Place, wo/Country', () => {
+    const {
+      partnerA_birthCountry,
+      partnerA_birthState,
+      partnerA_birthCity,
+    } = marriageIntentionCert.requestInformation;
+    return (
+      <>
+        {datePlaceOfBirth({
+          partnerFlag: `A`,
+          partnerDOB: new Date('2003/09/01'),
+          birthCountryStr: partnerA_birthCountry,
+          birthStateStr: partnerA_birthState,
+          birthCityStr: partnerA_birthCity,
+          handleChange,
+          handleBirthplaceCountryChange,
+          checkBirthCityForNeighborhood,
+          handleBirthDateChange,
+        })}
+      </>
+    );
+  })
+  .add('Step 2. Person 1 - Birth Date & Place, w/Country(USA)', () => {
+    return (
+      <>
+        {datePlaceOfBirth({
+          partnerFlag: `A`,
+          partnerDOB: new Date('2003/09/01'),
+          birthCountryStr: `USA`,
+          birthStateStr: `MA`,
+          birthCityStr: `Boston`,
+          handleChange,
+          handleBirthplaceCountryChange,
+          checkBirthCityForNeighborhood,
+          handleBirthDateChange,
+        })}
+      </>
+    );
+  })
+  .add('Step 2. Person 1 - Birth Date & Place, w/Country(CAN)', () => {
+    return (
+      <>
+        {datePlaceOfBirth({
+          partnerFlag: `A`,
+          partnerDOB: new Date('2003/09/01'),
+          birthCountryStr: `CAN`,
+          birthStateStr: `Québec`,
+          birthCityStr: `Montreal`,
+          handleChange,
+          handleBirthplaceCountryChange,
+          checkBirthCityForNeighborhood,
+          handleBirthDateChange,
+        })}
+      </>
+    );
+  })
+  .add('Step 2. Person 1 - Residende, City Hall', () => {
+    return (
+      <>
+        {residence({
+          partnerFlag: `A`,
+          residenceZipStr: `02201`,
+          residenceCityStr: `Boston`,
+          residenceStateStr: `MA`,
+          residenceAddressStr: `1 City Hall Square`,
+          residenceCountryStr: `USA`,
+          handleChange: handleChange,
+          handleZipCodeChange: handleChange,
+          replaceBosNeighborhoods: handleChange,
+          handleResidenceStateChange: handleChange,
+          handleResidenceCountryChange: handleChange,
+        })}
+      </>
+    );
+  })
+  .add('Step 2. Person 1 - Marriage, Default', () => {
+    return (
+      <>
+        {marriageBlock({
+          partnerFlag: `A`,
+          bloodRelation: `Yes`,
+          bloodRelationDesc: `3rd Cousins`,
+          marriedBefore: `Yes`,
+          marriageNumb: `2nd`,
+          lastMarriageStatus: `WID`,
+
+          partnershipType: `CIV`,
+          partnershipState: `MA`,
+          partnershipTypeDissolved: `Yes`,
+
+          handleChange: handleChange,
+          handleBloodRelChange: handleChange,
+          handleBloodRelDescChange: handleChange,
+          handleMarriedBeforeChange: handleChange,
+        })}
+      </>
+    );
+  })
   .add('Step 3. Person 2', () => (
     <IndexPage
       currentStep="partnerFormB"
@@ -133,4 +386,18 @@ storiesOf('Marriage Intention/Form Pages', module)
       marriageIntentionDao={new MarriageIntentionDao(null as any)}
       completedSteps={new Set([0, 1, 2, 3, 4, 5])}
     />
-  ));
+  ))
+  .add('Tool-Tip', () => {
+    const spacing = css(`margin-top: 4em;`);
+    const elem = ToolTip({
+      icon: '?',
+      msg:
+        'This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.',
+    });
+    return (
+      <div>
+        <div>{elem}</div>
+        <div css={spacing}>{elem}</div>
+      </div>
+    );
+  });
diff --git a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
index e536d299c..cef9987e3 100644
--- a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
@@ -170,7 +170,7 @@ export default class ContactInfo extends Component<Props> {
                   name="email"
                   value={email}
                   onChange={this.handleChange}
-                  optionalDescription={''}
+                  // optionalDescription={''}
                   required={true}
                   className={'contact-fields'}
                 />
@@ -180,7 +180,7 @@ export default class ContactInfo extends Component<Props> {
                   name="emailConfirm"
                   value={emailConfirm}
                   onChange={this.handleChange}
-                  optionalDescription={''}
+                  // optionalDescription={''}
                   required={true}
                   error={email === emailConfirm ? '' : 'Email does not match'}
                   className={'contact-fields'}
diff --git a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
new file mode 100644
index 000000000..b377a049c
--- /dev/null
+++ b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
@@ -0,0 +1,113 @@
+import { ChangeEvent } from 'react';
+import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
+
+export const handleChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, certObj } = data;
+  certObj.answerQuestion(
+    {
+      [e.target.name]: e.target.value,
+    },
+    ''
+  );
+};
+
+export const handleUseSurnameChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  inputName: string;
+  textInput: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, inputName, textInput, certObj } = data;
+  certObj.answerQuestion(
+    {
+      [inputName]: e.target.value,
+    },
+    ''
+  );
+
+  if (e.target.value === '0') {
+    certObj.answerQuestion(
+      {
+        [textInput]: '',
+      },
+      ''
+    );
+  }
+};
+
+export const handleAdditionalParentChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  additionalParent: string;
+  parentB_Name: string;
+  parentB_Surname: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, additionalParent, parentB_Name, parentB_Surname, certObj } = data;
+  certObj.answerQuestion(
+    {
+      [additionalParent]: e.target.value,
+    },
+    ''
+  );
+
+  if (e.target.value === '0') {
+    certObj.answerQuestion(
+      {
+        [parentB_Surname]: '',
+        [parentB_Name]: '',
+      },
+      ''
+    );
+  }
+};
+
+export const handleBloodRelDescChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  partnerA: string;
+  partnerB: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, partnerA, partnerB, certObj } = data;
+
+  certObj.answerQuestion(
+    {
+      [partnerA]: e.target.value,
+      [partnerB]: e.target.value,
+    },
+    ''
+  );
+};
+
+export const handleBloodRelChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  partnerA: string;
+  partnerB: string;
+  partnerADesc: string;
+  partnerBDesc: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, partnerA, partnerB, partnerADesc, partnerBDesc, certObj } = data;
+
+  certObj.answerQuestion(
+    {
+      [partnerA]: e.target.value,
+      [partnerB]: e.target.value,
+    },
+    ''
+  );
+
+  if (e.target.value === '0') {
+    certObj.answerQuestion(
+      {
+        [partnerADesc]: '',
+        [partnerBDesc]: '',
+      },
+      ''
+    );
+  }
+};
+
+export default handleChange$;
diff --git a/services-js/registry-certs/client/marriageintention/forms/inputData.tsx b/services-js/registry-certs/client/marriageintention/forms/inputData.tsx
index dd30bfd5a..49a2821bc 100644
--- a/services-js/registry-certs/client/marriageintention/forms/inputData.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/inputData.tsx
@@ -1,8 +1,4 @@
 export const SUFFIX_OPTIONS = [
-  {
-    label: 'Does Not Apply',
-    value: 'N/A',
-  },
   {
     label: 'I',
     value: 'I',
@@ -87,6 +83,21 @@ export const PARTNERSHIP_TYPE = [
   },
 ];
 
+export const PARTNERSHIP_TYPE2 = [
+  {
+    label: 'Yes, a civil union',
+    value: 'CIV',
+  },
+  {
+    label: 'Yes, a domestic partnership',
+    value: 'DOM',
+  },
+  {
+    label: 'No',
+    value: 'N/A',
+  },
+];
+
 export const PARTNERSHIP_TYPE_DISSOLVED = [
   {
     label: 'Does Not Apply',
@@ -114,10 +125,6 @@ export const SEX_CHECKBOX = [
 ];
 
 export const MARRIAGE_COUNT = [
-  {
-    label: '1st',
-    value: '1st',
-  },
   {
     label: '2nd',
     value: '2nd',
@@ -183,411 +190,6 @@ export const BOSTON_NEIGHBORHOODS = [
   'west roxbury',
 ];
 
-export const US_STATES = [
-  { label: '--', value: '', field: '' },
-  { label: 'AL', value: 'AL', field: '' },
-  { label: 'AK', value: 'AK', field: '' },
-  { label: 'AZ', value: 'AZ', field: '' },
-  { label: 'AR', value: 'AR', field: '' },
-  { label: 'CA', value: 'CA', field: '' },
-  { label: 'CO', value: 'CO', field: '' },
-  { label: 'CT', value: 'CT', field: '' },
-  { label: 'DE', value: 'DE', field: '' },
-  { label: 'DC', value: 'DC', field: '' },
-  { label: 'FL', value: 'FL', field: '' },
-  { label: 'GA', value: 'GA', field: '' },
-  { label: 'HI', value: 'HI', field: '' },
-  { label: 'ID', value: 'ID', field: '' },
-  { label: 'IL', value: 'IL', field: '' },
-  { label: 'IN', value: 'IN', field: '' },
-  { label: 'IA', value: 'IA', field: '' },
-  { label: 'KS', value: 'KS', field: '' },
-  { label: 'KY', value: 'KY', field: '' },
-  { label: 'LA', value: 'LA', field: '' },
-  { label: 'ME', value: 'ME', field: '' },
-  { label: 'MD', value: 'MD', field: '' },
-  { label: 'MA', value: 'MA', field: '' },
-  { label: 'MI', value: 'MI', field: '' },
-  { label: 'MN', value: 'MN', field: '' },
-  { label: 'MS', value: 'MS', field: '' },
-  { label: 'MO', value: 'MO', field: '' },
-  { label: 'MT', value: 'MT', field: '' },
-  { label: 'NE', value: 'NE', field: '' },
-  { label: 'NV', value: 'NV', field: '' },
-  { label: 'NH', value: 'NH', field: '' },
-  { label: 'NJ', value: 'NJ', field: '' },
-  { label: 'NM', value: 'NM', field: '' },
-  { label: 'NY', value: 'NY', field: '' },
-  { label: 'NC', value: 'NC', field: '' },
-  { label: 'ND', value: 'ND', field: '' },
-  { label: 'OH', value: 'OH', field: '' },
-  { label: 'OK', value: 'OK', field: '' },
-  { label: 'OR', value: 'OR', field: '' },
-  { label: 'PA', value: 'PA', field: '' },
-  { label: 'RI', value: 'RI', field: '' },
-  { label: 'SC', value: 'SC', field: '' },
-  { label: 'SD', value: 'SD', field: '' },
-  { label: 'TN', value: 'TN', field: '' },
-  { label: 'TX', value: 'TX', field: '' },
-  { label: 'UT', value: 'UT', field: '' },
-  { label: 'VT', value: 'VT', field: '' },
-  { label: 'VA', value: 'VA', field: '' },
-  { label: 'WA', value: 'WA', field: '' },
-  { label: 'WV', value: 'WV', field: '' },
-  { label: 'WI', value: 'WI', field: '' },
-  { label: 'WY', value: 'WY', field: '' },
-];
-
-export const COUNTRIES = [
-  {
-    label: 'United States of America',
-    shortLabel: 'USA',
-    value: 'USA',
-  },
-  {
-    label: 'United States Virgin Islands',
-    shortLabel: 'Virgin Islands',
-    value: 'VIR',
-  },
-  { label: 'Afghanistan', value: 'AFG' },
-  {
-    label: 'Åland Islands',
-    shortLabel: 'Aland Islands',
-    value: 'ALA',
-  },
-  { label: 'Albania', value: 'ALB' },
-  { label: 'Algeria', value: 'DZA' },
-  { label: 'American Samoa', value: 'ASM' },
-  { label: 'Andorra', value: 'AND' },
-  { label: 'Angola', value: 'AGO' },
-  { label: 'Anguilla', value: 'AIA' },
-  { label: 'Antigua and Barbuda', value: 'ATG' },
-  { label: 'Argentina', value: 'ARG' },
-  { label: 'Armenia', value: 'ARM' },
-  { label: 'Aruba', value: 'ABW' },
-  { label: 'Australia', value: 'AUS' },
-  { label: 'Austria', value: 'AUT' },
-  { label: 'Azerbaijan', value: 'AZE' },
-  { label: 'Bahamas', value: 'BHS' },
-  { label: 'Bahrain', value: 'BHR' },
-  { label: 'Bangladesh', value: 'BGD' },
-  { label: 'Barbados', value: 'BRB' },
-  { label: 'Belarus', value: 'BLR' },
-  { label: 'Belgium', value: 'BEL' },
-  { label: 'Belize', value: 'BLZ' },
-  { label: 'Benin', value: 'BEN' },
-  { label: 'Bermuda', value: 'BMU' },
-  { label: 'Bhutan', value: 'BTN' },
-  {
-    label: 'Bolivia (Plurinational State of)',
-    shortLabel: 'Bolivia',
-    value: 'BOL',
-  },
-  {
-    label: 'Bonaire, Saint Eustatius and Saba',
-    shortLabel: 'Bonaire',
-    value: 'BES',
-  },
-  { label: 'Bosnia and Herzegovina', value: 'BIH' },
-  { label: 'Botswana', value: 'BWA' },
-  { label: 'Brazil', value: 'BRA' },
-  { label: 'British Virgin Islands', value: 'VGB' },
-  { label: 'Brunei Darussalam', value: 'BRN' },
-  { label: 'Bulgaria', value: 'BGR' },
-  { label: 'Burkina Faso', value: 'BFA' },
-  { label: 'Burundi', value: 'BDI' },
-  { label: 'Cabo Verde', value: 'CPV' },
-  { label: 'Cambodia', value: 'KHM' },
-  { label: 'Cameroon', value: 'CMR' },
-  { label: 'Canada', value: 'CAN' },
-  { label: 'Cayman Islands', value: 'CYM' },
-  { label: 'Central African Republic', value: 'CAF' },
-  { label: 'Chad', value: 'TCD' },
-  { label: 'Chile', value: 'CHL' },
-  { label: 'China', value: 'CHN' },
-  {
-    label: 'China, Hong Kong Special Administrative Region',
-    shortLabel: 'China',
-    value: 'HKG',
-  },
-  {
-    label: 'China, Macao Special Administrative Region',
-    shortLabel: 'Macao',
-    value: 'MAC',
-  },
-  { label: 'Colombia', value: 'COL' },
-  { label: 'Comoros', value: 'COM' },
-  { label: 'Congo', value: 'COG' },
-  { label: 'Cook Islands', value: 'COK' },
-  { label: 'Costa Rica', value: 'CRI' },
-  { label: "Côte d'Ivoire", value: 'CIV' },
-  { label: 'Croatia', value: 'HRV' },
-  { label: 'Cuba', value: 'CUB' },
-  { label: 'Curaçao', value: 'CUW' },
-  { label: 'Cyprus', value: 'CYP' },
-  { label: 'Czech Republic', value: 'CZE' },
-  {
-    label: "Democratic People's Republic of Korea",
-    shortLabel: 'North Korea',
-    value: 'PRK',
-  },
-  {
-    label: 'Democratic Republic of the Congo',
-    shortLabel: 'Congo',
-    value: 'COD',
-  },
-  { label: 'Denmark', value: 'DNK' },
-  { label: 'Djibouti', value: 'DJI' },
-  { label: 'Dominica', value: 'DMA' },
-  { label: 'Dominican Republic', value: 'DOM' },
-  { label: 'Ecuador', value: 'ECU' },
-  { label: 'Egypt', value: 'EGY' },
-  { label: 'El Salvador', value: 'SLV' },
-  { label: 'Equatorial Guinea', value: 'GNQ' },
-  { label: 'Eritrea', value: 'ERI' },
-  { label: 'Estonia', value: 'EST' },
-  { label: 'Ethiopia', value: 'ETH' },
-  { label: 'Faeroe Islands', value: 'FRO' },
-  {
-    label: 'Falkland Islands (Malvinas)',
-    shortLabel: 'Falkland Islands',
-    value: 'FLK',
-  },
-  { label: 'Fiji', value: 'FJI' },
-  { label: 'Finland', value: 'FIN' },
-  { label: 'France', value: 'FRA' },
-  { label: 'French Guiana', value: 'GUF' },
-  { label: 'French Polynesia', value: 'PYF' },
-  { label: 'Gabon', value: 'GAB' },
-  { label: 'Gambia', value: 'GMB' },
-  { label: 'Georgia', value: 'GEO' },
-  { label: 'Germany', value: 'DEU' },
-  { label: 'Ghana', value: 'GHA' },
-  { label: 'Gibraltar', value: 'GIB' },
-  { label: 'Greece', value: 'GRC' },
-  { label: 'Greenland', value: 'GRL' },
-  { label: 'Grenada', value: 'GRD' },
-  { label: 'Guadeloupe', value: 'GLP' },
-  { label: 'Guam', value: 'GUM' },
-  { label: 'Guatemala', value: 'GTM' },
-  { label: 'Guernsey', value: 'GGY' },
-  { label: 'Guinea', value: 'GIN' },
-  { label: 'Guinea-Bissau', value: 'GNB' },
-  { label: 'Guyana', value: 'GUY' },
-  { label: 'Haiti', value: 'HTI' },
-  { label: 'Holy See', value: 'VAT' },
-  { label: 'Honduras', value: 'HND' },
-  { label: 'Hungary', value: 'HUN' },
-  { label: 'Iceland', value: 'ISL' },
-  { label: 'India', value: 'IND' },
-  { label: 'Indonesia', value: 'IDN' },
-  {
-    label: 'Iran (Islamic Republic of)',
-    shortLabel: 'Iran',
-    value: 'IRN',
-  },
-  { label: 'Iraq', value: 'IRQ' },
-  { label: 'Ireland', value: 'IRL' },
-  { label: 'Isle of Man', value: 'IMN' },
-  { label: 'Israel', value: 'ISR' },
-  { label: 'Italy', value: 'ITA' },
-  { label: 'Jamaica', value: 'JAM' },
-  { label: 'Japan', value: 'JPN' },
-  { label: 'Jersey', value: 'JEY' },
-  { label: 'Jordan', value: 'JOR' },
-  { label: 'Kazakhstan', value: 'KAZ' },
-  { label: 'Kenya', value: 'KEN' },
-  { label: 'Kiribati', value: 'KIR' },
-  { label: 'Kuwait', value: 'KWT' },
-  { label: 'Kyrgyzstan', value: 'KGZ' },
-  {
-    label: "Lao People's Democratic Republic",
-    shortLabel: 'Lao',
-    value: 'LAO',
-  },
-  { label: 'Latvia', value: 'LVA' },
-  { label: 'Lebanon', value: 'LBN' },
-  { label: 'Lesotho', value: 'LSO' },
-  { label: 'Liberia', value: 'LBR' },
-  { label: 'Libya', value: 'LBY' },
-  { label: 'Liechtenstein', value: 'LIE' },
-  { label: 'Lithuania', value: 'LTU' },
-  { label: 'Luxembourg', value: 'LUX' },
-  { label: 'Madagascar', value: 'MDG' },
-  { label: 'Malawi', value: 'MWI' },
-  { label: 'Malaysia', value: 'MYS' },
-  { label: 'Maldives', value: 'MDV' },
-  { label: 'Mali', value: 'MLI' },
-  { label: 'Malta', value: 'MLT' },
-  { label: 'Marshall Islands', value: 'MHL' },
-  { label: 'Martinique', value: 'MTQ' },
-  { label: 'Mauritania', value: 'MRT' },
-  { label: 'Mauritius', value: 'MUS' },
-  { label: 'Mayotte', value: 'MYT' },
-  { label: 'Mexico', value: 'MEX' },
-  {
-    label: 'Micronesia (Federated States of)',
-    shortLabel: 'Micronesia',
-    value: 'FSM',
-  },
-  { label: 'Monaco', value: 'MCO' },
-  { label: 'Mongolia', value: 'MNG' },
-  { label: 'Montenegro', value: 'MNE' },
-  { label: 'Montserrat', value: 'MSR' },
-  { label: 'Morocco', value: 'MAR' },
-  { label: 'Mozambique', value: 'MOZ' },
-  { label: 'Myanmar', value: 'MMR' },
-  { label: 'Namibia', value: 'NAM' },
-  { label: 'Nauru', value: 'NRU' },
-  { label: 'Nepal', value: 'NPL' },
-  { label: 'Netherlands', value: 'NLD' },
-  { label: 'New Caledonia', value: 'NCL' },
-  { label: 'New Zealand', value: 'NZL' },
-  { label: 'Nicaragua', value: 'NIC' },
-  { label: 'Niger', value: 'NER' },
-  { label: 'Nigeria', value: 'NGA' },
-  { label: 'Niue', value: 'NIU' },
-  { label: 'Norfolk Island', value: 'NFK' },
-  {
-    label: 'Northern Mariana Islands',
-    shortLabel: 'Mariana Islands',
-    value: 'MNP',
-  },
-  { label: 'Norway', value: 'NOR' },
-  { label: 'Oman', value: 'OMN' },
-  { label: 'Pakistan', value: 'PAK' },
-  { label: 'Palau', value: 'PLW' },
-  { label: 'Panama', value: 'PAN' },
-  { label: 'Papua New Guinea', value: 'PNG' },
-  { label: 'Paraguay', value: 'PRY' },
-  { label: 'Peru', value: 'PER' },
-  { label: 'Philippines', value: 'PHL' },
-  { label: 'Pitcairn', value: 'PCN' },
-  { label: 'Poland', value: 'POL' },
-  { label: 'Portugal', value: 'PRT' },
-  { label: 'Puerto Rico', value: 'PRI' },
-  { label: 'Qatar', value: 'QAT' },
-  { label: 'Republic of Korea', value: 'KOR' },
-  {
-    label: 'Republic of Moldova',
-    shortLabel: 'Moldova',
-    value: 'MDA',
-  },
-  { label: 'Réunion', value: 'REU' },
-  { label: 'Romania', value: 'ROU' },
-  { label: 'Russian Federation', value: 'RUS' },
-  { label: 'Rwanda', value: 'RWA' },
-  { label: 'Saint-Barthélemy', value: 'BLM' },
-  { label: 'Saint Helena', value: 'SHN' },
-  { label: 'Saint Kitts and Nevis', value: 'KNA' },
-  { label: 'Saint Lucia', value: 'LCA' },
-  {
-    label: 'Saint-Martin (French part)',
-    shortLabel: 'Saint-Martin',
-    value: 'MAF',
-  },
-  { label: 'Saint Pierre and Miquelon', value: 'SPM' },
-  {
-    label: 'Saint Vincent and the Grenadines',
-    value: 'VCT',
-  },
-  { label: 'Samoa', value: 'WSM' },
-  { label: 'San Marino', value: 'SMR' },
-  { label: 'Sao Tome and Principe', value: 'STP' },
-  { label: 'Saudi Arabia', value: 'SAU' },
-  { label: 'Senegal', value: 'SEN' },
-  { label: 'Serbia', value: 'SRB' },
-  { label: 'Seychelles', value: 'SYC' },
-  { label: 'Sierra Leone', value: 'SLE' },
-  { label: 'Singapore', value: 'SGP' },
-  {
-    label: 'Sint Maarten (Dutch part)',
-    shortLabel: 'Sint Maarten',
-    value: 'SXM',
-  },
-  { label: 'Slovakia', value: 'SVK' },
-  { label: 'Slovenia', value: 'SVN' },
-  { label: 'Solomon Islands', value: 'SLB' },
-  { label: 'Somalia', value: 'SOM' },
-  { label: 'South Africa', value: 'ZAF' },
-  { label: 'South Sudan', value: 'SSD' },
-  { label: 'Spain', value: 'ESP' },
-  { label: 'Sri Lanka', value: 'LKA' },
-  {
-    label: 'State of Palestine',
-    shortLabel: 'Palestine',
-    value: 'PSE',
-  },
-  { label: 'Sudan', value: 'SDN' },
-  { label: 'Suriname', value: 'SUR' },
-  {
-    label: 'Svalbard and Jan Mayen Islands',
-    shortLabel: 'Svalbard',
-    value: 'SJM',
-  },
-  { label: 'Swaziland', value: 'SWZ' },
-  { label: 'Sweden', value: 'SWE' },
-  { label: 'Switzerland', value: 'CHE' },
-  { label: 'Syrian Arab Republic', value: 'SYR' },
-  { label: 'Taiwan', value: 'TWAN' },
-  { label: 'Tajikistan', value: 'TJK' },
-  { label: 'Thailand', value: 'THA' },
-  {
-    label: 'The former Yugoslav Republic of Macedonia',
-    shortLabel: 'Macedonia',
-    value: 'MKD',
-  },
-  { label: 'Timor-Leste', value: 'TLS' },
-  { label: 'Togo', value: 'TGO' },
-  { label: 'Tokelau', value: 'TKL' },
-  { label: 'Tonga', value: 'TON' },
-  { label: 'Trinidad and Tobago', value: 'TTO' },
-  { label: 'Tunisia', value: 'TUN' },
-  { label: 'Turkey', value: 'TUR' },
-  { label: 'Turkmenistan', value: 'TKM' },
-  {
-    label: 'Turks and Caicos Islands',
-    shortLabel: 'Turks & Caicos',
-    value: 'TCA',
-  },
-  { label: 'Tuvalu', value: 'TUV' },
-  { label: 'Uganda', value: 'UGA' },
-  { label: 'Ukraine', value: 'UKR' },
-  {
-    label: 'United Arab Emirates',
-    shortLabel: 'UAE',
-    value: 'ARE',
-  },
-  {
-    label: 'United Kingdom of Great Britain and Northern Ireland',
-    shortLabel: 'United Kingdom',
-    value: 'GBR',
-  },
-  {
-    label: 'United Republic of Tanzania',
-    shortLabel: 'United Republic of Tanzania',
-    value: 'TZA',
-  },
-  { label: 'Uruguay', value: 'URY' },
-  { label: 'Uzbekistan', value: 'UZB' },
-  { label: 'Vanuatu', value: 'VUT' },
-  {
-    label: 'Venezuela (Bolivarian Republic of)',
-    shortLabel: 'Venezuela',
-    value: 'VEN',
-  },
-  { label: 'Vietnam', value: 'VNM' },
-  {
-    label: 'Wallis and Futuna Islands',
-    shortLabel: 'Wallis',
-    value: 'WLF',
-  },
-  { label: 'Western Sahara', value: 'ESH' },
-  { label: 'Yemen', value: 'YEM' },
-  { label: 'Zambia', value: 'ZMB' },
-  { label: 'Zimbabwe', value: 'ZWE' },
-];
-
 // JSON.stringify($('#ColA_ddlAddressCountry>option').map(function() {return {label: $(this).text(), value: $(this).val()};}).get());
 // JSON.stringify($('#ColA_ddlAddressState>option').map(function() {return {label: $(this).text(), value: $(this).val()};}).get());
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx
deleted file mode 100644
index 705ec0839..000000000
--- a/services-js/registry-certs/client/marriageintention/forms/partnerForm.tsx
+++ /dev/null
@@ -1,1113 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from '@emotion/core';
-
-import { ChangeEvent, Component, MouseEvent } from 'react';
-import { observer } from 'mobx-react';
-
-import {
-  TextInput,
-  MemorableDateInput,
-  RadioGroup,
-  SelectDropdown,
-} from '@cityofboston/react-fleet';
-
-import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
-import QuestionComponent from '../../common/question-components/QuestionComponent';
-import FieldsetComponent from '../../common/question-components/FieldsetComponent';
-
-import {
-  SECTION_HEADING_STYLING,
-  SECTION_WRAPPER_STYLING,
-  NAME_FIELDS_CONTAINER_STYLING,
-  NAME_FIELDS_BASIC_CONTAINER_STYLING,
-  HEADER_SPACING_STYLING,
-  RADIOGROUP_CONTAINER_STYLING,
-  HEADER_PADDING_TOP_STYLING,
-  OVERRIDE_SELECT_DISPLAY_STYLING,
-  MARRIAGE_INTENTION_FORM_STYLING,
-} from '../../common/question-components/styling';
-
-import {
-  ONE_AND_HALF_MARGINBOTTOM,
-  BOTTOM_SPACING_STYLING,
-  TWO_AND_HALF_MARGINBOTTOM,
-} from './styling';
-
-import {
-  // SEX_CHECKBOX,
-  BOOL_RADIOGROUP,
-  COUNTRIES,
-  PARTNERSHIP_TYPE_DISSOLVED,
-  PARTNERSHIP_TYPE,
-  MARRIAGE_COUNT,
-  US_STATES,
-  LAST_MARRIAGE_STATUS,
-  BOSTON_NEIGHBORHOODS,
-  SUFFIX_OPTIONS,
-} from './inputData';
-
-interface Props {
-  marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
-  handleProceed: (ev: MouseEvent) => void;
-  handleStepBack: (ev: MouseEvent) => void;
-  partnerLabel: string;
-}
-
-@observer
-export default class PartnerForm extends Component<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  public static isComplete({
-    requestInformation,
-  }: MarriageIntentionCertificateRequest): boolean {
-    const {
-      partnerA_firstName,
-      partnerA_lastName,
-      partnerA_surName,
-      partnerA_dob,
-      partnerA_age,
-      // partnerA_sex,
-      partnerA_occupation,
-      partnerA_residenceAddress,
-      partnerA_residenceCountry,
-      partnerA_bloodRelation,
-      partnerA_bloodRelationDesc,
-      partnerA_parentsMarriedAtBirth,
-      partnerA_parentA_Name,
-      partnerA_parentA_Surname,
-      partnerA_parentB_Name,
-      partnerA_parentB_Surname,
-      partnerA_birthCity,
-      partnerA_birthState,
-      partnerA_birthCountry,
-      partnerA_partnershipType,
-      partnerA_partnershipTypeDissolved,
-      partnerA_partnershipState,
-
-      partnerA_marriageNumb,
-      partnerA_lastMarriageStatus,
-    } = requestInformation;
-
-    let bloodRelReq = true;
-    let partnerA_partnership_dissolved = true;
-    let partnerA_lastMarriageStatusReq = true;
-    let partnerA_birthStateZip = true;
-    let partnershipState = true;
-    if (
-      partnerA_partnershipType !== PARTNERSHIP_TYPE[0].value &&
-      partnerA_partnershipState.length < 2
-    ) {
-      partnershipState = false;
-    }
-
-    const bloodRelDescReq =
-      partnerA_bloodRelation && partnerA_bloodRelation == '1' ? true : false;
-
-    if (partnerA_birthCountry === 'USA') {
-      partnerA_birthStateZip = partnerA_birthState.length > 0 ? true : false;
-    }
-
-    if (bloodRelDescReq && partnerA_bloodRelationDesc.length < 1) {
-      bloodRelReq = false;
-    }
-
-    const marriageNumb = MARRIAGE_COUNT.find(
-      entry => entry.value === partnerA_marriageNumb
-    );
-    if (marriageNumb && marriageNumb.value !== MARRIAGE_COUNT[0].value) {
-      if (partnerA_lastMarriageStatus === '') {
-        partnerA_lastMarriageStatusReq = false;
-      }
-    }
-
-    if (partnerA_partnershipType !== PARTNERSHIP_TYPE[0].value) {
-      if (partnerA_partnershipTypeDissolved === '') {
-        partnerA_partnership_dissolved = false;
-      }
-    }
-
-    return !!(
-      partnerA_firstName &&
-      partnerA_lastName &&
-      partnerA_surName &&
-      partnerA_dob &&
-      partnerA_age &&
-      // partnerA_sex &&
-      partnerA_bloodRelation &&
-      bloodRelReq &&
-      partnerA_parentsMarriedAtBirth &&
-      partnerA_parentA_Name &&
-      partnerA_parentA_Surname &&
-      partnerA_parentB_Name &&
-      partnerA_parentB_Surname &&
-      partnerA_birthCity &&
-      partnerA_birthCountry &&
-      partnerA_partnershipType &&
-      partnerA_partnership_dissolved &&
-      partnerA_marriageNumb &&
-      partnerA_lastMarriageStatusReq &&
-      partnerA_residenceAddress &&
-      partnerA_residenceCountry &&
-      partnerA_occupation &&
-      partnershipState &&
-      partnerA_birthStateZip
-    );
-  }
-
-  private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-  };
-
-  private handleBloodRelDescChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_bloodRelationDesc']: event.target.value,
-      },
-      ''
-    );
-
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerB_bloodRelationDesc']: event.target.value,
-      },
-      ''
-    );
-  };
-
-  private handleBloodRelChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_bloodRelation']: event.target.value,
-      },
-      ''
-    );
-
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerB_bloodRelation']: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value === '0') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_bloodRelationDesc']: '',
-        },
-        ''
-      );
-
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_bloodRelationDesc']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  private handleBirthDateChange = (newDate: Date | null): void => {
-    const isDate = this.isDateObj(newDate);
-    let age = '';
-    if (isDate) {
-      age = `${this.calcAge(newDate)}`;
-      this.updateAge(age);
-    }
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        partnerA_dob: newDate,
-      },
-      ''
-    );
-  };
-
-  private handleBirthplaceCountryChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value !== 'USA') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_birthState']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  private handleResidenceCountryChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value !== 'USA') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_residenceState']: '',
-        },
-        ''
-      );
-
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_residenceZip']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  private handleZipCodeChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    const val = event.target.value
-      .replace(/[^0-9]/g, '')
-      .replace(/(\..*)\./g, '$1');
-
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: val,
-      },
-      ''
-    );
-  };
-
-  private handleResidenceStateChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceCity,
-      partnerA_residenceCountry,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    const inlowerCase = partnerA_residenceCity.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (
-      partnerA_residenceCountry === 'USA' &&
-      event.target.value === 'MA' &&
-      isBosNeighborhood > -1
-    ) {
-      this.replaceBosNeighborhoods({
-        target: {
-          name: 'partnerA_residenceCity',
-          value: partnerA_residenceCity,
-        },
-      });
-    }
-  };
-
-  private replaceBosNeighborhoods = (
-    event:
-      | ChangeEvent<HTMLInputElement>
-      | {
-          target: { name: string; value: string };
-        }
-  ): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceCountry,
-      partnerA_residenceState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const inlowerCase = event.target.value.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-
-    if (
-      partnerA_residenceCountry === 'USA' &&
-      partnerA_residenceState === 'MA' &&
-      isBosNeighborhood > -1
-    ) {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          [event.target.name]: 'Boston',
-        },
-        ''
-      );
-    }
-  };
-
-  private checkBirthCityForNeighborhood = (): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthCountry,
-      partnerA_birthCity,
-      partnerA_birthState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const inlowerCase = partnerA_birthCity.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-
-    if (
-      partnerA_birthCountry === 'USA' &&
-      (partnerA_birthState === 'MA' ||
-        partnerA_birthState === 'Massachusetts') &&
-      isBosNeighborhood > -1
-    ) {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_birthCity']: 'Boston',
-        },
-        ''
-      );
-    }
-  };
-
-  private updateAge = age => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        partnerA_age: age,
-      },
-      ''
-    );
-  };
-
-  private calcAge = dateObj => {
-    const today = new Date();
-    let age = today.getFullYear() - dateObj.getFullYear();
-    const m = today.getMonth() - dateObj.getMonth();
-
-    if (m < 0 || (m === 0 && today.getDate() < dateObj.getDate())) {
-      age = age - 1;
-    }
-
-    return age;
-  };
-
-  private isDateObj = dateObj => {
-    if (Object.prototype.toString.call(dateObj) === '[object Date]') {
-      return true;
-    }
-    return false;
-  };
-
-  // RENDER ALL UI
-  public render() {
-    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
-    const {
-      partnerA_marriageNumb,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const marriageNumb = MARRIAGE_COUNT.find(
-      entry => entry.value === partnerA_marriageNumb
-    );
-
-    return (
-      <QuestionComponent
-        handleProceed={this.props.handleProceed}
-        handleStepBack={this.props.handleStepBack}
-        allowProceed={PartnerForm.isComplete(
-          marriageIntentionCertificateRequest
-        )}
-        nextButtonText={'NEXT'}
-      >
-        <FieldsetComponent
-          legendText={
-            <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
-          }
-        >
-          {this.nameFields()}
-          {this.dateOfBirth()}
-          {this.birthPlace()}
-          {this.residence()}
-
-          {marriageNumb &&
-            marriageNumb.value !== MARRIAGE_COUNT[0].value &&
-            this.lastMarriageStatus()}
-
-          {this.partnershipType()}
-          {this.parents()}
-          {/* {this.sex()} */}
-          {this.parentsMarried()}
-          {this.bloodRelation()}
-        </FieldsetComponent>
-      </QuestionComponent>
-    );
-  }
-
-  // UI ELEMENTS
-  // -----------
-
-  lastMarriageStatus() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_lastMarriageStatus,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            HEADER_SPACING_STYLING,
-            BOTTOM_SPACING_STYLING,
-          ]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            If Applicable, Status of Last Marriage
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <RadioGroup
-              items={LAST_MARRIAGE_STATUS}
-              name="partnerA_lastMarriageStatus"
-              checkedValue={partnerA_lastMarriageStatus}
-              handleItemChange={this.handleChange}
-              groupLabel=""
-              hideLabel
-            />
-
-            <label className="notice">
-              If void, please provide clerk with evidence.
-            </label>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceState() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <div css={NAME_FIELDS_CONTAINER_STYLING}>
-          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Residence State"
-                  hideBlankOption
-                  options={US_STATES}
-                  name={'partnerA_residenceState'}
-                  value={partnerA_residenceState}
-                  onChange={this.handleResidenceStateChange}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceZip() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceZip,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Residence Zip Code"
-          name="partnerA_residenceZip"
-          value={partnerA_residenceZip}
-          onChange={this.handleZipCodeChange}
-          disableLabelNoWrap={true}
-          maxLength={10}
-          minLength={5}
-        />
-      </div>
-    );
-  }
-
-  residence() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceCountry,
-      partnerA_marriageNumb,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <h2 css={SECTION_HEADING_STYLING}>Residence</h2>
-        </div>
-
-        <div
-          css={[TWO_AND_HALF_MARGINBOTTOM, NAME_FIELDS_BASIC_CONTAINER_STYLING]}
-        >
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Select Country of Residence"
-                  // hideBlankOption
-                  options={COUNTRIES}
-                  name={'partnerA_residenceCountry'}
-                  value={partnerA_residenceCountry}
-                  onChange={this.handleResidenceCountryChange}
-                  disableLabelNoWrap={true}
-                />
-              </div>
-            </div>
-          </div>
-
-          {partnerA_residenceCountry === 'USA' && this.residenceState()}
-          {partnerA_residenceCountry && this.residenceCity()}
-          {partnerA_residenceCountry === 'USA' && this.residenceZip()}
-
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="This Marriage is your ..."
-                  // hideBlankOption
-                  options={MARRIAGE_COUNT}
-                  name={'partnerA_marriageNumb'}
-                  value={partnerA_marriageNumb}
-                  onChange={this.handleChange}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  residenceCity() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceAddress,
-      partnerA_residenceCity,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Residence City/Town"
-          name="partnerA_residenceCity"
-          value={partnerA_residenceCity}
-          onChange={this.handleChange}
-          onBlur={this.replaceBosNeighborhoods}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
-          }
-          maxLength={100}
-        />
-
-        <TextInput
-          label="Residence Address"
-          name="partnerA_residenceAddress"
-          value={partnerA_residenceAddress}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            'Please include your apartment number if that applies.'
-          }
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  partnershipType() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_partnershipType,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            HEADER_SPACING_STYLING,
-            BOTTOM_SPACING_STYLING,
-          ]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>Were you ever a member of a ...</h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <RadioGroup
-              items={PARTNERSHIP_TYPE}
-              name="partnerA_partnershipType"
-              checkedValue={partnerA_partnershipType}
-              handleItemChange={this.handleChange}
-              groupLabel=""
-              hideLabel
-            />
-          </div>
-        </div>
-
-        {partnerA_partnershipType &&
-          (partnerA_partnershipType === 'CIV' ||
-            partnerA_partnershipType === 'DOM') &&
-          this.dissolved()}
-      </div>
-    );
-  }
-
-  dissolved() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_partnershipTypeDissolved,
-      partnerA_partnershipState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div
-        css={[
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          HEADER_SPACING_STYLING,
-          BOTTOM_SPACING_STYLING,
-        ]}
-      >
-        <h3 css={SECTION_HEADING_STYLING}>
-          Civil Union Or Domestic Partnership: Dissolved
-        </h3>
-
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <RadioGroup
-            items={PARTNERSHIP_TYPE_DISSOLVED}
-            name="partnerA_partnershipTypeDissolved"
-            checkedValue={partnerA_partnershipTypeDissolved}
-            handleItemChange={this.handleChange}
-            groupLabel=""
-            hideLabel
-          />
-        </div>
-
-        <TextInput
-          label="Partnership State/Country"
-          name="partnerA_partnershipState"
-          value={partnerA_partnershipState}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  bloodRelation() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_bloodRelation,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            Related by blood or marriage to Person B
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <div css={ONE_AND_HALF_MARGINBOTTOM}>
-              <RadioGroup
-                items={BOOL_RADIOGROUP}
-                name="partnerA_bloodRelation"
-                groupLabel=""
-                checkedValue={partnerA_bloodRelation}
-                handleItemChange={this.handleBloodRelChange}
-                hideLabel
-              />
-            </div>
-          </div>
-        </div>
-
-        {partnerA_bloodRelation === '1' && this.bloodRelDesc()}
-      </div>
-    );
-  }
-
-  bloodRelDesc() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_bloodRelationDesc,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-        <TextInput
-          label="Blood Relation: If yes, how?"
-          name="partnerA_bloodRelationDesc"
-          value={partnerA_bloodRelationDesc}
-          onChange={this.handleBloodRelDescChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  parentsMarried() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_parentsMarriedAtBirth,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>
-            Were your parents married at the time of your birth?
-          </h2>
-
-          <div css={RADIOGROUP_CONTAINER_STYLING}>
-            <div css={ONE_AND_HALF_MARGINBOTTOM}>
-              <RadioGroup
-                items={BOOL_RADIOGROUP}
-                groupLabel=""
-                name="partnerA_parentsMarriedAtBirth"
-                checkedValue={partnerA_parentsMarriedAtBirth}
-                handleItemChange={this.handleChange}
-                hideLabel
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  birthPlace() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthCountry,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div
-          css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}
-        >
-          <h2 css={SECTION_HEADING_STYLING}>Birthplace</h2>
-
-          <div
-            css={[
-              NAME_FIELDS_BASIC_CONTAINER_STYLING,
-              OVERRIDE_SELECT_DISPLAY_STYLING,
-            ]}
-          >
-            <SelectDropdown
-              label="Birthplace Country"
-              // hideBlankOption
-              name={'partnerA_birthCountry'}
-              options={COUNTRIES}
-              value={partnerA_birthCountry}
-              onChange={this.handleBirthplaceCountryChange}
-              onBlur={this.checkBirthCityForNeighborhood}
-            />
-          </div>
-
-          {partnerA_birthCountry === 'USA' && this.birthStateZip()}
-          {partnerA_birthCountry && this.birthCity()}
-        </div>
-      </div>
-    );
-  }
-
-  birthCity() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthCity,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div>
-        <TextInput
-          label="Birthplace City/Town"
-          name="partnerA_birthCity"
-          value={partnerA_birthCity}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          onBlur={this.checkBirthCityForNeighborhood}
-          optionalDescription={
-            'Please list the city/town where the hospital was located, not where your family was living.'
-          }
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-
-  birthStateZip() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_CONTAINER_STYLING}>
-          <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-            <div className="fs-c m-b300">
-              <div className="sel">
-                <SelectDropdown
-                  label="Birthplace State/Province"
-                  hideBlankOption
-                  options={US_STATES}
-                  name={'partnerA_birthState'}
-                  value={partnerA_birthState}
-                  onChange={this.handleChange}
-                  onBlur={this.checkBirthCityForNeighborhood}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  parents() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_parentA_Name,
-      partnerA_parentA_Surname,
-      partnerA_parentB_Name,
-      partnerA_parentB_Surname,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={[HEADER_SPACING_STYLING, HEADER_PADDING_TOP_STYLING]}>
-          <h2 css={SECTION_HEADING_STYLING}>Parents</h2>
-        </div>
-        <div
-          css={[
-            MARRIAGE_INTENTION_FORM_STYLING,
-            TWO_AND_HALF_MARGINBOTTOM,
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          ]}
-          style={{ marginBottom: '2.5em' }}
-        >
-          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 1/Mother</h4>
-
-          <TextInput
-            label="Parent 1/Mother - First Middle Last"
-            name="partnerA_parentA_Name"
-            value={partnerA_parentA_Name}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-          />
-
-          <TextInput
-            label="Parent 1/Mother - Maiden Name/Surname at Birth or Adoption"
-            name="partnerA_parentA_Surname"
-            value={partnerA_parentA_Surname}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-            optionalDescription={
-              "This should be your parent's last name at the time of their birth or adoption."
-            }
-          />
-        </div>
-
-        <div
-          css={[
-            MARRIAGE_INTENTION_FORM_STYLING,
-            TWO_AND_HALF_MARGINBOTTOM,
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          ]}
-          style={{ marginBottom: '2.5em' }}
-        >
-          <h4 css={SECTION_HEADING_STYLING}>Name of Parent 2/Father</h4>
-
-          <TextInput
-            label="Parent 2/Father - First Middle Last"
-            name="partnerA_parentB_Name"
-            value={partnerA_parentB_Name}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-          />
-
-          <TextInput
-            label="Parent 2/Father - Maiden Name/Surname at Birth or Adoption"
-            name="partnerA_parentB_Surname"
-            value={partnerA_parentB_Surname}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            maxLength={38}
-            optionalDescription={
-              "This should be your parent's last name at the time of their birth or adoption."
-            }
-          />
-        </div>
-      </div>
-    );
-  }
-
-  dateOfBirth() {
-    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
-    const {
-      partnerA_dob,
-      partnerA_age,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={SECTION_WRAPPER_STYLING}>
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <h2 css={SECTION_HEADING_STYLING} style={{ marginBottom: '1.5rem' }}>
-            Date of Birth
-          </h2>
-          <MemorableDateInput
-            hideLengend={true}
-            legend={`Person ${partnerLabel} Date of Birth`}
-            initialDate={partnerA_dob || undefined}
-            componentId="dob"
-            onlyAllowPast={true}
-            handleDate={this.handleBirthDateChange}
-          />
-        </div>
-
-        <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-          <TextInput
-            label="Age"
-            name="partnerA_age"
-            value={partnerA_age}
-            onChange={this.handleChange}
-            maxLength={2}
-            disabled={true}
-            disableLabelNoWrap={true}
-            optionalDescription={
-              'Your age will be automatically calculated based on your date of birth.'
-            }
-          />
-        </div>
-      </div>
-    );
-  }
-
-  nameFields() {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_firstName,
-      partnerA_lastName,
-      partnerA_middleName,
-      partnerA_surName,
-      partnerA_occupation,
-      partnerA_suffix,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    return (
-      <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
-        <TextInput
-          label="First Name"
-          name="partnerA_firstName"
-          value={partnerA_firstName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-
-        <TextInput
-          label="Middle Name"
-          name="partnerA_middleName"
-          value={partnerA_middleName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            'This is your current middle name if you have one. You may not list a new middle name.'
-          }
-          maxLength={50}
-        />
-
-        <TextInput
-          label="Last Name"
-          name="partnerA_lastName"
-          value={partnerA_lastName}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <TextInput
-            label="Last Name / SURNAME to be used after marriage"
-            name="partnerA_surName"
-            value={partnerA_surName}
-            onChange={this.handleChange}
-            disableLabelNoWrap={true}
-            optionalDescription={
-              "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
-            }
-            maxLength={50}
-          />
-        </div>
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <SelectDropdown
-            label="Suffix"
-            // hideBlankOption
-            options={SUFFIX_OPTIONS}
-            name={'partnerA_suffix'}
-            value={partnerA_suffix}
-            onChange={this.handleResidenceStateChange}
-          />
-        </div>
-
-        <TextInput
-          label="Occupation"
-          name="partnerA_occupation"
-          value={partnerA_occupation}
-          onChange={this.handleChange}
-          disableLabelNoWrap={true}
-          maxLength={100}
-        />
-      </div>
-    );
-  }
-}
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index 7d2935314..4e7ccc23a 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -3,13 +3,14 @@
 import { jsx } from '@emotion/core';
 
 import { ChangeEvent, Component, MouseEvent } from 'react';
+
 import { observer } from 'mobx-react';
 
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
+
 import QuestionComponent from '../../common/question-components/QuestionComponent';
-import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import { SECTION_HEADING_STYLING } from '../../common/question-components/styling';
+import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
 import {
   PARTNERSHIP_TYPE,
@@ -18,22 +19,28 @@ import {
 } from './inputData';
 
 import {
-  lastMarriageStatus,
   nameFields,
-  dateOfBirth,
-  birthPlace,
+  datePlaceOfBirth,
   residence,
-  bloodRelation,
-  parentsMarried,
+  marriageBlock,
   parents,
-  partnershipType,
+  PARTNERFORM_HEADER_STYLING,
 } from './partnerFormUI';
 
+import {
+  handleChange$,
+  handleUseSurnameChange$,
+  handleAdditionalParentChange$,
+  handleBloodRelDescChange$,
+  handleBloodRelChange$,
+} from './eventHandlers';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
   handleStepBack: (ev: MouseEvent) => void;
   partnerLabel: string;
+  partnerNum?: number | string;
 }
 
 @observer
@@ -48,31 +55,37 @@ export default class PartnerForm extends Component<Props> {
     const {
       partnerA_firstName,
       partnerA_lastName,
-      partnerA_surName,
       partnerA_dob,
       partnerA_age,
+      partnerA_surName,
+      partnerA_useSurname,
       partnerA_occupation,
-      partnerA_residenceAddress,
-      partnerA_residenceCountry,
       partnerA_bloodRelation,
       partnerA_bloodRelationDesc,
+      partnerA_birthCity,
+      partnerA_birthState,
+      partnerA_birthCountry,
+      partnerA_residenceAddress,
+      partnerA_residenceCountry,
       partnerA_parentsMarriedAtBirth,
       partnerA_parentA_Name,
       partnerA_parentA_Surname,
       partnerA_parentB_Name,
       partnerA_parentB_Surname,
-      partnerA_birthCity,
-      partnerA_birthState,
-      partnerA_birthCountry,
       partnerA_partnershipType,
       partnerA_partnershipTypeDissolved,
       partnerA_partnershipState,
 
       partnerA_marriageNumb,
+      partnerA_marriedBefore,
       partnerA_lastMarriageStatus,
+      partnerA_additionalParent,
     } = requestInformation;
 
     let bloodRelReq = true;
+    let useSurnameReq = true;
+    let additionalParentsReq = true;
+    let marriedBeforeReq = true;
     let partnerA_partnership_dissolved = true;
     let partnerA_lastMarriageStatusReq = true;
     let partnerA_birthStateZip = true;
@@ -87,18 +100,56 @@ export default class PartnerForm extends Component<Props> {
     const bloodRelDescReq =
       partnerA_bloodRelation && partnerA_bloodRelation == '1' ? true : false;
 
+    if (bloodRelDescReq && partnerA_bloodRelationDesc.length < 1) {
+      bloodRelReq = false;
+    }
+
+    const surNameTextReq =
+      partnerA_useSurname && partnerA_useSurname === '1' ? true : false;
+
+    if (
+      (surNameTextReq && partnerA_surName.length < 1) ||
+      partnerA_useSurname == ''
+    ) {
+      useSurnameReq = false;
+    }
+
+    const addParentsReq =
+      partnerA_additionalParent && partnerA_additionalParent == '1'
+        ? true
+        : false;
+
+    if (
+      (addParentsReq &&
+        (partnerA_parentB_Name.length < 1 ||
+          partnerA_parentB_Surname.length < 1)) ||
+      partnerA_additionalParent == ''
+    ) {
+      additionalParentsReq = false;
+    }
+
     if (partnerA_birthCountry === 'USA') {
       partnerA_birthStateZip = partnerA_birthState.length > 0 ? true : false;
     }
 
-    if (bloodRelDescReq && partnerA_bloodRelationDesc.length < 1) {
-      bloodRelReq = false;
-    }
+    const marriedBefore = partnerA_marriedBefore === '1' ? true : false;
 
-    const marriageNumb = MARRIAGE_COUNT.find(
-      entry => entry.value === partnerA_marriageNumb
-    );
-    if (marriageNumb && marriageNumb.value !== MARRIAGE_COUNT[0].value) {
+    if (partnerA_marriedBefore === '') marriedBeforeReq = false;
+    if (marriedBefore && partnerA_marriageNumb === '') marriedBeforeReq = false;
+
+    const getMarriageNumb = (): { label: string; value: string } => {
+      let retOb = MARRIAGE_COUNT.find(
+        entry => entry.value == partnerA_marriageNumb
+      );
+
+      if (!retOb) retOb = { label: '', value: '' };
+
+      return retOb;
+    };
+
+    const marriageNumb: { label: string; value: string } = getMarriageNumb();
+
+    if (marriageNumb && marriageNumb.value !== '') {
       if (partnerA_lastMarriageStatus === '') {
         partnerA_lastMarriageStatusReq = false;
       }
@@ -110,73 +161,94 @@ export default class PartnerForm extends Component<Props> {
       }
     }
 
-    return !!(
+    const is_Complete = !!(
       partnerA_firstName &&
       partnerA_lastName &&
-      partnerA_surName &&
       partnerA_dob &&
       partnerA_age &&
+      partnerA_occupation &&
       partnerA_bloodRelation &&
-      bloodRelReq &&
-      partnerA_parentsMarriedAtBirth &&
-      partnerA_parentA_Name &&
-      partnerA_parentA_Surname &&
-      partnerA_parentB_Name &&
-      partnerA_parentB_Surname &&
       partnerA_birthCity &&
       partnerA_birthCountry &&
+      partnerA_residenceAddress &&
+      partnerA_residenceCountry &&
+      partnerA_parentsMarriedAtBirth &&
       partnerA_partnershipType &&
+      partnerA_parentA_Name &&
+      partnerA_parentA_Surname &&
       partnerA_partnership_dissolved &&
-      partnerA_marriageNumb &&
       partnerA_lastMarriageStatusReq &&
-      partnerA_residenceAddress &&
-      partnerA_residenceCountry &&
-      partnerA_occupation &&
       partnershipState &&
-      partnerA_birthStateZip
+      partnerA_birthStateZip &&
+      bloodRelReq &&
+      additionalParentsReq &&
+      marriedBeforeReq &&
+      useSurnameReq
     );
+
+    return is_Complete;
   }
 
   private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
+    handleChange$({
+      e: event,
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
   };
 
-  private handleBloodRelDescChange = (
+  private handleUseSurnameChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_bloodRelationDesc']: event.target.value,
-      },
-      ''
-    );
+    handleUseSurnameChange$({
+      e: event,
+      inputName: 'partnerA_useSurname',
+      textInput: 'partnerA_surName',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
+  };
 
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerB_bloodRelationDesc']: event.target.value,
-      },
-      ''
-    );
+  private handleAdditionalParentChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    handleAdditionalParentChange$({
+      e: event,
+      additionalParent: 'partnerA_additionalParent',
+      parentB_Name: 'partnerA_parentB_Name',
+      parentB_Surname: 'partnerA_parentB_Surname',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
+  };
+
+  private handleBloodRelDescChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    handleBloodRelDescChange$({
+      e: event,
+      partnerA: 'partnerA_bloodRelationDesc',
+      partnerB: 'partnerB_bloodRelationDesc',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
   };
 
   private handleBloodRelChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_bloodRelation']: event.target.value,
-      },
-      ''
-    );
+    handleBloodRelChange$({
+      e: event,
+      partnerA: 'partnerA_bloodRelation',
+      partnerB: 'partnerB_bloodRelation',
+      partnerADesc: 'partnerA_bloodRelationDesc',
+      partnerBDesc: 'partnerB_bloodRelationDesc',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
+  };
 
+  private handleMarriedBeforeChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
       {
-        ['partnerB_bloodRelation']: event.target.value,
+        ['partnerA_marriedBefore']: event.target.value,
       },
       ''
     );
@@ -184,21 +256,14 @@ export default class PartnerForm extends Component<Props> {
     if (event.target.value === '0') {
       this.props.marriageIntentionCertificateRequest.answerQuestion(
         {
-          ['partnerA_bloodRelationDesc']: '',
-        },
-        ''
-      );
-
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_bloodRelationDesc']: '',
+          ['partnerA_marriageNumb']: '',
         },
         ''
       );
     }
   };
 
-  private handleBirthDateChange = (newDate: Date | null): void => {
+  private handleBirthDateChange = (newDate): void => {
     const isDate = this.isDateObj(newDate);
     let age = '';
     if (isDate) {
@@ -361,7 +426,7 @@ export default class PartnerForm extends Component<Props> {
     }
   };
 
-  private updateAge = age => {
+  private updateAge = (age: string) => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
       {
         partnerA_age: age,
@@ -370,7 +435,7 @@ export default class PartnerForm extends Component<Props> {
     );
   };
 
-  private calcAge = dateObj => {
+  private calcAge = (dateObj: Date) => {
     const today = new Date();
     let age = today.getFullYear() - dateObj.getFullYear();
     const m = today.getMonth() - dateObj.getMonth();
@@ -382,7 +447,7 @@ export default class PartnerForm extends Component<Props> {
     return age;
   };
 
-  private isDateObj = dateObj => {
+  private isDateObj = (dateObj: Date | null) => {
     if (Object.prototype.toString.call(dateObj) === '[object Date]') {
       return true;
     }
@@ -391,7 +456,12 @@ export default class PartnerForm extends Component<Props> {
 
   // RENDER ALL UI
   public render() {
-    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
+    const {
+      marriageIntentionCertificateRequest,
+      partnerLabel,
+      partnerNum,
+    } = this.props;
+
     const {
       partnerA_marriageNumb,
       partnerA_lastMarriageStatus,
@@ -399,10 +469,10 @@ export default class PartnerForm extends Component<Props> {
       partnerA_lastName,
       partnerA_middleName,
       partnerA_surName,
+      partnerA_useSurname,
       partnerA_occupation,
       partnerA_suffix,
       partnerA_dob,
-      partnerA_age,
       partnerA_birthCountry,
       partnerA_birthCity,
       partnerA_birthState,
@@ -421,10 +491,11 @@ export default class PartnerForm extends Component<Props> {
       partnerA_partnershipType,
       partnerA_partnershipState,
       partnerA_partnershipTypeDissolved,
+      partnerA_marriedBefore,
+      partnerA_additionalParent,
     } = marriageIntentionCertificateRequest.requestInformation;
-    const marriageNumb = MARRIAGE_COUNT.find(
-      entry => entry.value === partnerA_marriageNumb
-    );
+
+    const partner_num = partnerNum ? partnerNum : partnerLabel;
 
     return (
       <QuestionComponent
@@ -437,39 +508,37 @@ export default class PartnerForm extends Component<Props> {
       >
         <FieldsetComponent
           legendText={
-            <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
+            <h2 css={PARTNERFORM_HEADER_STYLING}>Person {partner_num}</h2>
           }
         >
           {nameFields({
             partnerFlag: partnerLabel,
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
+            handleUseSurnameChange: this.handleUseSurnameChange,
             firstName: partnerA_firstName,
             lastName: partnerA_lastName,
             middleName: partnerA_middleName,
             surName: partnerA_surName,
+            useSurname: partnerA_useSurname,
             occupation: partnerA_occupation,
             suffix: partnerA_suffix,
           })}
-          {dateOfBirth({
-            partnerDOB: partnerA_dob,
-            partnerAge: partnerA_age,
-            partnerFlag: partnerLabel,
-            handleChange: this.handleChange,
-            handleBirthDateChange: this.handleBirthDateChange,
-          })}
-          {birthPlace({
+
+          {datePlaceOfBirth({
             partnerFlag: partnerLabel,
-            birthCityStr: partnerA_birthCity,
+            partnerDOB: partnerA_dob,
             birthCountryStr: partnerA_birthCountry,
             birthStateStr: partnerA_birthState,
+            birthCityStr: partnerA_birthCity,
             handleChange: this.handleChange,
             handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
             checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
+            handleBirthDateChange: this.handleBirthDateChange,
           })}
+
           {residence({
             partnerFlag: partnerLabel,
-            marriageNumb: partnerA_marriageNumb,
             residenceZipStr: partnerA_residenceZip,
             residenceCityStr: partnerA_residenceCity,
             residenceStateStr: partnerA_residenceState,
@@ -482,40 +551,34 @@ export default class PartnerForm extends Component<Props> {
             handleResidenceCountryChange: this.handleResidenceCountryChange,
           })}
 
-          {marriageNumb &&
-            marriageNumb.value !== MARRIAGE_COUNT[0].value &&
-            lastMarriageStatus({
-              partnerFlag: partnerLabel,
-              handleChange: this.handleChange,
-              lastMarriageStatus: partnerA_lastMarriageStatus,
-            })}
-
-          {partnershipType({
+          {marriageBlock({
             partnerFlag: partnerLabel,
+            bloodRelation: partnerA_bloodRelation,
+            bloodRelationDesc: partnerA_bloodRelationDesc,
+            marriedBefore: partnerA_marriedBefore,
+            marriageNumb: partnerA_marriageNumb,
+            lastMarriageStatus: partnerA_lastMarriageStatus,
+
             partnershipType: partnerA_partnershipType,
             partnershipState: partnerA_partnershipState,
             partnershipTypeDissolved: partnerA_partnershipTypeDissolved,
+
             handleChange: this.handleChange,
+            handleBloodRelChange: this.handleBloodRelChange,
+            handleBloodRelDescChange: this.handleBloodRelDescChange,
+            handleMarriedBeforeChange: this.handleMarriedBeforeChange,
           })}
+
           {parents({
             partnerFlag: partnerLabel,
             parentA_Name: partnerA_parentA_Name,
             parentA_Surname: partnerA_parentA_Surname,
             parentB_Name: partnerA_parentB_Name,
             parentB_Surname: partnerA_parentB_Surname,
-            handleChange: this.handleChange,
-          })}
-          {parentsMarried({
-            partnerFlag: partnerLabel,
+            additionalParent: partnerA_additionalParent,
             parentsMarriedAtBirth: partnerA_parentsMarriedAtBirth,
             handleChange: this.handleChange,
-          })}
-          {bloodRelation({
-            partnerFlag: partnerLabel,
-            bloodRelation: partnerA_bloodRelation,
-            bloodRelationDesc: partnerA_bloodRelationDesc,
-            handleBloodRelChange: this.handleBloodRelChange,
-            handleBloodRelDescChange: this.handleBloodRelDescChange,
+            handleAdditionalParentChange: this.handleAdditionalParentChange,
           })}
         </FieldsetComponent>
       </QuestionComponent>
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 97e14bd0d..1488c47d8 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -3,13 +3,14 @@
 import { jsx } from '@emotion/core';
 
 import { ChangeEvent, Component, MouseEvent } from 'react';
+
 import { observer } from 'mobx-react';
 
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
+
 import QuestionComponent from '../../common/question-components/QuestionComponent';
-import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import { SECTION_HEADING_STYLING } from '../../common/question-components/styling';
+import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
 import {
   PARTNERSHIP_TYPE,
@@ -18,22 +19,28 @@ import {
 } from './inputData';
 
 import {
-  lastMarriageStatus,
   nameFields,
-  dateOfBirth,
-  birthPlace,
+  marriageBlock,
+  datePlaceOfBirth,
   residence,
-  bloodRelation,
-  parentsMarried,
   parents,
-  partnershipType,
+  PARTNERFORM_HEADER_STYLING,
 } from './partnerFormUI';
 
+import {
+  handleChange$,
+  handleUseSurnameChange$,
+  handleAdditionalParentChange$,
+  handleBloodRelDescChange$,
+  handleBloodRelChange$,
+} from './eventHandlers';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
   handleStepBack: (ev: MouseEvent) => void;
   partnerLabel: string;
+  partnerNum?: number | string;
 }
 
 @observer
@@ -48,31 +55,37 @@ export default class PartnerForm extends Component<Props> {
     const {
       partnerB_firstName,
       partnerB_lastName,
-      partnerB_surName,
       partnerB_dob,
       partnerB_age,
+      partnerB_surName,
+      partnerB_useSurname,
       partnerB_occupation,
-      partnerB_residenceAddress,
-      partnerB_residenceCountry,
       partnerB_bloodRelation,
       partnerB_bloodRelationDesc,
+      partnerB_birthCity,
+      partnerB_birthState,
+      partnerB_birthCountry,
+      partnerB_residenceAddress,
+      partnerB_residenceCountry,
       partnerB_parentsMarriedAtBirth,
       partnerB_parentA_Name,
       partnerB_parentA_Surname,
       partnerB_parentB_Name,
       partnerB_parentB_Surname,
-      partnerB_birthCity,
-      partnerB_birthState,
-      partnerB_birthCountry,
       partnerB_partnershipType,
       partnerB_partnershipTypeDissolved,
       partnerB_partnershipState,
 
       partnerB_marriageNumb,
+      partnerB_marriedBefore,
       partnerB_lastMarriageStatus,
+      partnerB_additionalParent,
     } = requestInformation;
 
     let bloodRelReq = true;
+    let useSurnameReq = true;
+    let additionalParentsReq = true;
+    let marriedBeforeReq = true;
     let partnerB_partnership_dissolved = true;
     let partnerB_lastMarriageStatusReq = true;
     let partnerB_birthStateZip = true;
@@ -87,18 +100,56 @@ export default class PartnerForm extends Component<Props> {
     const bloodRelDescReq =
       partnerB_bloodRelation && partnerB_bloodRelation == '1' ? true : false;
 
+    if (bloodRelDescReq && partnerB_bloodRelationDesc.length < 1) {
+      bloodRelReq = false;
+    }
+
+    const surNameTextReq =
+      partnerB_useSurname && partnerB_useSurname === '1' ? true : false;
+
+    if (
+      (surNameTextReq && partnerB_surName.length < 1) ||
+      partnerB_useSurname == ''
+    ) {
+      useSurnameReq = false;
+    }
+
+    const addParentsReq =
+      partnerB_additionalParent && partnerB_additionalParent == '1'
+        ? true
+        : false;
+
+    if (
+      (addParentsReq &&
+        (partnerB_parentB_Name.length < 1 ||
+          partnerB_parentB_Surname.length < 1)) ||
+      partnerB_additionalParent == ''
+    ) {
+      additionalParentsReq = false;
+    }
+
     if (partnerB_birthCountry === 'USA') {
       partnerB_birthStateZip = partnerB_birthState.length > 0 ? true : false;
     }
 
-    if (bloodRelDescReq && partnerB_bloodRelationDesc.length < 1) {
-      bloodRelReq = false;
-    }
+    const marriedBefore = partnerB_marriedBefore === '1' ? true : false;
 
-    const marriageNumb = MARRIAGE_COUNT.find(
-      entry => entry.value === partnerB_marriageNumb
-    );
-    if (marriageNumb && marriageNumb.value !== MARRIAGE_COUNT[0].value) {
+    if (partnerB_marriedBefore === '') marriedBeforeReq = false;
+    if (marriedBefore && partnerB_marriageNumb === '') marriedBeforeReq = false;
+
+    const getMarriageNumb = (): { label: string; value: string } => {
+      let retOb = MARRIAGE_COUNT.find(
+        entry => entry.value == partnerB_marriageNumb
+      );
+
+      if (!retOb) retOb = { label: '', value: '' };
+
+      return retOb;
+    };
+
+    const marriageNumb: { label: string; value: string } = getMarriageNumb();
+
+    if (marriageNumb && marriageNumb.value !== '') {
       if (partnerB_lastMarriageStatus === '') {
         partnerB_lastMarriageStatusReq = false;
       }
@@ -110,73 +161,94 @@ export default class PartnerForm extends Component<Props> {
       }
     }
 
-    return !!(
+    const is_Complete = !!(
       partnerB_firstName &&
       partnerB_lastName &&
-      partnerB_surName &&
       partnerB_dob &&
       partnerB_age &&
+      partnerB_occupation &&
       partnerB_bloodRelation &&
-      bloodRelReq &&
-      partnerB_parentsMarriedAtBirth &&
-      partnerB_parentA_Name &&
-      partnerB_parentA_Surname &&
-      partnerB_parentB_Name &&
-      partnerB_parentB_Surname &&
       partnerB_birthCity &&
       partnerB_birthCountry &&
+      partnerB_residenceAddress &&
+      partnerB_residenceCountry &&
+      partnerB_parentsMarriedAtBirth &&
       partnerB_partnershipType &&
+      partnerB_parentA_Name &&
+      partnerB_parentA_Surname &&
       partnerB_partnership_dissolved &&
-      partnerB_marriageNumb &&
       partnerB_lastMarriageStatusReq &&
-      partnerB_residenceAddress &&
-      partnerB_residenceCountry &&
-      partnerB_occupation &&
       partnershipState &&
-      partnerB_birthStateZip
+      partnerB_birthStateZip &&
+      bloodRelReq &&
+      additionalParentsReq &&
+      marriedBeforeReq &&
+      useSurnameReq
     );
+
+    return is_Complete;
   }
 
   private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
+    handleChange$({
+      e: event,
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
   };
 
-  private handleBloodRelDescChange = (
+  private handleUseSurnameChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_bloodRelationDesc']: event.target.value,
-      },
-      ''
-    );
+    handleUseSurnameChange$({
+      e: event,
+      inputName: 'partnerB_useSurname',
+      textInput: 'partnerB_surName',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
+  };
 
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerB_bloodRelationDesc']: event.target.value,
-      },
-      ''
-    );
+  private handleAdditionalParentChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    handleAdditionalParentChange$({
+      e: event,
+      additionalParent: 'partnerB_additionalParent',
+      parentB_Name: 'partnerB_parentB_Name',
+      parentB_Surname: 'partnerB_parentB_Surname',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
+  };
+
+  private handleBloodRelDescChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
+    handleBloodRelDescChange$({
+      e: event,
+      partnerA: 'partnerB_bloodRelationDesc',
+      partnerB: 'partnerA_bloodRelationDesc',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
   };
 
   private handleBloodRelChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_bloodRelation']: event.target.value,
-      },
-      ''
-    );
+    handleBloodRelChange$({
+      e: event,
+      partnerA: 'partnerB_bloodRelation',
+      partnerB: 'partnerA_bloodRelation',
+      partnerADesc: 'partnerB_bloodRelationDesc',
+      partnerBDesc: 'partnerA_bloodRelationDesc',
+      certObj: this.props.marriageIntentionCertificateRequest,
+    });
+  };
 
+  private handleMarriedBeforeChange = (
+    event: ChangeEvent<HTMLInputElement>
+  ): void => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
       {
-        ['partnerB_bloodRelation']: event.target.value,
+        ['partnerB_marriedBefore']: event.target.value,
       },
       ''
     );
@@ -184,14 +256,7 @@ export default class PartnerForm extends Component<Props> {
     if (event.target.value === '0') {
       this.props.marriageIntentionCertificateRequest.answerQuestion(
         {
-          ['partnerA_bloodRelationDesc']: '',
-        },
-        ''
-      );
-
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_bloodRelationDesc']: '',
+          ['partnerB_marriageNumb']: '',
         },
         ''
       );
@@ -391,7 +456,12 @@ export default class PartnerForm extends Component<Props> {
 
   // RENDER ALL UI
   public render() {
-    const { marriageIntentionCertificateRequest, partnerLabel } = this.props;
+    const {
+      marriageIntentionCertificateRequest,
+      partnerLabel,
+      partnerNum,
+    } = this.props;
+
     const {
       partnerB_marriageNumb,
       partnerB_lastMarriageStatus,
@@ -399,10 +469,10 @@ export default class PartnerForm extends Component<Props> {
       partnerB_lastName,
       partnerB_middleName,
       partnerB_surName,
+      partnerB_useSurname,
       partnerB_occupation,
       partnerB_suffix,
       partnerB_dob,
-      partnerB_age,
       partnerB_birthCountry,
       partnerB_birthCity,
       partnerB_birthState,
@@ -421,10 +491,11 @@ export default class PartnerForm extends Component<Props> {
       partnerB_partnershipType,
       partnerB_partnershipState,
       partnerB_partnershipTypeDissolved,
+      partnerB_marriedBefore,
+      partnerB_additionalParent,
     } = marriageIntentionCertificateRequest.requestInformation;
-    const marriageNumb = MARRIAGE_COUNT.find(
-      entry => entry.value === partnerB_marriageNumb
-    );
+
+    const partner_num = partnerNum ? partnerNum : partnerLabel;
 
     return (
       <QuestionComponent
@@ -437,39 +508,37 @@ export default class PartnerForm extends Component<Props> {
       >
         <FieldsetComponent
           legendText={
-            <h2 css={SECTION_HEADING_STYLING}>Person {partnerLabel}</h2>
+            <h2 css={PARTNERFORM_HEADER_STYLING}>Person {partner_num}</h2>
           }
         >
           {nameFields({
             partnerFlag: partnerLabel,
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
+            handleUseSurnameChange: this.handleUseSurnameChange,
             firstName: partnerB_firstName,
             lastName: partnerB_lastName,
             middleName: partnerB_middleName,
             surName: partnerB_surName,
+            useSurname: partnerB_useSurname,
             occupation: partnerB_occupation,
             suffix: partnerB_suffix,
           })}
-          {dateOfBirth({
-            partnerDOB: partnerB_dob,
-            partnerAge: partnerB_age,
-            partnerFlag: partnerLabel,
-            handleChange: this.handleChange,
-            handleBirthDateChange: this.handleBirthDateChange,
-          })}
-          {birthPlace({
+
+          {datePlaceOfBirth({
             partnerFlag: partnerLabel,
-            birthCityStr: partnerB_birthCity,
+            partnerDOB: partnerB_dob,
             birthCountryStr: partnerB_birthCountry,
             birthStateStr: partnerB_birthState,
+            birthCityStr: partnerB_birthCity,
             handleChange: this.handleChange,
             handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
             checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
+            handleBirthDateChange: this.handleBirthDateChange,
           })}
+
           {residence({
             partnerFlag: partnerLabel,
-            marriageNumb: partnerB_marriageNumb,
             residenceZipStr: partnerB_residenceZip,
             residenceCityStr: partnerB_residenceCity,
             residenceStateStr: partnerB_residenceState,
@@ -482,40 +551,34 @@ export default class PartnerForm extends Component<Props> {
             handleResidenceCountryChange: this.handleResidenceCountryChange,
           })}
 
-          {marriageNumb &&
-            marriageNumb.value !== MARRIAGE_COUNT[0].value &&
-            lastMarriageStatus({
-              partnerFlag: partnerLabel,
-              handleChange: this.handleChange,
-              lastMarriageStatus: partnerB_lastMarriageStatus,
-            })}
-
-          {partnershipType({
+          {marriageBlock({
             partnerFlag: partnerLabel,
+            bloodRelation: partnerB_bloodRelation,
+            bloodRelationDesc: partnerB_bloodRelationDesc,
+            marriedBefore: partnerB_marriedBefore,
+            marriageNumb: partnerB_marriageNumb,
+            lastMarriageStatus: partnerB_lastMarriageStatus,
+
             partnershipType: partnerB_partnershipType,
             partnershipState: partnerB_partnershipState,
             partnershipTypeDissolved: partnerB_partnershipTypeDissolved,
+
             handleChange: this.handleChange,
+            handleBloodRelChange: this.handleBloodRelChange,
+            handleBloodRelDescChange: this.handleBloodRelDescChange,
+            handleMarriedBeforeChange: this.handleMarriedBeforeChange,
           })}
+
           {parents({
             partnerFlag: partnerLabel,
             parentA_Name: partnerB_parentA_Name,
             parentA_Surname: partnerB_parentA_Surname,
             parentB_Name: partnerB_parentB_Name,
             parentB_Surname: partnerB_parentB_Surname,
-            handleChange: this.handleChange,
-          })}
-          {parentsMarried({
-            partnerFlag: partnerLabel,
+            additionalParent: partnerB_additionalParent,
             parentsMarriedAtBirth: partnerB_parentsMarriedAtBirth,
             handleChange: this.handleChange,
-          })}
-          {bloodRelation({
-            partnerFlag: partnerLabel,
-            bloodRelation: partnerB_bloodRelation,
-            bloodRelationDesc: partnerB_bloodRelationDesc,
-            handleBloodRelChange: this.handleBloodRelChange,
-            handleBloodRelDescChange: this.handleBloodRelDescChange,
+            handleAdditionalParentChange: this.handleAdditionalParentChange,
           })}
         </FieldsetComponent>
       </QuestionComponent>
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index 443378ad7..10df4529a 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -1,23 +1,28 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
 
+import { jsx, css } from '@emotion/core';
+
+import { THICK_BORDER_STYLE } from '../../common/question-components/styling';
 import {
   RadioGroup,
   TextInput,
   SelectDropdown,
   MemorableDateInput,
+  DEFAULT_TEXT,
+  SERIF,
+  SANS,
+  CHARLES_BLUE,
 } from '@cityofboston/react-fleet';
 
 import {
-  SECTION_HEADING_STYLING,
   SECTION_WRAPPER_STYLING,
   NAME_FIELDS_CONTAINER_STYLING,
   NAME_FIELDS_BASIC_CONTAINER_STYLING,
   HEADER_SPACING_STYLING,
-  RADIOGROUP_CONTAINER_STYLING,
   OVERRIDE_SELECT_DISPLAY_STYLING,
-  HEADER_PADDING_TOP_STYLING,
   MARRIAGE_INTENTION_FORM_STYLING,
+  RADIOGROUP_CONTAINER_STYLING,
+  SELECTINPUT_WRAPPER_STYLING,
 } from '../../common/question-components/styling';
 
 import {
@@ -29,22 +34,77 @@ import {
 import {
   SUFFIX_OPTIONS,
   LAST_MARRIAGE_STATUS,
-  US_STATES,
-  COUNTRIES,
   MARRIAGE_COUNT,
   BOOL_RADIOGROUP,
   PARTNERSHIP_TYPE_DISSOLVED,
-  PARTNERSHIP_TYPE,
+  PARTNERSHIP_TYPE2,
 } from './inputData';
+import { COUNTRIES, US_STATES } from '../../../utils/data';
+import { ToolTip } from '@cityofboston/react-fleet';
+
+export const PARTNERFORM_HEADER_STYLING = css(`
+  color: ${CHARLES_BLUE};
+  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: ${SANS};
+  text-transform: uppercase;
+  padding-bottom: 0.25em;
+
+  h2 {
+    margin-bottom: 3.9375rem;
+  }
+`);
+
+export const PARTNERFORM_SECTION_HEADING_STYLING = css(`
+  color: ${CHARLES_BLUE};
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: ${SANS};
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+
+  h1 {
+    border-bottom: ${THICK_BORDER_STYLE};
+  }
+
+  .notice {
+    color: ${DEFAULT_TEXT};
+    font-family: ${SERIF};
+    font-size: 0.9375rem;
+    font-style: italic;
+    font-weight: normal;
+    line-height: 1.2rem;
+    text-transform: none;
+    padding-top: 0.5em;
+    margin-top: 0.25em;
+    border-top: ${THICK_BORDER_STYLE};
+    
+    .tool-tip__wrapper {
+      display: inline-block;
+    }
+  }
+`);
+
+export const BOTTOM_BORDER = css(`
+  border-bottom: ${THICK_BORDER_STYLE};
+  margin-bottom: 1em;
+`);
+
+const MEMORABLEDATEINPUT_STYLING = css(`
+  margin-bottom: 2.25em;
+`);
 
 export const nameFields = (data: {
   partnerFlag: string;
   handleChange: ((e: any) => void) | undefined;
   handleResidenceStateChange: ((e: any) => void) | undefined;
+  handleUseSurnameChange: ((e: any) => void) | undefined;
   firstName: string;
   lastName: string;
   middleName: string;
   surName: string;
+  useSurname: string;
   occupation: string;
   suffix: string;
 }) => {
@@ -54,13 +114,33 @@ export const nameFields = (data: {
     lastName,
     middleName,
     surName,
+    useSurname,
     occupation,
     suffix,
     handleChange,
     handleResidenceStateChange,
+    handleUseSurnameChange,
   } = data;
+  // const partnerNameStr = `partner${partnerFlag}_useSurname`;
+  const $CSS_SECTION_WRAPPER = css(`margin-bottom: 1.5em;`);
+
   return (
-    <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+    <div
+      css={[
+        SECTION_WRAPPER_STYLING,
+        NAME_FIELDS_BASIC_CONTAINER_STYLING,
+        $CSS_SECTION_WRAPPER,
+      ]}
+    >
+      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING]}>
+        Personal Information
+        <div className="notice">
+          Please enter your legal name as it appears on official documents. You
+          cannot list a new middle name. If you wish to change your last name,
+          you can indicate this after providing your legal name.
+        </div>
+      </h1>
+
       <TextInput
         label="First Name"
         name={`partner${partnerFlag}_firstName`}
@@ -68,6 +148,7 @@ export const nameFields = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         maxLength={100}
+        softRequired={true}
       />
 
       <TextInput
@@ -77,9 +158,10 @@ export const nameFields = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         optionalDescription={
-          'This is your current middle name if you have one. You may not list a new middle name.'
+          'Please enter your middle name if you have one. You cannot list a new middle name.'
         }
         maxLength={50}
+        softRequired={false}
       />
 
       <TextInput
@@ -91,29 +173,56 @@ export const nameFields = (data: {
         maxLength={100}
       />
 
-      <div
-        css={[
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          OVERRIDE_SELECT_DISPLAY_STYLING,
-        ]}
-      >
-        <TextInput
-          label="Last Name / SURNAME to be used after marriage"
-          name={`partner${partnerFlag}_surName`}
-          value={surName}
-          onChange={handleChange}
-          disableLabelNoWrap={true}
-          optionalDescription={
-            "You can keep your current last name or use a new last name. Examples: Take your future spouse's last name, use a two part last name, or create a new last name."
-          }
-          maxLength={50}
-        />
+      <div css={RADIOGROUP_CONTAINER_STYLING}>
+        <div css={ONE_AND_HALF_MARGINBOTTOM}>
+          <RadioGroup
+            items={BOOL_RADIOGROUP}
+            name={`partner${partnerFlag}_useSurname`}
+            groupLabel="Would you like to change your last name?"
+            checkedValue={useSurname}
+            handleItemChange={handleUseSurnameChange}
+            hideLabel={false}
+            className={`radio-group__label`}
+            softRequired={true}
+            toolTip={{
+              icon: '?',
+              msg:
+                'Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.',
+            }}
+          />
+        </div>
       </div>
 
+      {useSurname === '1' && (
+        <div
+          css={[
+            NAME_FIELDS_BASIC_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+          ]}
+        >
+          <TextInput
+            label="New Last Name to be Used After Marriage"
+            name={`partner${partnerFlag}_surName`}
+            value={surName}
+            onChange={handleChange}
+            disableLabelNoWrap={true}
+            optionalDescription={`You can keep your current last name or use a new last name.`}
+            maxLength={50}
+            softRequired={true}
+            toolTip={{
+              icon: '?',
+              msg:
+                'Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.',
+            }}
+          />
+        </div>
+      )}
+
       <div
         css={[
           NAME_FIELDS_BASIC_CONTAINER_STYLING,
           OVERRIDE_SELECT_DISPLAY_STYLING,
+          SELECTINPUT_WRAPPER_STYLING,
         ]}
       >
         <SelectDropdown
@@ -122,6 +231,8 @@ export const nameFields = (data: {
           name={`partner${partnerFlag}_suffix`}
           value={suffix}
           onChange={handleResidenceStateChange}
+          softRequired={false}
+          optionalDescription={`Please select your suffix if you have one.`}
         />
       </div>
 
@@ -132,283 +243,163 @@ export const nameFields = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         maxLength={100}
+        softRequired={true}
+        toolTip={{
+          icon: '?',
+          msg:
+            'This information is collected as required by the Massachusetts State Marriage Intention Form.',
+        }}
       />
     </div>
   );
 };
 
-export const dateOfBirth = (data: {
-  partnerDOB: Date | null | undefined;
-  partnerAge: string;
+export const datePlaceOfBirth = (data: {
   partnerFlag: string;
+  partnerDOB: Date | null | undefined;
+  birthCityStr: string;
+  birthCountryStr: string;
+  birthStateStr: string;
   handleChange: ((e: any) => void) | undefined;
+  handleBirthplaceCountryChange: ((e: any) => void) | undefined;
+  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
   handleBirthDateChange: (newDate: Date | null) => void;
 }) => {
   const {
-    partnerDOB,
-    partnerAge,
     partnerFlag,
-    handleChange,
+    partnerDOB,
     handleBirthDateChange,
+    birthCityStr,
+    birthCountryStr,
+    birthStateStr,
+    handleChange,
+    handleBirthplaceCountryChange,
+    checkBirthCityForNeighborhood,
   } = data;
 
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-        <h2 css={SECTION_HEADING_STYLING} style={{ marginBottom: '1.5rem' }}>
-          Date of Birth
-        </h2>
-        <MemorableDateInput
-          hideLengend={true}
-          legend={`Person ${partnerFlag} Date of Birth`}
-          initialDate={partnerDOB || undefined}
-          componentId="dob"
-          onlyAllowPast={true}
-          handleDate={handleBirthDateChange}
-        />
-      </div>
+  const birthCity = (data: {
+    partnerFlag: string;
+    birthCity: string;
+    handleChange: ((e: any) => void) | undefined;
+    checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
+  }) => {
+    const {
+      partnerFlag,
+      birthCity,
+      handleChange,
+      checkBirthCityForNeighborhood,
+    } = data;
 
-      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+    return (
+      <div>
         <TextInput
-          label="Age"
-          name={`partner${partnerFlag}_age`}
-          value={partnerAge}
+          label="Birthplace City/Town"
+          name={`partner${partnerFlag}_birthCity`}
+          value={birthCity}
           onChange={handleChange}
-          maxLength={2}
-          disabled={true}
           disableLabelNoWrap={true}
+          onBlur={checkBirthCityForNeighborhood}
           optionalDescription={
-            'Your age will be automatically calculated based on your date of birth.'
+            'Please list the city/town where the hospital was located, not where your family was living.'
           }
+          maxLength={100}
+          softRequired={true}
         />
       </div>
-    </div>
-  );
-};
-
-export const birthCity = (data: {
-  partnerFlag: string;
-  birthCity: string;
-  handleChange: ((e: any) => void) | undefined;
-  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
-}) => {
-  const {
-    partnerFlag,
-    birthCity,
-    handleChange,
-    checkBirthCityForNeighborhood,
-  } = data;
-
-  return (
-    <div>
-      <TextInput
-        label="Birthplace City/Town"
-        name={`partner${partnerFlag}_birthCity`}
-        value={birthCity}
-        onChange={handleChange}
-        disableLabelNoWrap={true}
-        onBlur={checkBirthCityForNeighborhood}
-        optionalDescription={
-          'Please list the city/town where the hospital was located, not where your family was living.'
-        }
-        maxLength={100}
-      />
-    </div>
-  );
-};
+    );
+  };
 
-export const birthStateZip = (data: {
-  partnerFlag: string;
-  birthStateStr: string;
-  handleChange: ((e: any) => void) | undefined;
-  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
-}) => {
-  const {
-    partnerFlag,
-    birthStateStr,
-    handleChange,
-    checkBirthCityForNeighborhood,
-  } = data;
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <div css={NAME_FIELDS_CONTAINER_STYLING}>
+  const birthStateZip = (data: {
+    partnerFlag: string;
+    birthStateStr: string;
+    handleChange: ((e: any) => void) | undefined;
+    checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
+  }) => {
+    const {
+      partnerFlag,
+      birthStateStr,
+      handleChange,
+      checkBirthCityForNeighborhood,
+    } = data;
+    return (
+      <div css={[SECTION_WRAPPER_STYLING, SELECTINPUT_WRAPPER_STYLING]}>
         <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-          <div className="fs-c m-b300">
-            <div className="sel">
-              <SelectDropdown
-                label="Birthplace State/Province"
-                hideBlankOption
-                options={US_STATES}
-                name={`partner${partnerFlag}_birthState`}
-                value={birthStateStr}
-                onChange={handleChange}
-                onBlur={checkBirthCityForNeighborhood}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const birthPlace = (data: {
-  partnerFlag: string;
-  birthCityStr: string;
-  birthCountryStr: string;
-  birthStateStr: string;
-  handleChange: ((e: any) => void) | undefined;
-  handleBirthplaceCountryChange: ((e: any) => void) | undefined;
-  checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
-}) => {
-  const {
-    birthCountryStr,
-    birthCityStr,
-    birthStateStr,
-    partnerFlag,
-    handleChange,
-    handleBirthplaceCountryChange,
-    checkBirthCityForNeighborhood,
-  } = data;
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
-        <h2 css={SECTION_HEADING_STYLING}>Birthplace</h2>
-
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
           <SelectDropdown
-            label="Birthplace Country"
-            name={`partner${partnerFlag}_birthCountry`}
-            options={COUNTRIES}
-            value={birthCountryStr}
-            onChange={handleBirthplaceCountryChange}
+            label="Birthplace State/Province"
+            hideBlankOption
+            options={US_STATES}
+            name={`partner${partnerFlag}_birthState`}
+            value={birthStateStr}
+            onChange={handleChange}
             onBlur={checkBirthCityForNeighborhood}
+            softRequired={true}
           />
         </div>
-
-        {birthCountryStr === 'USA' &&
-          birthStateZip({
-            partnerFlag,
-            birthStateStr: birthStateStr,
-            handleChange,
-            checkBirthCityForNeighborhood,
-          })}
-        {birthCountryStr &&
-          birthCity({
-            partnerFlag,
-            birthCity: birthCityStr,
-            handleChange,
-            checkBirthCityForNeighborhood,
-          })}
       </div>
-    </div>
-  );
-};
-
-export const residenceZip = (data: {
-  partnerFlag: string;
-  residenceZipStr: string;
-  handleZipCodeChange: ((e: any) => void) | undefined;
-}) => {
-  const { partnerFlag, residenceZipStr, handleZipCodeChange } = data;
+    );
+  };
 
   return (
-    <div>
-      <TextInput
-        label="Residence Zip Code"
-        name={`partner${partnerFlag}_residenceZip`}
-        value={residenceZipStr}
-        onChange={handleZipCodeChange}
-        disableLabelNoWrap={true}
-        maxLength={10}
-        minLength={5}
-      />
-    </div>
-  );
-};
+    <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+      <h1
+        css={[
+          PARTNERFORM_SECTION_HEADING_STYLING,
+          // SECTION_HEADING_STYLING
+          BOTTOM_BORDER,
+        ]}
+      >
+        Date and Place of Birth
+      </h1>
 
-export const residenceState = (data: {
-  partnerFlag: string;
-  residenceStateStr: string;
-  handleResidenceStateChange: ((e: any) => void) | undefined;
-}) => {
-  const { partnerFlag, residenceStateStr, handleResidenceStateChange } = data;
+      <MemorableDateInput
+        hideLengend={true}
+        legend={`Person ${partnerFlag} Date of Birth`}
+        initialDate={partnerDOB || undefined}
+        componentId="dob"
+        onlyAllowPast={true}
+        handleDate={handleBirthDateChange}
+        cssObj={MEMORABLEDATEINPUT_STYLING}
+        requires={{ day: 'soft', month: 'soft', year: 'soft' }}
+      />
 
-  return (
-    <div>
-      <div css={NAME_FIELDS_CONTAINER_STYLING}>
-        <div css={OVERRIDE_SELECT_DISPLAY_STYLING}>
-          <div className="fs-c m-b300">
-            <div className="sel">
-              <SelectDropdown
-                label="Residence State"
-                hideBlankOption
-                options={US_STATES}
-                name={`partner${partnerFlag}_residenceState`}
-                value={residenceStateStr}
-                onChange={handleResidenceStateChange}
-              />
-            </div>
-          </div>
-        </div>
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          OVERRIDE_SELECT_DISPLAY_STYLING,
+          SELECTINPUT_WRAPPER_STYLING,
+        ]}
+      >
+        <SelectDropdown
+          label="Birthplace Country"
+          name={`partner${partnerFlag}_birthCountry`}
+          options={COUNTRIES}
+          value={birthCountryStr}
+          onChange={handleBirthplaceCountryChange}
+          onBlur={checkBirthCityForNeighborhood}
+          softRequired={true}
+        />
       </div>
-    </div>
-  );
-};
-
-export const residenceCity = (data: {
-  partnerFlag: string;
-  residenceCityStr: string;
-  residenceAddressStr: string;
-  handleChange: ((e: any) => void) | undefined;
-  replaceBosNeighborhoods: ((e: any) => void) | undefined;
-}) => {
-  const {
-    partnerFlag,
-    residenceCityStr,
-    residenceAddressStr,
-    handleChange,
-    replaceBosNeighborhoods,
-  } = data;
-
-  return (
-    <div>
-      <TextInput
-        label="Residence City/Town"
-        name={`partner${partnerFlag}_residenceCity`}
-        value={residenceCityStr}
-        onChange={handleChange}
-        onBlur={replaceBosNeighborhoods}
-        disableLabelNoWrap={true}
-        optionalDescription={
-          "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
-        }
-        maxLength={100}
-      />
 
-      <TextInput
-        label="Residence Address"
-        name={`partner${partnerFlag}_residenceAddress`}
-        value={residenceAddressStr}
-        onChange={handleChange}
-        disableLabelNoWrap={true}
-        optionalDescription={
-          'Please include your apartment number if that applies.'
-        }
-        maxLength={100}
-      />
+      {birthCountryStr === 'USA' &&
+        birthStateZip({
+          partnerFlag,
+          birthStateStr: birthStateStr,
+          handleChange,
+          checkBirthCityForNeighborhood,
+        })}
+      {birthCountryStr &&
+        birthCity({
+          partnerFlag,
+          birthCity: birthCityStr,
+          handleChange,
+          checkBirthCityForNeighborhood,
+        })}
     </div>
   );
 };
 
 export const residence = (data: {
   partnerFlag: string;
-  marriageNumb: string;
   residenceZipStr: string;
   residenceCityStr: string;
   residenceStateStr: string;
@@ -422,7 +413,6 @@ export const residence = (data: {
 }) => {
   const {
     partnerFlag,
-    marriageNumb,
     residenceZipStr,
     residenceCityStr,
     residenceStateStr,
@@ -434,11 +424,117 @@ export const residence = (data: {
     handleResidenceStateChange,
     handleResidenceCountryChange,
   } = data;
+
+  const residenceZip = (data: {
+    partnerFlag: string;
+    residenceZipStr: string;
+    handleZipCodeChange: ((e: any) => void) | undefined;
+  }) => {
+    const { partnerFlag, residenceZipStr, handleZipCodeChange } = data;
+
+    return (
+      <div>
+        <TextInput
+          label="Residence Zip Code"
+          name={`partner${partnerFlag}_residenceZip`}
+          value={residenceZipStr}
+          onChange={handleZipCodeChange}
+          disableLabelNoWrap={true}
+          maxLength={10}
+          minLength={5}
+          softRequired={true}
+        />
+      </div>
+    );
+  };
+
+  const residenceState = (data: {
+    partnerFlag: string;
+    residenceStateStr: string;
+    handleResidenceStateChange: ((e: any) => void) | undefined;
+  }) => {
+    const { partnerFlag, residenceStateStr, handleResidenceStateChange } = data;
+
+    return (
+      <div>
+        <div
+          css={[
+            NAME_FIELDS_CONTAINER_STYLING,
+            OVERRIDE_SELECT_DISPLAY_STYLING,
+            SELECTINPUT_WRAPPER_STYLING,
+          ]}
+        >
+          <SelectDropdown
+            label="State of Residence"
+            hideBlankOption
+            options={US_STATES}
+            name={`partner${partnerFlag}_residenceState`}
+            value={residenceStateStr}
+            onChange={handleResidenceStateChange}
+            softRequired={true}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const residenceCity = (data: {
+    partnerFlag: string;
+    residenceCityStr: string;
+    residenceAddressStr: string;
+    handleChange: ((e: any) => void) | undefined;
+    replaceBosNeighborhoods: ((e: any) => void) | undefined;
+  }) => {
+    const {
+      partnerFlag,
+      residenceCityStr,
+      residenceAddressStr,
+      handleChange,
+      replaceBosNeighborhoods,
+    } = data;
+
+    return (
+      <div>
+        <TextInput
+          label="Residence City/Town"
+          name={`partner${partnerFlag}_residenceCity`}
+          value={residenceCityStr}
+          onChange={handleChange}
+          onBlur={replaceBosNeighborhoods}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            "For Boston residents: Please put 'Boston' as the City, do not use neighborhood names."
+          }
+          maxLength={100}
+          softRequired={true}
+        />
+
+        <TextInput
+          label="Residence Address"
+          name={`partner${partnerFlag}_residenceAddress`}
+          value={residenceAddressStr}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          optionalDescription={
+            'Please include your apartment number if that applies.'
+          }
+          maxLength={100}
+          softRequired={true}
+        />
+      </div>
+    );
+  };
+
   return (
     <div css={SECTION_WRAPPER_STYLING}>
-      <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-        <h2 css={SECTION_HEADING_STYLING}>Residence</h2>
-      </div>
+      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING]}>
+        Residence
+        <div className="notice">
+          Please enter your current residential address. If your mailing address
+          is not the same as your residential one, you will have the opportunity
+          to share your preferred address during your appointment.
+        </div>
+      </h1>
 
       <div
         css={[TWO_AND_HALF_MARGINBOTTOM, NAME_FIELDS_BASIC_CONTAINER_STYLING]}
@@ -447,20 +543,23 @@ export const residence = (data: {
           css={[
             NAME_FIELDS_BASIC_CONTAINER_STYLING,
             OVERRIDE_SELECT_DISPLAY_STYLING,
+            SELECTINPUT_WRAPPER_STYLING,
           ]}
         >
-          <div className="fs-c m-b300">
-            <div className="sel">
-              <SelectDropdown
-                label="Select Country of Residence"
-                options={COUNTRIES}
-                name={`partner${partnerFlag}_residenceCountry`}
-                value={residenceCountryStr}
-                onChange={handleResidenceCountryChange}
-                disableLabelNoWrap={true}
-              />
-            </div>
-          </div>
+          <SelectDropdown
+            label="Country of Residence"
+            options={COUNTRIES}
+            name={`partner${partnerFlag}_residenceCountry`}
+            value={residenceCountryStr}
+            onChange={handleResidenceCountryChange}
+            disableLabelNoWrap={true}
+            softRequired={true}
+            toolTip={{
+              icon: '?',
+              msg:
+                'If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.',
+            }}
+          />
         </div>
 
         {residenceCountryStr === 'USA' &&
@@ -483,36 +582,191 @@ export const residence = (data: {
             residenceZipStr,
             handleZipCodeChange,
           })}
+      </div>
+    </div>
+  );
+};
 
-        <div
-          css={[
-            NAME_FIELDS_BASIC_CONTAINER_STYLING,
-            OVERRIDE_SELECT_DISPLAY_STYLING,
-          ]}
-        >
-          <div className="fs-c m-b300">
-            <div className="sel">
-              <SelectDropdown
-                label="This Marriage is your ..."
-                options={MARRIAGE_COUNT}
-                name={`partner${partnerFlag}_marriageNumb`}
-                value={marriageNumb}
-                onChange={handleChange}
-              />
-            </div>
-          </div>
+export const findMarriageNumb = (val: string) =>
+  MARRIAGE_COUNT.find(entry => entry.value === val);
+
+export const marriageBlock = (data: {
+  partnerFlag: string;
+  bloodRelation: string;
+  bloodRelationDesc: string;
+  marriedBefore: string;
+  marriageNumb: string;
+  lastMarriageStatus: string;
+
+  partnershipType: string;
+  partnershipState: string;
+  partnershipTypeDissolved: string;
+
+  handleChange: ((e: any) => void) | undefined;
+  handleBloodRelChange: ((e: any) => void) | undefined;
+  handleBloodRelDescChange: ((e: any) => void) | undefined;
+  handleMarriedBeforeChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    bloodRelation,
+    bloodRelationDesc,
+    marriedBefore,
+    marriageNumb,
+    lastMarriageStatus,
+
+    partnershipType,
+    partnershipState,
+    partnershipTypeDissolved,
+
+    handleChange,
+    handleBloodRelChange,
+    handleBloodRelDescChange,
+    handleMarriedBeforeChange,
+  } = data;
+
+  const marrigeNumInput = (marriageNumb: string) => {
+    return (
+      <div
+        css={[
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+          OVERRIDE_SELECT_DISPLAY_STYLING,
+          SELECTINPUT_WRAPPER_STYLING,
+        ]}
+      >
+        <SelectDropdown
+          label="This Marriage is your ..."
+          options={MARRIAGE_COUNT}
+          name={`partner${partnerFlag}_marriageNumb`}
+          value={marriageNumb}
+          onChange={handleChange}
+          softRequired={true}
+          toolTip={{
+            icon: '?',
+            msg:
+              'This information is collected as required by Massachusetts State Law Chapter 46 Section 1.',
+          }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING]}>
+        Marriage
+        <div className="notice" />
+      </h1>
+
+      <div css={RADIOGROUP_CONTAINER_STYLING}>
+        <div css={ONE_AND_HALF_MARGINBOTTOM}>
+          <RadioGroup
+            items={BOOL_RADIOGROUP}
+            name={`partner${partnerFlag}_bloodRelation`}
+            groupLabel="Are you related by blood or marriage to your future spouse?"
+            checkedValue={bloodRelation}
+            handleItemChange={handleBloodRelChange}
+            hideLabel={false}
+            className={`radio-group__label`}
+            softRequired={true}
+            toolTip={{
+              icon: '?',
+              msg:
+                'This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.',
+            }}
+          />
         </div>
       </div>
+
+      {bloodRelation === '1' &&
+        bloodRelDesc({
+          partnerFlag,
+          bloodRelationDesc,
+          handleBloodRelDescChange,
+        })}
+
+      <div css={RADIOGROUP_CONTAINER_STYLING}>
+        <div css={ONE_AND_HALF_MARGINBOTTOM}>
+          <RadioGroup
+            items={BOOL_RADIOGROUP}
+            name={`partner${partnerFlag}_marriedBefore`}
+            groupLabel="Have you ever been married before?"
+            checkedValue={marriedBefore}
+            handleItemChange={handleMarriedBeforeChange}
+            className={`radio-group__label`}
+            hideLabel={false}
+            softRequired={true}
+          />
+        </div>
+      </div>
+
+      {marriedBefore === '1' && marrigeNumInput(marriageNumb)}
+
+      {marriageNumb &&
+        marriageNumb !== '' &&
+        $lastMarriageStatus({
+          partnerFlag,
+          handleChange,
+          lastMarriageStatus,
+        })}
+
+      {$partnershipType({
+        partnerFlag,
+        partnershipType,
+        partnershipState,
+        partnershipTypeDissolved,
+        handleChange,
+      })}
     </div>
   );
 };
 
-export const lastMarriageStatus = (data: {
+export const $lastMarriageStatus = (data: {
   partnerFlag: string;
   handleChange: ((e: any) => void) | undefined;
   lastMarriageStatus: string;
 }) => {
   const { partnerFlag, handleChange, lastMarriageStatus } = data;
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <div css={ONE_AND_HALF_MARGINBOTTOM}>
+            <RadioGroup
+              items={LAST_MARRIAGE_STATUS}
+              name={`partner${partnerFlag}_lastMarriageStatus`}
+              checkedValue={lastMarriageStatus}
+              groupLabel="If Applicable, Status of Last Marriage"
+              handleItemChange={handleChange}
+              className={`radio-group__label`}
+              softRequired={true}
+            />
+
+            <label className="notice">
+              If void, please provide clerk with evidence.
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const $partnershipType = (data: {
+  partnerFlag: string;
+  partnershipType: string;
+  partnershipState: string;
+  partnershipTypeDissolved: string;
+  handleChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    partnershipType,
+    partnershipState,
+    partnershipTypeDissolved,
+    handleChange,
+  } = data;
+
   return (
     <div css={SECTION_WRAPPER_STYLING}>
       <div
@@ -522,70 +776,79 @@ export const lastMarriageStatus = (data: {
           BOTTOM_SPACING_STYLING,
         ]}
       >
-        <h2 css={SECTION_HEADING_STYLING}>
-          If Applicable, Status of Last Marriage
-        </h2>
-
         <div css={RADIOGROUP_CONTAINER_STYLING}>
           <RadioGroup
-            items={LAST_MARRIAGE_STATUS}
-            name={`partner${partnerFlag}_lastMarriageStatus`}
-            checkedValue={lastMarriageStatus}
+            items={PARTNERSHIP_TYPE2}
+            name={`partner${partnerFlag}_partnershipType`}
+            checkedValue={partnershipType}
             handleItemChange={handleChange}
-            groupLabel=""
-            hideLabel
+            groupLabel="Were you ever a member of a civil union or domestic partnership?"
+            className={`radio-group__label`}
+            hideLabel={false}
+            softRequired={true}
+            toolTip={{
+              icon: '?',
+              msg:
+                'This information is collected as required by the Massachusetts State Marriage Intention Form.',
+            }}
           />
-
-          <label className="notice">
-            If void, please provide clerk with evidence.
-          </label>
         </div>
       </div>
+
+      {partnershipType &&
+        (partnershipType === 'CIV' || partnershipType === 'DOM') &&
+        $dissolved({
+          partnerFlag,
+          partnershipState,
+          partnershipTypeDissolved,
+          handleChange,
+        })}
     </div>
   );
 };
 
-export const bloodRelation = (data: {
+const $dissolved = (data: {
   partnerFlag: string;
-  bloodRelation: string;
-  bloodRelationDesc: string;
-  handleBloodRelChange: ((e: any) => void) | undefined;
-  handleBloodRelDescChange: ((e: any) => void) | undefined;
+  partnershipState: string;
+  partnershipTypeDissolved: string;
+  handleChange: ((e: any) => void) | undefined;
 }) => {
   const {
     partnerFlag,
-    bloodRelation,
-    bloodRelationDesc,
-    handleBloodRelChange,
-    handleBloodRelDescChange,
+    partnershipTypeDissolved,
+    partnershipState,
+    handleChange,
   } = data;
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
-        <h2 css={SECTION_HEADING_STYLING}>
-          Related by blood or marriage to Person B
-        </h2>
 
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <div css={ONE_AND_HALF_MARGINBOTTOM}>
-            <RadioGroup
-              items={BOOL_RADIOGROUP}
-              name={`partner${partnerFlag}_bloodRelation`}
-              groupLabel=""
-              checkedValue={bloodRelation}
-              handleItemChange={handleBloodRelChange}
-              hideLabel
-            />
-          </div>
-        </div>
+  return (
+    <div
+      css={[
+        NAME_FIELDS_BASIC_CONTAINER_STYLING,
+        HEADER_SPACING_STYLING,
+        BOTTOM_SPACING_STYLING,
+      ]}
+    >
+      <div css={RADIOGROUP_CONTAINER_STYLING}>
+        <RadioGroup
+          items={PARTNERSHIP_TYPE_DISSOLVED}
+          name={`partner${partnerFlag}_partnershipTypeDissolved`}
+          checkedValue={partnershipTypeDissolved}
+          handleItemChange={handleChange}
+          groupLabel="Civil Union Or Domestic Partnership: Dissolved"
+          className={`radio-group__label`}
+          softRequired={true}
+          hideLabel={false}
+        />
       </div>
 
-      {bloodRelation === '1' &&
-        bloodRelDesc({
-          partnerFlag,
-          bloodRelationDesc,
-          handleBloodRelDescChange,
-        })}
+      <TextInput
+        label="Partnership State/Country"
+        name={`partner${partnerFlag}_partnershipState`}
+        value={partnershipState}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+      />
     </div>
   );
 };
@@ -621,19 +884,22 @@ export const parentsMarried = (data: {
   return (
     <div css={SECTION_WRAPPER_STYLING}>
       <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
-        <h2 css={SECTION_HEADING_STYLING}>
-          Were your parents married at the time of your birth?
-        </h2>
-
         <div css={RADIOGROUP_CONTAINER_STYLING}>
           <div css={ONE_AND_HALF_MARGINBOTTOM}>
             <RadioGroup
               items={BOOL_RADIOGROUP}
-              groupLabel=""
+              groupLabel="Were your parents married at the time of your birth?"
               name={`partner${partnerFlag}_parentsMarriedAtBirth`}
               checkedValue={parentsMarriedAtBirth}
               handleItemChange={handleChange}
-              hideLabel
+              className={`radio-group__label`}
+              hideLabel={false}
+              softRequired={true}
+              toolTip={{
+                icon: '?',
+                msg:
+                  'This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.',
+              }}
             />
           </div>
         </div>
@@ -648,7 +914,10 @@ export const parents = (data: {
   parentA_Surname: string;
   parentB_Name: string;
   parentB_Surname: string;
+  additionalParent: string;
+  parentsMarriedAtBirth: string;
   handleChange: ((e: any) => void) | undefined;
+  handleAdditionalParentChange: ((e: any) => void) | undefined;
 }) => {
   const {
     partnerFlag,
@@ -656,174 +925,118 @@ export const parents = (data: {
     parentA_Surname,
     parentB_Name,
     parentB_Surname,
+    additionalParent,
+    parentsMarriedAtBirth,
     handleChange,
+    handleAdditionalParentChange,
   } = data;
   return (
     <div css={SECTION_WRAPPER_STYLING}>
-      <div css={[HEADER_SPACING_STYLING, HEADER_PADDING_TOP_STYLING]}>
-        <h2 css={SECTION_HEADING_STYLING}>Parents</h2>
-      </div>
+      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING]}>
+        Parents
+        <div className="notice">
+          Please enter the full names of your parent(s) as they appear on your
+          birth certificate. It’s important to note that marriage licenses
+          contain details about your parents and are accessible as public
+          records, but they cannot be searched for by the general public.
+          {ToolTip({
+            icon: '?',
+            msg:
+              'This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.',
+          })}
+        </div>
+      </h1>
+
       <div
         css={[
           MARRIAGE_INTENTION_FORM_STYLING,
           TWO_AND_HALF_MARGINBOTTOM,
           NAME_FIELDS_BASIC_CONTAINER_STYLING,
         ]}
-        style={{ marginBottom: '2.5em' }}
       >
-        <h4 css={SECTION_HEADING_STYLING}>Name of Parent 1/Mother</h4>
-
         <TextInput
-          label="Parent 1/Mother - First Middle Last"
+          label="Parent 1 - First Middle Last Name"
           name={`partner${partnerFlag}_parentA_Name`}
           value={parentA_Name}
           onChange={handleChange}
           disableLabelNoWrap={true}
           maxLength={38}
+          softRequired={true}
         />
 
         <TextInput
-          label="Parent 1/Mother - Maiden Name/Surname at Birth or Adoption"
+          label="Parent 1 - Family Name/Last Name At the time of their birth or adoption"
           name={`partner${partnerFlag}_parentA_Surname`}
           value={parentA_Surname}
           onChange={handleChange}
           disableLabelNoWrap={true}
           maxLength={38}
           optionalDescription={
-            "This should be your parent's last name at the time of their birth or adoption."
+            'This information might be found on your birth certificate.'
           }
+          softRequired={true}
         />
-      </div>
 
-      <div
-        css={[
-          MARRIAGE_INTENTION_FORM_STYLING,
-          TWO_AND_HALF_MARGINBOTTOM,
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-        ]}
-        style={{ marginBottom: '2.5em' }}
-      >
-        <h4 css={SECTION_HEADING_STYLING}>Name of Parent 2/Father</h4>
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <RadioGroup
+            items={BOOL_RADIOGROUP}
+            name={`partner${partnerFlag}_additionalParent`}
+            checkedValue={additionalParent}
+            handleItemChange={handleAdditionalParentChange}
+            groupLabel="Do you have a second parent?"
+            className={`radio-group__label`}
+            softRequired={true}
+            hideLabel={false}
+          />
+        </div>
 
-        <TextInput
-          label="Parent 2/Father - First Middle Last"
-          name={`partner${partnerFlag}_parentB_Name`}
-          value={parentB_Name}
-          onChange={handleChange}
-          disableLabelNoWrap={true}
-          maxLength={38}
-        />
+        {additionalParent === '1' &&
+          $additionalParent({
+            partnerFlag,
+            parentB_Name,
+            parentB_Surname,
+            handleChange,
+          })}
 
-        <TextInput
-          label="Parent 2/Father - Maiden Name/Surname at Birth or Adoption"
-          name={`partner${partnerFlag}_parentB_Surname`}
-          value={parentB_Surname}
-          onChange={handleChange}
-          disableLabelNoWrap={true}
-          maxLength={38}
-          optionalDescription={
-            "This should be your parent's last name at the time of their birth or adoption."
-          }
-        />
+        {parentsMarried({
+          partnerFlag,
+          parentsMarriedAtBirth,
+          handleChange,
+        })}
       </div>
     </div>
   );
 };
 
-const dissolved = (data: {
+export const $additionalParent = (data: {
   partnerFlag: string;
-  partnershipState: string;
-  partnershipTypeDissolved: string;
+  parentB_Name: string;
+  parentB_Surname: string;
   handleChange: ((e: any) => void) | undefined;
 }) => {
-  const {
-    partnerFlag,
-    partnershipTypeDissolved,
-    partnershipState,
-    handleChange,
-  } = data;
-
+  const { partnerFlag, parentB_Name, parentB_Surname, handleChange } = data;
   return (
-    <div
-      css={[
-        NAME_FIELDS_BASIC_CONTAINER_STYLING,
-        HEADER_SPACING_STYLING,
-        BOTTOM_SPACING_STYLING,
-      ]}
-    >
-      <h3 css={SECTION_HEADING_STYLING}>
-        Civil Union Or Domestic Partnership: Dissolved
-      </h3>
-
-      <div css={RADIOGROUP_CONTAINER_STYLING}>
-        <RadioGroup
-          items={PARTNERSHIP_TYPE_DISSOLVED}
-          name={`partner${partnerFlag}_partnershipTypeDissolved`}
-          checkedValue={partnershipTypeDissolved}
-          handleItemChange={handleChange}
-          groupLabel=""
-          hideLabel
-        />
-      </div>
-
+    <>
       <TextInput
-        label="Partnership State/Country"
-        name={`partner${partnerFlag}_partnershipState`}
-        value={partnershipState}
+        label="Parent 2 - First Middle Last Name"
+        name={`partner${partnerFlag}_parentB_Name`}
+        value={parentB_Name}
         onChange={handleChange}
         disableLabelNoWrap={true}
-        maxLength={100}
+        maxLength={38}
       />
-    </div>
-  );
-};
 
-export const partnershipType = (data: {
-  partnerFlag: string;
-  partnershipType: string;
-  partnershipState: string;
-  partnershipTypeDissolved: string;
-  handleChange: ((e: any) => void) | undefined;
-}) => {
-  const {
-    partnerFlag,
-    partnershipType,
-    partnershipState,
-    partnershipTypeDissolved,
-    handleChange,
-  } = data;
-
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <div
-        css={[
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-          HEADER_SPACING_STYLING,
-          BOTTOM_SPACING_STYLING,
-        ]}
-      >
-        <h2 css={SECTION_HEADING_STYLING}>Were you ever a member of a ...</h2>
-
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <RadioGroup
-            items={PARTNERSHIP_TYPE}
-            name={`partner${partnerFlag}_partnershipType`}
-            checkedValue={partnershipType}
-            handleItemChange={handleChange}
-            groupLabel=""
-            hideLabel
-          />
-        </div>
-      </div>
-
-      {partnershipType &&
-        (partnershipType === 'CIV' || partnershipType === 'DOM') &&
-        dissolved({
-          partnerFlag,
-          partnershipState,
-          partnershipTypeDissolved,
-          handleChange,
-        })}
-    </div>
+      <TextInput
+        label="Parent 2 - Family Name/Last Name At the time of their birth or adoption"
+        name={`partner${partnerFlag}_parentB_Surname`}
+        value={parentB_Surname}
+        onChange={handleChange}
+        disableLabelNoWrap={true}
+        maxLength={38}
+        optionalDescription={
+          "This should be your parent's last name at the time of their birth or adoption."
+        }
+      />
+    </>
   );
 };
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
index 19ab48097..3ff87cfb8 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
@@ -88,7 +88,7 @@ export default class ReviewForms extends Component<Props> {
             marriageIntentionCertificateRequest={
               this.props.marriageIntentionCertificateRequest
             }
-            partnerLabel={'A'}
+            partnerLabel={'1'}
             firstName={requestInformation.partnerA_firstName}
             lastName={requestInformation.partnerA_lastName}
             suffix={requestInformation.partnerA_suffix}
@@ -142,7 +142,7 @@ export default class ReviewForms extends Component<Props> {
             marriageIntentionCertificateRequest={
               this.props.marriageIntentionCertificateRequest
             }
-            partnerLabel={'B'}
+            partnerLabel={'2'}
             firstName={requestInformation.partnerB_firstName}
             lastName={requestInformation.partnerB_lastName}
             suffix={requestInformation.partnerB_suffix}
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
index 2c7d6838c..9c8221907 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/header.tsx
@@ -8,7 +8,7 @@ export default class HeaderUX extends Component {
   public render() {
     return (
       <div css={[REVIEW_INTRO_HEADER_STYLING]}>
-        <h1>Review Information</h1>
+        <h1>Review Your Information</h1>
 
         <p>
           <label>
diff --git a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
index 56813819c..ade1a428e 100644
--- a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
+++ b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
@@ -1,4 +1,4 @@
-import { COUNTRIES, US_STATES } from '../forms/inputData';
+import { COUNTRIES, US_STATES } from '../../../utils/data';
 
 /**
  * @name adjustForTimezone
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index dbedac273..ff0d01b19 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -274,24 +274,26 @@ export default class IndexPage extends React.Component<Props, State> {
     // let isStepComplete: boolean = false;
     let questionsEl: React.ReactNode = null;
 
+    const $defaultUI = (
+      <>
+        <Instructions
+          marriageIntentionCertificateRequest={
+            localMarriageIntentionCertificateRequest
+          }
+          handleProceed={this.advanceQuestion.bind(
+            this,
+            localMarriageIntentionCertificateRequest
+          )}
+          handleUserReset={this.handleUserReset}
+        />
+
+        {emailContentBlock()}
+      </>
+    );
+
     switch (currentStep) {
       case 'instructions':
-        questionsEl = (
-          <>
-            <Instructions
-              marriageIntentionCertificateRequest={
-                localMarriageIntentionCertificateRequest
-              }
-              handleProceed={this.advanceQuestion.bind(
-                this,
-                localMarriageIntentionCertificateRequest
-              )}
-              handleUserReset={this.handleUserReset}
-            />
-
-            {emailContentBlock()}
-          </>
-        );
+        questionsEl = $defaultUI;
         break;
       case 'contactInfo':
         questionsEl = (
@@ -324,6 +326,7 @@ export default class IndexPage extends React.Component<Props, State> {
               )}
               handleStepBack={this.stepBackOneQuestion}
               partnerLabel={'A'}
+              partnerNum={1}
             />
 
             {emailContentBlock()}
@@ -343,6 +346,7 @@ export default class IndexPage extends React.Component<Props, State> {
               )}
               handleStepBack={this.stepBackOneQuestion}
               partnerLabel={'B'}
+              partnerNum={2}
             />
 
             {emailContentBlock()}
@@ -377,22 +381,7 @@ export default class IndexPage extends React.Component<Props, State> {
         );
         break;
       default:
-        questionsEl = (
-          <>
-            <Instructions
-              marriageIntentionCertificateRequest={
-                localMarriageIntentionCertificateRequest
-              }
-              handleProceed={this.advanceQuestion.bind(
-                this,
-                localMarriageIntentionCertificateRequest
-              )}
-              handleUserReset={this.handleUserReset}
-            />
-
-            {emailContentBlock()}
-          </>
-        );
+        questionsEl = $defaultUI;
         break;
     }
 
diff --git a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
index a69036a85..77f21087c 100644
--- a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
+++ b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
@@ -28,6 +28,7 @@ export const INITIAL_REQUEST_INFORMATION: Readonly<
   partnerA_lastName: '',
   partnerA_middleName: '',
   partnerA_surName: '',
+  partnerA_useSurname: '',
   partnerA_dob: null,
   partnerA_age: '',
   partnerA_occupation: '',
@@ -54,6 +55,8 @@ export const INITIAL_REQUEST_INFORMATION: Readonly<
   partnerA_residenceZip: '',
   partnerA_marriageNumb: '',
   partnerA_lastMarriageStatus: '',
+  partnerA_marriedBefore: '',
+  partnerA_additionalParent: '',
 
   partnerB_fullName: '',
   partnerB_firstMiddleName: '',
@@ -62,6 +65,7 @@ export const INITIAL_REQUEST_INFORMATION: Readonly<
   partnerB_lastName: '',
   partnerB_middleName: '',
   partnerB_surName: '',
+  partnerB_useSurname: '',
   partnerB_dob: null,
   partnerB_age: '',
   partnerB_occupation: '',
@@ -88,6 +92,8 @@ export const INITIAL_REQUEST_INFORMATION: Readonly<
   partnerB_residenceZip: '',
   partnerB_marriageNumb: '',
   partnerB_lastMarriageStatus: '',
+  partnerB_marriedBefore: '',
+  partnerB_additionalParent: '',
 
   email: '',
   emailConfirm: '',
@@ -158,6 +164,7 @@ export default class MarriageIntentionCertificateRequest {
       partnerA_lastName: this.requestInformation.partnerA_lastName,
       partnerA_middleName: this.requestInformation.partnerA_middleName,
       partnerA_surName: this.requestInformation.partnerA_surName,
+      partnerA_useSurname: this.requestInformation.partnerA_useSurname,
       partnerA_dob: this.requestInformation.partnerA_dob
         ? this.requestInformation.partnerA_dob.toISOString()
         : null,
@@ -197,6 +204,9 @@ export default class MarriageIntentionCertificateRequest {
       partnerA_marriageNumb: this.requestInformation.partnerA_marriageNumb,
       partnerA_lastMarriageStatus: this.requestInformation
         .partnerA_lastMarriageStatus,
+      partnerA_marriedBefore: this.requestInformation.partnerA_marriedBefore,
+      partnerA_additionalParent: this.requestInformation
+        .partnerA_additionalParent,
 
       partnerB_fullName: this.requestInformation.partnerB_fullName,
       partnerB_firstMiddleName: this.requestInformation
@@ -206,6 +216,7 @@ export default class MarriageIntentionCertificateRequest {
       partnerB_lastName: this.requestInformation.partnerB_lastName,
       partnerB_middleName: this.requestInformation.partnerB_middleName,
       partnerB_surName: this.requestInformation.partnerB_surName,
+      partnerB_useSurname: this.requestInformation.partnerB_useSurname,
       partnerB_dob: this.requestInformation.partnerB_dob
         ? this.requestInformation.partnerB_dob.toISOString()
         : null,
@@ -245,6 +256,9 @@ export default class MarriageIntentionCertificateRequest {
       partnerB_marriageNumb: this.requestInformation.partnerB_marriageNumb,
       partnerB_lastMarriageStatus: this.requestInformation
         .partnerB_lastMarriageStatus,
+      partnerB_marriedBefore: this.requestInformation.partnerB_marriedBefore,
+      partnerB_additionalParent: this.requestInformation
+        .partnerB_additionalParent,
 
       email: this.requestInformation.email,
       emailConfirm: this.requestInformation.emailConfirm,
@@ -274,6 +288,7 @@ export default class MarriageIntentionCertificateRequest {
       partnerA_lastName: obj.requestInformation.partnerA_lastName,
       partnerA_middleName: obj.requestInformation.partnerA_middleName,
       partnerA_surName: obj.requestInformation.partnerA_surName,
+      partnerA_useSurname: obj.requestInformation.partnerA_useSurname,
       partnerA_dob: obj.requestInformation.partnerA_dob
         ? new Date(obj.requestInformation.partnerA_dob)
         : null,
@@ -310,6 +325,9 @@ export default class MarriageIntentionCertificateRequest {
       partnerA_marriageNumb: obj.requestInformation.partnerA_marriageNumb,
       partnerA_lastMarriageStatus:
         obj.requestInformation.partnerA_lastMarriageStatus,
+      partnerA_marriedBefore: obj.requestInformation.partnerA_marriedBefore,
+      partnerA_additionalParent:
+        obj.requestInformation.partnerA_additionalParent,
 
       partnerB_fullName: this.requestInformation.partnerB_fullName,
       partnerB_firstMiddleName: this.requestInformation
@@ -319,6 +337,7 @@ export default class MarriageIntentionCertificateRequest {
       partnerB_lastName: obj.requestInformation.partnerB_lastName,
       partnerB_middleName: obj.requestInformation.partnerB_middleName,
       partnerB_surName: obj.requestInformation.partnerB_surName,
+      partnerB_useSurname: obj.requestInformation.partnerB_useSurname,
       partnerB_dob: obj.requestInformation.partnerB_dob
         ? new Date(obj.requestInformation.partnerB_dob)
         : null,
@@ -355,6 +374,9 @@ export default class MarriageIntentionCertificateRequest {
       partnerB_marriageNumb: obj.requestInformation.partnerB_marriageNumb,
       partnerB_lastMarriageStatus:
         obj.requestInformation.partnerB_lastMarriageStatus,
+      partnerB_marriedBefore: obj.requestInformation.partnerB_marriedBefore,
+      partnerB_additionalParent:
+        obj.requestInformation.partnerB_additionalParent,
 
       email: obj.requestInformation.email,
       emailConfirm: obj.requestInformation.emailConfirm,
@@ -418,7 +440,6 @@ export default class MarriageIntentionCertificateRequest {
     partnerLabel: string
   ): void {
     partnerLabel = partnerLabel || '';
-    // console.log(`answerQuestion>partnerLabel: [${partnerLabel}]`);
     if (partnerLabel === '') {
       this.requestInformation = {
         ...this.requestInformation,
diff --git a/services-js/registry-certs/client/types.ts b/services-js/registry-certs/client/types.ts
index 1448fe05b..c20af5f46 100644
--- a/services-js/registry-certs/client/types.ts
+++ b/services-js/registry-certs/client/types.ts
@@ -160,6 +160,7 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerA_lastName: string;
   partnerA_middleName: string;
   partnerA_surName: string;
+  partnerA_useSurname: string;
   partnerA_dob?: Date | null;
   partnerA_age: string;
   partnerA_occupation: string;
@@ -186,6 +187,8 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerA_residenceZip: string;
   partnerA_marriageNumb: string;
   partnerA_lastMarriageStatus: string;
+  partnerA_marriedBefore: string;
+  partnerA_additionalParent: string;
 
   partnerB_fullName: string;
   partnerB_firstMiddleName: string;
@@ -194,6 +197,7 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerB_lastName: string;
   partnerB_middleName: string;
   partnerB_surName: string;
+  partnerB_useSurname: string;
   partnerB_dob?: Date | null;
   partnerB_age: string;
   partnerB_occupation: string;
@@ -220,6 +224,8 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerB_residenceZip: string;
   partnerB_marriageNumb: string;
   partnerB_lastMarriageStatus: string;
+  partnerB_marriedBefore: string;
+  partnerB_additionalParent: string;
 
   email: string;
   emailConfirm: string;
diff --git a/services-js/registry-certs/server/graphql/mutation.ts b/services-js/registry-certs/server/graphql/mutation.ts
index 2323b28fe..e747ac83e 100644
--- a/services-js/registry-certs/server/graphql/mutation.ts
+++ b/services-js/registry-certs/server/graphql/mutation.ts
@@ -429,7 +429,6 @@ const mutationResolvers: Resolvers<Mutation, Context> = {
     { registryDb }
   ): Promise<OrderResult> => {
     console.log('mutation > submitMarriageIntentionCertificateOrder:');
-    // console.log(rollbar, stripe, emails, registryDb);
     const {
       Email,
       DayPhone,
diff --git a/services-js/registry-certs/server/services/RegistryDb.ts b/services-js/registry-certs/server/services/RegistryDb.ts
index 5a2facd6a..ac0c7a435 100644
--- a/services-js/registry-certs/server/services/RegistryDb.ts
+++ b/services-js/registry-certs/server/services/RegistryDb.ts
@@ -15,7 +15,6 @@ import {
 import RegistryDbFake from './RegistryDbFake';
 import { AnnotatedFilePart, PACKAGE_SRC_ROOT } from '../util';
 
-// import { COUNTRIES } from '../../client/marriageintention/forms/inputData';
 export const COUNTRIES = [
   {
     label: 'United States of America',
diff --git a/services-js/registry-certs/utils/data.ts b/services-js/registry-certs/utils/data.ts
new file mode 100644
index 000000000..f0690a96f
--- /dev/null
+++ b/services-js/registry-certs/utils/data.ts
@@ -0,0 +1,404 @@
+export const COUNTRIES = [
+  {
+    label: 'United States of America',
+    shortLabel: 'USA',
+    value: 'USA',
+  },
+  {
+    label: 'United States Virgin Islands',
+    shortLabel: 'Virgin Islands',
+    value: 'VIR',
+  },
+  { label: 'Afghanistan', value: 'AFG' },
+  {
+    label: 'Åland Islands',
+    shortLabel: 'Aland Islands',
+    value: 'ALA',
+  },
+  { label: 'Albania', value: 'ALB' },
+  { label: 'Algeria', value: 'DZA' },
+  { label: 'American Samoa', value: 'ASM' },
+  { label: 'Andorra', value: 'AND' },
+  { label: 'Angola', value: 'AGO' },
+  { label: 'Anguilla', value: 'AIA' },
+  { label: 'Antigua and Barbuda', value: 'ATG' },
+  { label: 'Argentina', value: 'ARG' },
+  { label: 'Armenia', value: 'ARM' },
+  { label: 'Aruba', value: 'ABW' },
+  { label: 'Australia', value: 'AUS' },
+  { label: 'Austria', value: 'AUT' },
+  { label: 'Azerbaijan', value: 'AZE' },
+  { label: 'Bahamas', value: 'BHS' },
+  { label: 'Bahrain', value: 'BHR' },
+  { label: 'Bangladesh', value: 'BGD' },
+  { label: 'Barbados', value: 'BRB' },
+  { label: 'Belarus', value: 'BLR' },
+  { label: 'Belgium', value: 'BEL' },
+  { label: 'Belize', value: 'BLZ' },
+  { label: 'Benin', value: 'BEN' },
+  { label: 'Bermuda', value: 'BMU' },
+  { label: 'Bhutan', value: 'BTN' },
+  {
+    label: 'Bolivia (Plurinational State of)',
+    shortLabel: 'Bolivia',
+    value: 'BOL',
+  },
+  {
+    label: 'Bonaire, Saint Eustatius and Saba',
+    shortLabel: 'Bonaire',
+    value: 'BES',
+  },
+  { label: 'Bosnia and Herzegovina', value: 'BIH' },
+  { label: 'Botswana', value: 'BWA' },
+  { label: 'Brazil', value: 'BRA' },
+  { label: 'British Virgin Islands', value: 'VGB' },
+  { label: 'Brunei Darussalam', value: 'BRN' },
+  { label: 'Bulgaria', value: 'BGR' },
+  { label: 'Burkina Faso', value: 'BFA' },
+  { label: 'Burundi', value: 'BDI' },
+  { label: 'Cabo Verde', value: 'CPV' },
+  { label: 'Cambodia', value: 'KHM' },
+  { label: 'Cameroon', value: 'CMR' },
+  { label: 'Canada', value: 'CAN' },
+  { label: 'Cayman Islands', value: 'CYM' },
+  { label: 'Central African Republic', value: 'CAF' },
+  { label: 'Chad', value: 'TCD' },
+  { label: 'Chile', value: 'CHL' },
+  { label: 'China', value: 'CHN' },
+  {
+    label: 'China, Hong Kong Special Administrative Region',
+    shortLabel: 'China',
+    value: 'HKG',
+  },
+  {
+    label: 'China, Macao Special Administrative Region',
+    shortLabel: 'Macao',
+    value: 'MAC',
+  },
+  { label: 'Colombia', value: 'COL' },
+  { label: 'Comoros', value: 'COM' },
+  { label: 'Congo', value: 'COG' },
+  { label: 'Cook Islands', value: 'COK' },
+  { label: 'Costa Rica', value: 'CRI' },
+  { label: "Côte d'Ivoire", value: 'CIV' },
+  { label: 'Croatia', value: 'HRV' },
+  { label: 'Cuba', value: 'CUB' },
+  { label: 'Curaçao', value: 'CUW' },
+  { label: 'Cyprus', value: 'CYP' },
+  { label: 'Czech Republic', value: 'CZE' },
+  {
+    label: "Democratic People's Republic of Korea",
+    shortLabel: 'North Korea',
+    value: 'PRK',
+  },
+  {
+    label: 'Democratic Republic of the Congo',
+    shortLabel: 'Congo',
+    value: 'COD',
+  },
+  { label: 'Denmark', value: 'DNK' },
+  { label: 'Djibouti', value: 'DJI' },
+  { label: 'Dominica', value: 'DMA' },
+  { label: 'Dominican Republic', value: 'DOM' },
+  { label: 'Ecuador', value: 'ECU' },
+  { label: 'Egypt', value: 'EGY' },
+  { label: 'El Salvador', value: 'SLV' },
+  { label: 'Equatorial Guinea', value: 'GNQ' },
+  { label: 'Eritrea', value: 'ERI' },
+  { label: 'Estonia', value: 'EST' },
+  { label: 'Ethiopia', value: 'ETH' },
+  { label: 'Faeroe Islands', value: 'FRO' },
+  {
+    label: 'Falkland Islands (Malvinas)',
+    shortLabel: 'Falkland Islands',
+    value: 'FLK',
+  },
+  { label: 'Fiji', value: 'FJI' },
+  { label: 'Finland', value: 'FIN' },
+  { label: 'France', value: 'FRA' },
+  { label: 'French Guiana', value: 'GUF' },
+  { label: 'French Polynesia', value: 'PYF' },
+  { label: 'Gabon', value: 'GAB' },
+  { label: 'Gambia', value: 'GMB' },
+  { label: 'Georgia', value: 'GEO' },
+  { label: 'Germany', value: 'DEU' },
+  { label: 'Ghana', value: 'GHA' },
+  { label: 'Gibraltar', value: 'GIB' },
+  { label: 'Greece', value: 'GRC' },
+  { label: 'Greenland', value: 'GRL' },
+  { label: 'Grenada', value: 'GRD' },
+  { label: 'Guadeloupe', value: 'GLP' },
+  { label: 'Guam', value: 'GUM' },
+  { label: 'Guatemala', value: 'GTM' },
+  { label: 'Guernsey', value: 'GGY' },
+  { label: 'Guinea', value: 'GIN' },
+  { label: 'Guinea-Bissau', value: 'GNB' },
+  { label: 'Guyana', value: 'GUY' },
+  { label: 'Haiti', value: 'HTI' },
+  { label: 'Holy See', value: 'VAT' },
+  { label: 'Honduras', value: 'HND' },
+  { label: 'Hungary', value: 'HUN' },
+  { label: 'Iceland', value: 'ISL' },
+  { label: 'India', value: 'IND' },
+  { label: 'Indonesia', value: 'IDN' },
+  {
+    label: 'Iran (Islamic Republic of)',
+    shortLabel: 'Iran',
+    value: 'IRN',
+  },
+  { label: 'Iraq', value: 'IRQ' },
+  { label: 'Ireland', value: 'IRL' },
+  { label: 'Isle of Man', value: 'IMN' },
+  { label: 'Israel', value: 'ISR' },
+  { label: 'Italy', value: 'ITA' },
+  { label: 'Jamaica', value: 'JAM' },
+  { label: 'Japan', value: 'JPN' },
+  { label: 'Jersey', value: 'JEY' },
+  { label: 'Jordan', value: 'JOR' },
+  { label: 'Kazakhstan', value: 'KAZ' },
+  { label: 'Kenya', value: 'KEN' },
+  { label: 'Kiribati', value: 'KIR' },
+  { label: 'Kuwait', value: 'KWT' },
+  { label: 'Kyrgyzstan', value: 'KGZ' },
+  {
+    label: "Lao People's Democratic Republic",
+    shortLabel: 'Lao',
+    value: 'LAO',
+  },
+  { label: 'Latvia', value: 'LVA' },
+  { label: 'Lebanon', value: 'LBN' },
+  { label: 'Lesotho', value: 'LSO' },
+  { label: 'Liberia', value: 'LBR' },
+  { label: 'Libya', value: 'LBY' },
+  { label: 'Liechtenstein', value: 'LIE' },
+  { label: 'Lithuania', value: 'LTU' },
+  { label: 'Luxembourg', value: 'LUX' },
+  { label: 'Madagascar', value: 'MDG' },
+  { label: 'Malawi', value: 'MWI' },
+  { label: 'Malaysia', value: 'MYS' },
+  { label: 'Maldives', value: 'MDV' },
+  { label: 'Mali', value: 'MLI' },
+  { label: 'Malta', value: 'MLT' },
+  { label: 'Marshall Islands', value: 'MHL' },
+  { label: 'Martinique', value: 'MTQ' },
+  { label: 'Mauritania', value: 'MRT' },
+  { label: 'Mauritius', value: 'MUS' },
+  { label: 'Mayotte', value: 'MYT' },
+  { label: 'Mexico', value: 'MEX' },
+  {
+    label: 'Micronesia (Federated States of)',
+    shortLabel: 'Micronesia',
+    value: 'FSM',
+  },
+  { label: 'Monaco', value: 'MCO' },
+  { label: 'Mongolia', value: 'MNG' },
+  { label: 'Montenegro', value: 'MNE' },
+  { label: 'Montserrat', value: 'MSR' },
+  { label: 'Morocco', value: 'MAR' },
+  { label: 'Mozambique', value: 'MOZ' },
+  { label: 'Myanmar', value: 'MMR' },
+  { label: 'Namibia', value: 'NAM' },
+  { label: 'Nauru', value: 'NRU' },
+  { label: 'Nepal', value: 'NPL' },
+  { label: 'Netherlands', value: 'NLD' },
+  { label: 'New Caledonia', value: 'NCL' },
+  { label: 'New Zealand', value: 'NZL' },
+  { label: 'Nicaragua', value: 'NIC' },
+  { label: 'Niger', value: 'NER' },
+  { label: 'Nigeria', value: 'NGA' },
+  { label: 'Niue', value: 'NIU' },
+  { label: 'Norfolk Island', value: 'NFK' },
+  {
+    label: 'Northern Mariana Islands',
+    shortLabel: 'Mariana Islands',
+    value: 'MNP',
+  },
+  { label: 'Norway', value: 'NOR' },
+  { label: 'Oman', value: 'OMN' },
+  { label: 'Pakistan', value: 'PAK' },
+  { label: 'Palau', value: 'PLW' },
+  { label: 'Panama', value: 'PAN' },
+  { label: 'Papua New Guinea', value: 'PNG' },
+  { label: 'Paraguay', value: 'PRY' },
+  { label: 'Peru', value: 'PER' },
+  { label: 'Philippines', value: 'PHL' },
+  { label: 'Pitcairn', value: 'PCN' },
+  { label: 'Poland', value: 'POL' },
+  { label: 'Portugal', value: 'PRT' },
+  { label: 'Puerto Rico', value: 'PRI' },
+  { label: 'Qatar', value: 'QAT' },
+  { label: 'Republic of Korea', value: 'KOR' },
+  {
+    label: 'Republic of Moldova',
+    shortLabel: 'Moldova',
+    value: 'MDA',
+  },
+  { label: 'Réunion', value: 'REU' },
+  { label: 'Romania', value: 'ROU' },
+  { label: 'Russian Federation', value: 'RUS' },
+  { label: 'Rwanda', value: 'RWA' },
+  { label: 'Saint-Barthélemy', value: 'BLM' },
+  { label: 'Saint Helena', value: 'SHN' },
+  { label: 'Saint Kitts and Nevis', value: 'KNA' },
+  { label: 'Saint Lucia', value: 'LCA' },
+  {
+    label: 'Saint-Martin (French part)',
+    shortLabel: 'Saint-Martin',
+    value: 'MAF',
+  },
+  { label: 'Saint Pierre and Miquelon', value: 'SPM' },
+  {
+    label: 'Saint Vincent and the Grenadines',
+    value: 'VCT',
+  },
+  { label: 'Samoa', value: 'WSM' },
+  { label: 'San Marino', value: 'SMR' },
+  { label: 'Sao Tome and Principe', value: 'STP' },
+  { label: 'Saudi Arabia', value: 'SAU' },
+  { label: 'Senegal', value: 'SEN' },
+  { label: 'Serbia', value: 'SRB' },
+  { label: 'Seychelles', value: 'SYC' },
+  { label: 'Sierra Leone', value: 'SLE' },
+  { label: 'Singapore', value: 'SGP' },
+  {
+    label: 'Sint Maarten (Dutch part)',
+    shortLabel: 'Sint Maarten',
+    value: 'SXM',
+  },
+  { label: 'Slovakia', value: 'SVK' },
+  { label: 'Slovenia', value: 'SVN' },
+  { label: 'Solomon Islands', value: 'SLB' },
+  { label: 'Somalia', value: 'SOM' },
+  { label: 'South Africa', value: 'ZAF' },
+  { label: 'South Sudan', value: 'SSD' },
+  { label: 'Spain', value: 'ESP' },
+  { label: 'Sri Lanka', value: 'LKA' },
+  {
+    label: 'State of Palestine',
+    shortLabel: 'Palestine',
+    value: 'PSE',
+  },
+  { label: 'Sudan', value: 'SDN' },
+  { label: 'Suriname', value: 'SUR' },
+  {
+    label: 'Svalbard and Jan Mayen Islands',
+    shortLabel: 'Svalbard',
+    value: 'SJM',
+  },
+  { label: 'Swaziland', value: 'SWZ' },
+  { label: 'Sweden', value: 'SWE' },
+  { label: 'Switzerland', value: 'CHE' },
+  { label: 'Syrian Arab Republic', value: 'SYR' },
+  { label: 'Taiwan', value: 'TWAN' },
+  { label: 'Tajikistan', value: 'TJK' },
+  { label: 'Thailand', value: 'THA' },
+  {
+    label: 'The former Yugoslav Republic of Macedonia',
+    shortLabel: 'Macedonia',
+    value: 'MKD',
+  },
+  { label: 'Timor-Leste', value: 'TLS' },
+  { label: 'Togo', value: 'TGO' },
+  { label: 'Tokelau', value: 'TKL' },
+  { label: 'Tonga', value: 'TON' },
+  { label: 'Trinidad and Tobago', value: 'TTO' },
+  { label: 'Tunisia', value: 'TUN' },
+  { label: 'Turkey', value: 'TUR' },
+  { label: 'Turkmenistan', value: 'TKM' },
+  {
+    label: 'Turks and Caicos Islands',
+    shortLabel: 'Turks & Caicos',
+    value: 'TCA',
+  },
+  { label: 'Tuvalu', value: 'TUV' },
+  { label: 'Uganda', value: 'UGA' },
+  { label: 'Ukraine', value: 'UKR' },
+  {
+    label: 'United Arab Emirates',
+    shortLabel: 'UAE',
+    value: 'ARE',
+  },
+  {
+    label: 'United Kingdom of Great Britain and Northern Ireland',
+    shortLabel: 'United Kingdom',
+    value: 'GBR',
+  },
+  {
+    label: 'United Republic of Tanzania',
+    shortLabel: 'United Republic of Tanzania',
+    value: 'TZA',
+  },
+  { label: 'Uruguay', value: 'URY' },
+  { label: 'Uzbekistan', value: 'UZB' },
+  { label: 'Vanuatu', value: 'VUT' },
+  {
+    label: 'Venezuela (Bolivarian Republic of)',
+    shortLabel: 'Venezuela',
+    value: 'VEN',
+  },
+  { label: 'Vietnam', value: 'VNM' },
+  {
+    label: 'Wallis and Futuna Islands',
+    shortLabel: 'Wallis',
+    value: 'WLF',
+  },
+  { label: 'Western Sahara', value: 'ESH' },
+  { label: 'Yemen', value: 'YEM' },
+  { label: 'Zambia', value: 'ZMB' },
+  { label: 'Zimbabwe', value: 'ZWE' },
+];
+
+export const US_STATES = [
+  { label: '--', value: '', field: '' },
+  { label: 'AL', value: 'AL', field: '' },
+  { label: 'AK', value: 'AK', field: '' },
+  { label: 'AZ', value: 'AZ', field: '' },
+  { label: 'AR', value: 'AR', field: '' },
+  { label: 'CA', value: 'CA', field: '' },
+  { label: 'CO', value: 'CO', field: '' },
+  { label: 'CT', value: 'CT', field: '' },
+  { label: 'DE', value: 'DE', field: '' },
+  { label: 'DC', value: 'DC', field: '' },
+  { label: 'FL', value: 'FL', field: '' },
+  { label: 'GA', value: 'GA', field: '' },
+  { label: 'HI', value: 'HI', field: '' },
+  { label: 'ID', value: 'ID', field: '' },
+  { label: 'IL', value: 'IL', field: '' },
+  { label: 'IN', value: 'IN', field: '' },
+  { label: 'IA', value: 'IA', field: '' },
+  { label: 'KS', value: 'KS', field: '' },
+  { label: 'KY', value: 'KY', field: '' },
+  { label: 'LA', value: 'LA', field: '' },
+  { label: 'ME', value: 'ME', field: '' },
+  { label: 'MD', value: 'MD', field: '' },
+  { label: 'MA', value: 'MA', field: '' },
+  { label: 'MI', value: 'MI', field: '' },
+  { label: 'MN', value: 'MN', field: '' },
+  { label: 'MS', value: 'MS', field: '' },
+  { label: 'MO', value: 'MO', field: '' },
+  { label: 'MT', value: 'MT', field: '' },
+  { label: 'NE', value: 'NE', field: '' },
+  { label: 'NV', value: 'NV', field: '' },
+  { label: 'NH', value: 'NH', field: '' },
+  { label: 'NJ', value: 'NJ', field: '' },
+  { label: 'NM', value: 'NM', field: '' },
+  { label: 'NY', value: 'NY', field: '' },
+  { label: 'NC', value: 'NC', field: '' },
+  { label: 'ND', value: 'ND', field: '' },
+  { label: 'OH', value: 'OH', field: '' },
+  { label: 'OK', value: 'OK', field: '' },
+  { label: 'OR', value: 'OR', field: '' },
+  { label: 'PA', value: 'PA', field: '' },
+  { label: 'RI', value: 'RI', field: '' },
+  { label: 'SC', value: 'SC', field: '' },
+  { label: 'SD', value: 'SD', field: '' },
+  { label: 'TN', value: 'TN', field: '' },
+  { label: 'TX', value: 'TX', field: '' },
+  { label: 'UT', value: 'UT', field: '' },
+  { label: 'VT', value: 'VT', field: '' },
+  { label: 'VA', value: 'VA', field: '' },
+  { label: 'WA', value: 'WA', field: '' },
+  { label: 'WV', value: 'WV', field: '' },
+  { label: 'WI', value: 'WI', field: '' },
+  { label: 'WY', value: 'WY', field: '' },
+];

From 4d1fd39b4a46b4c6c1a1eb553a65adbb17ab3adb Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 2 Apr 2024 19:44:15 -0400
Subject: [PATCH 10/28] DIG-4058: Text Box treatments for data entry states and
 required fields

---
 .../src/__snapshots__/Storyshots.test.ts.snap | 176 +++++++++++++++++-
 .../src/form-elements/UploadPhoto.stories.tsx |   4 +-
 .../inputs/TextInput.stories.tsx              |  44 +++++
 .../src/form-elements/inputs/TextInput.tsx    |   2 +-
 .../react-fleet/src/utilities/constants.ts    |   1 +
 .../__snapshots__/Storyshots.test.ts.snap     | 101 +++++++---
 .../marriageintention/forms/eventHandlers.ts  |  26 +++
 .../marriageintention/forms/partnerFormA.tsx  |  21 ++-
 .../marriageintention/forms/partnerFormB.tsx  |  17 ++
 .../marriageintention/forms/partnerFormUI.tsx |  24 ++-
 .../client/marriageintention/index.tsx        |  12 ++
 .../MarriageIntentionCertificateRequest.ts    |  10 +
 services-js/registry-certs/client/types.ts    |   2 +
 13 files changed, 408 insertions(+), 32 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index a81404522..4afe0da4d 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -3331,6 +3331,178 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
 </div>
 `;
 
+exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
+    }
+  }
+>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2715199497"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        Default (non-active, unvalidated or required
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      disabled={false}
+      id="input-2715199497"
+      placeholder=""
+      required={false}
+      type="text"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-3647184142"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        State - Focus - Click into field
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      disabled={false}
+      id="input-3647184142"
+      placeholder=""
+      required={false}
+      type="text"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-680647510"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        State - Required
+      </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  "
+      disabled={false}
+      id="input-680647510"
+      placeholder=""
+      required={true}
+      type="text"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+  <div>
+    <label
+      className="txt-l "
+      htmlFor="input-2490219431"
+      style={
+        Object {
+          "display": "flex",
+        }
+      }
+    >
+      <span
+        style={
+          Object {
+            "display": "flex",
+            "marginRight": "0.5em",
+            "whiteSpace": "nowrap",
+          }
+        }
+      >
+        State - Error
+      </span>
+    </label>
+    <input
+      aria-label=""
+      className="txt-f  txt-f--err"
+      disabled={false}
+      id="input-2490219431"
+      placeholder=""
+      required={false}
+      type="text"
+    />
+    <div
+      className="t--subinfo t--err m-b100 m-t100"
+    >
+       
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
 <div
   style={
@@ -3661,7 +3833,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       disabled={false}
       id="input-362326901"
       placeholder=""
@@ -3682,7 +3854,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </div>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       disabled={false}
       id="input-362326901"
       placeholder=""
diff --git a/modules-js/react-fleet/src/form-elements/UploadPhoto.stories.tsx b/modules-js/react-fleet/src/form-elements/UploadPhoto.stories.tsx
index 6e81804ba..7c860a029 100644
--- a/modules-js/react-fleet/src/form-elements/UploadPhoto.stories.tsx
+++ b/modules-js/react-fleet/src/form-elements/UploadPhoto.stories.tsx
@@ -1,9 +1,9 @@
 /** @jsx jsx */
 
-import { storiesOf } from '@storybook/react';
-
 import { css, jsx } from '@emotion/core';
 
+import { storiesOf } from '@storybook/react';
+
 import { BLACK, OPTIMISTIC_BLUE_LIGHT, WHITE } from '../utilities/constants';
 
 import UploadPhoto from './UploadPhoto';
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
index 436f8779e..e9aa364b6 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
@@ -121,4 +121,48 @@ storiesOf('Form Elements|Inputs/TextInput', module)
         />
       </>
     );
+  })
+  .add('interactive states', () => {
+    return (
+      <>
+        <TextInput
+          label={text(
+            'Label text',
+            'Default (non-active, unvalidated or required'
+          )}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', false)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', false)}
+        />
+
+        <TextInput
+          label={text('Label text', 'State - Focus - Click into field')}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', false)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', false)}
+        />
+
+        <TextInput
+          label={text('Label text', 'State - Required')}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', true)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', false)}
+        />
+
+        <TextInput
+          label={text('Label text', 'State - Error')}
+          placeholder={text('Placeholder text', '')}
+          small={boolean('Small variant', false)}
+          required={boolean('Required', false)}
+          disabled={boolean('Disabled', false)}
+          error={boolean('Error', true)}
+        />
+      </>
+    );
   });
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 8d3f5ed93..5b4a6e01c 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -76,7 +76,7 @@ export default function TextInput(props: Props): JSX.Element {
     label: `txt-l ${props.small ? 'txt-l--sm' : ''}`,
     input: `txt-f ${props.small ? 'txt-f--sm' : ''} ${
       props.error ? 'txt-f--err' : ''
-    }`,
+    }${props.softRequired ? ' txt-f--sr' : ''}`,
   };
 
   const labelText = (label): React.ReactChild => {
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index 853461d35..6a844d651 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -1,4 +1,5 @@
 export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
+// export const PUBLIC_CSS_URL = 'http://localhost:3030/css/public.css';
 export const WHITE = '#fff';
 export const BLACK = '#000';
 export const YELLOW = '#fcb61a';
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 27b3b78ee..24e2d29f7 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -65831,7 +65831,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
       </label>
       <input
         aria-label=""
-        className="txt-f  "
+        className="txt-f   txt-f--sr"
         id="input-1547104625"
         maxLength={100}
         name="partnerA_birthCity"
@@ -67871,7 +67871,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
       </label>
       <input
         aria-label=""
-        className="txt-f  "
+        className="txt-f   txt-f--sr"
         id="input-1547104625"
         maxLength={100}
         name="partnerA_birthCity"
@@ -70687,11 +70687,12 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       id="input-2048906072"
       maxLength={100}
       name="partner1_firstName"
       onChange={[Function]}
+      required={true}
       type="text"
       value="Peter"
     />
@@ -70763,14 +70764,27 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       >
         Last Name
       </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+      </span>
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       id="input-1103291528"
       maxLength={100}
       name="partner1_lastName"
       onChange={[Function]}
+      required={true}
       type="text"
       value="Pan"
     />
@@ -71005,7 +71019,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       id="input-2786084594"
       maxLength={100}
       name="partner1_occupation"
@@ -71405,11 +71419,12 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       id="input-2048906072"
       maxLength={100}
       name="partner1_firstName"
       onChange={[Function]}
+      required={true}
       type="text"
       value="Peter"
     />
@@ -71481,14 +71496,27 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       >
         Last Name
       </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+      </span>
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       id="input-1103291528"
       maxLength={100}
       name="partner1_lastName"
       onChange={[Function]}
+      required={true}
       type="text"
       value="Pan"
     />
@@ -71635,11 +71663,12 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       </label>
       <input
         aria-label=""
-        className="txt-f  "
+        className="txt-f   txt-f--sr"
         id="input-546901997"
         maxLength={50}
         name="partner1_surName"
         onChange={[Function]}
+        required={true}
         type="text"
         value="Neverland"
       />
@@ -71793,7 +71822,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   txt-f--sr"
       id="input-2786084594"
       maxLength={100}
       name="partner1_occupation"
@@ -73729,7 +73758,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   txt-f--sr"
           id="input-2580217931"
           maxLength={100}
           name="partnerA_residenceCity"
@@ -73784,7 +73813,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   txt-f--sr"
           id="input-770365431"
           maxLength={100}
           name="partnerA_residenceAddress"
@@ -73835,7 +73864,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   txt-f--sr"
           id="input-2413436367"
           maxLength={10}
           minLength={5}
@@ -75226,11 +75255,12 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   txt-f--sr"
                         id="input-2048906072"
                         maxLength={100}
                         name="partnerA_firstName"
                         onChange={[Function]}
+                        required={true}
                         type="text"
                         value=""
                       />
@@ -75302,14 +75332,27 @@ Array [
                         >
                           Last Name
                         </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   txt-f--sr"
                         id="input-1103291528"
                         maxLength={100}
                         name="partnerA_lastName"
                         onChange={[Function]}
+                        required={true}
                         type="text"
                         value=""
                       />
@@ -75542,7 +75585,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   txt-f--sr"
                         id="input-2786084594"
                         maxLength={100}
                         name="partnerA_occupation"
@@ -78546,7 +78589,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f  "
+                          className="txt-f   txt-f--sr"
                           id="input-507056287"
                           maxLength={38}
                           name="partnerA_parentA_Name"
@@ -78600,7 +78643,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f  "
+                          className="txt-f   txt-f--sr"
                           id="input-4196106810"
                           maxLength={38}
                           name="partnerA_parentA_Surname"
@@ -80267,11 +80310,12 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   txt-f--sr"
                         id="input-2048906072"
                         maxLength={100}
                         name="partnerB_firstName"
                         onChange={[Function]}
+                        required={true}
                         type="text"
                         value=""
                       />
@@ -80343,14 +80387,27 @@ Array [
                         >
                           Last Name
                         </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   txt-f--sr"
                         id="input-1103291528"
                         maxLength={100}
                         name="partnerB_lastName"
                         onChange={[Function]}
+                        required={true}
                         type="text"
                         value=""
                       />
@@ -80583,7 +80640,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   txt-f--sr"
                         id="input-2786084594"
                         maxLength={100}
                         name="partnerB_occupation"
@@ -83587,7 +83644,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f  "
+                          className="txt-f   txt-f--sr"
                           id="input-507056287"
                           maxLength={38}
                           name="partnerB_parentA_Name"
@@ -83641,7 +83698,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f  "
+                          className="txt-f   txt-f--sr"
                           id="input-4196106810"
                           maxLength={38}
                           name="partnerB_parentA_Surname"
diff --git a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
index b377a049c..1b4cfa988 100644
--- a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
+++ b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
@@ -1,11 +1,37 @@
 import { ChangeEvent } from 'react';
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 
+export const handleFormPageComplete$ = (data: {
+  partnerFlag: string;
+  val: string;
+  certObj: MarriageIntentionCertificateRequest;
+}): void => {
+  // const currValue: boolean =
+  //   data.certObj.requestInformation[
+  //     `partner${data.partnerFlag}_formPageComplete`
+  //   ];
+
+  // console.log(`partnerFlag: ${data.partnerFlag}`, data.certObj.answerQuestion);
+  // console.log(
+  //   `handleFormPageComplete$ > partner${
+  //     data.partnerFlag
+  //   }_formPageComplete: ${currValue} > ${!currValue}`
+  // );
+
+  data.certObj.answerQuestion(
+    {
+      [`partner${data.partnerFlag}_formPageComplete`]: data.val,
+    },
+    ''
+  );
+};
+
 export const handleChange$ = (data: {
   e: ChangeEvent<HTMLInputElement>;
   certObj: MarriageIntentionCertificateRequest;
 }) => {
   const { e, certObj } = data;
+  console.log(`certObj: `, certObj);
   certObj.answerQuestion(
     {
       [e.target.name]: e.target.value,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index 4e7ccc23a..b48d8b56a 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -33,6 +33,7 @@ import {
   handleAdditionalParentChange$,
   handleBloodRelDescChange$,
   handleBloodRelChange$,
+  handleFormPageComplete$,
 } from './eventHandlers';
 
 interface Props {
@@ -53,8 +54,8 @@ export default class PartnerForm extends Component<Props> {
     requestInformation,
   }: MarriageIntentionCertificateRequest): boolean {
     const {
-      partnerA_firstName,
       partnerA_lastName,
+      partnerA_firstName,
       partnerA_dob,
       partnerA_age,
       partnerA_surName,
@@ -162,8 +163,8 @@ export default class PartnerForm extends Component<Props> {
     }
 
     const is_Complete = !!(
-      partnerA_firstName &&
       partnerA_lastName &&
+      partnerA_firstName &&
       partnerA_dob &&
       partnerA_age &&
       partnerA_occupation &&
@@ -454,6 +455,15 @@ export default class PartnerForm extends Component<Props> {
     return false;
   };
 
+  private advanceForm = (certObj: any) => {
+    handleFormPageComplete$({
+      partnerFlag: 'A',
+      val: '1',
+      certObj,
+    });
+    this.props.handleProceed(certObj);
+  };
+
   // RENDER ALL UI
   public render() {
     const {
@@ -493,13 +503,17 @@ export default class PartnerForm extends Component<Props> {
       partnerA_partnershipTypeDissolved,
       partnerA_marriedBefore,
       partnerA_additionalParent,
+      partnerA_formPageComplete,
     } = marriageIntentionCertificateRequest.requestInformation;
 
     const partner_num = partnerNum ? partnerNum : partnerLabel;
 
     return (
       <QuestionComponent
-        handleProceed={this.props.handleProceed}
+        handleProceed={this.advanceForm.bind(
+          this,
+          marriageIntentionCertificateRequest
+        )}
         handleStepBack={this.props.handleStepBack}
         allowProceed={PartnerForm.isComplete(
           marriageIntentionCertificateRequest
@@ -513,6 +527,7 @@ export default class PartnerForm extends Component<Props> {
         >
           {nameFields({
             partnerFlag: partnerLabel,
+            formPageComplete: partnerA_formPageComplete,
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleUseSurnameChange: this.handleUseSurnameChange,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 1488c47d8..8f67ce9b5 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -33,6 +33,7 @@ import {
   handleAdditionalParentChange$,
   handleBloodRelDescChange$,
   handleBloodRelChange$,
+  handleFormPageComplete$,
 } from './eventHandlers';
 
 interface Props {
@@ -82,6 +83,12 @@ export default class PartnerForm extends Component<Props> {
       partnerB_additionalParent,
     } = requestInformation;
 
+    console.log(
+      `partnerFormB ... `,
+      requestInformation.partnerA_formPageComplete,
+      requestInformation.partnerB_formPageComplete
+    );
+
     let bloodRelReq = true;
     let useSurnameReq = true;
     let additionalParentsReq = true;
@@ -186,6 +193,14 @@ export default class PartnerForm extends Component<Props> {
       useSurnameReq
     );
 
+    if (is_Complete) {
+      handleFormPageComplete$({
+        partnerFlag: 'A',
+        val: '1',
+        certObj: arguments[0],
+      });
+    }
+
     return is_Complete;
   }
 
@@ -493,6 +508,7 @@ export default class PartnerForm extends Component<Props> {
       partnerB_partnershipTypeDissolved,
       partnerB_marriedBefore,
       partnerB_additionalParent,
+      partnerB_formPageComplete,
     } = marriageIntentionCertificateRequest.requestInformation;
 
     const partner_num = partnerNum ? partnerNum : partnerLabel;
@@ -513,6 +529,7 @@ export default class PartnerForm extends Component<Props> {
         >
           {nameFields({
             partnerFlag: partnerLabel,
+            formPageComplete: partnerB_formPageComplete,
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleUseSurnameChange: this.handleUseSurnameChange,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index 10df4529a..dde0fe37f 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -97,6 +97,7 @@ const MEMORABLEDATEINPUT_STYLING = css(`
 
 export const nameFields = (data: {
   partnerFlag: string;
+  formPageComplete?: string | null;
   handleChange: ((e: any) => void) | undefined;
   handleResidenceStateChange: ((e: any) => void) | undefined;
   handleUseSurnameChange: ((e: any) => void) | undefined;
@@ -110,6 +111,7 @@ export const nameFields = (data: {
 }) => {
   const {
     partnerFlag,
+    formPageComplete,
     firstName,
     lastName,
     middleName,
@@ -121,7 +123,6 @@ export const nameFields = (data: {
     handleResidenceStateChange,
     handleUseSurnameChange,
   } = data;
-  // const partnerNameStr = `partner${partnerFlag}_useSurname`;
   const $CSS_SECTION_WRAPPER = css(`margin-bottom: 1.5em;`);
 
   return (
@@ -149,6 +150,12 @@ export const nameFields = (data: {
         disableLabelNoWrap={true}
         maxLength={100}
         softRequired={true}
+        required
+        error={
+          formPageComplete && formPageComplete === '1' && firstName === ''
+            ? 'Please enter your `First Name`'
+            : ''
+        }
       />
 
       <TextInput
@@ -171,6 +178,13 @@ export const nameFields = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         maxLength={100}
+        softRequired={true}
+        required
+        error={
+          formPageComplete && formPageComplete === '1' && lastName === ''
+            ? 'Please enter your `Last Name`'
+            : ''
+        }
       />
 
       <div css={RADIOGROUP_CONTAINER_STYLING}>
@@ -208,12 +222,18 @@ export const nameFields = (data: {
             disableLabelNoWrap={true}
             optionalDescription={`You can keep your current last name or use a new last name.`}
             maxLength={50}
-            softRequired={true}
             toolTip={{
               icon: '?',
               msg:
                 'Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.',
             }}
+            softRequired={true}
+            required
+            error={
+              formPageComplete && formPageComplete === '1' && surName === ''
+                ? `Please enter the 'Last Name' you'll use`
+                : ''
+            }
           />
         </div>
       )}
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index ff0d01b19..69bdb5d74 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -27,6 +27,8 @@ import ReviewForms from './forms/reviewForms';
 import ContactInfo from './forms/contactInfo';
 import Receipt from './forms/receipt';
 
+// import { handleFormPageComplete$ } from '../marriageintention/forms/eventHandlers';
+
 interface InitialProps {
   currentStep: MarriageIntentionStep;
 }
@@ -150,6 +152,7 @@ export default class IndexPage extends React.Component<Props, State> {
 
   private advanceQuestion = (
     modifiedRequest: MarriageIntentionCertificateRequest
+    // partnerFlag?: string
   ) => {
     const { currentStep, marriageIntentionCertificateRequest } = this.props;
 
@@ -178,6 +181,15 @@ export default class IndexPage extends React.Component<Props, State> {
     this.setState({
       completedSteps: new Set([...completedSteps, steps.indexOf(nextStep)]),
     });
+
+    // if (partnerFlag && partnerFlag.length > 0) {
+    //   handleFormPageComplete$({
+    //     partnerFlag,
+    //     val: true,
+    //     certObj: modifiedRequest,
+    //   });
+    // }
+
     Router.push(`/marriageintention?step=${nextStep}`);
   };
 
diff --git a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
index 77f21087c..3d4d4a1c5 100644
--- a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
+++ b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
@@ -57,6 +57,7 @@ export const INITIAL_REQUEST_INFORMATION: Readonly<
   partnerA_lastMarriageStatus: '',
   partnerA_marriedBefore: '',
   partnerA_additionalParent: '',
+  partnerA_formPageComplete: '',
 
   partnerB_fullName: '',
   partnerB_firstMiddleName: '',
@@ -94,6 +95,7 @@ export const INITIAL_REQUEST_INFORMATION: Readonly<
   partnerB_lastMarriageStatus: '',
   partnerB_marriedBefore: '',
   partnerB_additionalParent: '',
+  partnerB_formPageComplete: '',
 
   email: '',
   emailConfirm: '',
@@ -207,6 +209,8 @@ export default class MarriageIntentionCertificateRequest {
       partnerA_marriedBefore: this.requestInformation.partnerA_marriedBefore,
       partnerA_additionalParent: this.requestInformation
         .partnerA_additionalParent,
+      partnerA_formPageComplete: this.requestInformation
+        .partnerA_formPageComplete,
 
       partnerB_fullName: this.requestInformation.partnerB_fullName,
       partnerB_firstMiddleName: this.requestInformation
@@ -259,6 +263,8 @@ export default class MarriageIntentionCertificateRequest {
       partnerB_marriedBefore: this.requestInformation.partnerB_marriedBefore,
       partnerB_additionalParent: this.requestInformation
         .partnerB_additionalParent,
+      partnerB_formPageComplete: this.requestInformation
+        .partnerB_formPageComplete,
 
       email: this.requestInformation.email,
       emailConfirm: this.requestInformation.emailConfirm,
@@ -328,6 +334,8 @@ export default class MarriageIntentionCertificateRequest {
       partnerA_marriedBefore: obj.requestInformation.partnerA_marriedBefore,
       partnerA_additionalParent:
         obj.requestInformation.partnerA_additionalParent,
+      partnerA_formPageComplete:
+        obj.requestInformation.partnerA_formPageComplete,
 
       partnerB_fullName: this.requestInformation.partnerB_fullName,
       partnerB_firstMiddleName: this.requestInformation
@@ -377,6 +385,8 @@ export default class MarriageIntentionCertificateRequest {
       partnerB_marriedBefore: obj.requestInformation.partnerB_marriedBefore,
       partnerB_additionalParent:
         obj.requestInformation.partnerB_additionalParent,
+      partnerB_formPageComplete:
+        obj.requestInformation.partnerB_formPageComplete,
 
       email: obj.requestInformation.email,
       emailConfirm: obj.requestInformation.emailConfirm,
diff --git a/services-js/registry-certs/client/types.ts b/services-js/registry-certs/client/types.ts
index c20af5f46..b80cf145e 100644
--- a/services-js/registry-certs/client/types.ts
+++ b/services-js/registry-certs/client/types.ts
@@ -189,6 +189,7 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerA_lastMarriageStatus: string;
   partnerA_marriedBefore: string;
   partnerA_additionalParent: string;
+  partnerA_formPageComplete: string;
 
   partnerB_fullName: string;
   partnerB_firstMiddleName: string;
@@ -226,6 +227,7 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerB_lastMarriageStatus: string;
   partnerB_marriedBefore: string;
   partnerB_additionalParent: string;
+  partnerB_formPageComplete: string;
 
   email: string;
   emailConfirm: string;

From d56283409a80fea712a7d22a2a22a3268801a0b2 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 2 Apr 2024 23:25:23 -0400
Subject: [PATCH 11/28] DIG-4058: Text Box treatments for data entry states and
 required fields #wip2

---
 .../react-fleet/.storybook/preview-head.html  |  2 +-
 .../src/__snapshots__/Storyshots.test.ts.snap | 46 ++++++++++++-------
 .../inputs/TextInput.stories.tsx              |  5 +-
 .../src/form-elements/inputs/TextInput.tsx    | 14 ++++--
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/modules-js/react-fleet/.storybook/preview-head.html b/modules-js/react-fleet/.storybook/preview-head.html
index 650950bbe..b9507c019 100644
--- a/modules-js/react-fleet/.storybook/preview-head.html
+++ b/modules-js/react-fleet/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <!--[if !IE]><!-->
 <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
-<!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
+<!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
 <!--[if lt IE 10]>
diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 4afe0da4d..bdca407a5 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -3235,7 +3235,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       disabled={false}
       id="input-362326901"
       placeholder=""
@@ -3284,7 +3284,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  txt-f--err"
+      className="txt-f  txt-f--err "
       id="input-2348632648"
       type="text"
     />
@@ -3318,7 +3318,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  txt-f--err"
+      className="txt-f  txt-f--err "
       id="input-3077581017"
       type="text"
     />
@@ -3364,7 +3364,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       disabled={false}
       id="input-2715199497"
       placeholder=""
@@ -3401,7 +3401,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f    txt-f--focused"
       disabled={false}
       id="input-3647184142"
       placeholder=""
@@ -3450,7 +3450,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       disabled={false}
       id="input-680647510"
       placeholder=""
@@ -3484,20 +3484,32 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       >
         State - Error
       </span>
+      <span
+        aria-hidden="true"
+        className="t--req"
+        style={
+          Object {
+            "display": "flex",
+            "flexGrow": 1,
+          }
+        }
+      >
+        Required
+      </span>
     </label>
     <input
       aria-label=""
-      className="txt-f  txt-f--err"
+      className="txt-f  txt-f--err "
       disabled={false}
       id="input-2490219431"
       placeholder=""
-      required={false}
+      required={true}
       type="text"
     />
     <div
       className="t--subinfo t--err m-b100 m-t100"
     >
-       
+      Error Message ...
     </div>
   </div>
 </div>
@@ -3548,7 +3560,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       id="input-1357588218"
       required={true}
       type="text"
@@ -3583,7 +3595,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       id="input-3174958747"
       placeholder="Placeholder Text"
       type="text"
@@ -3619,7 +3631,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       </label>
       <input
         aria-label=""
-        className="txt-f  "
+        className="txt-f   "
         id="input-423803610"
         onChange={[Function]}
         type="password"
@@ -3666,7 +3678,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       id="input-5381"
       type="text"
     />
@@ -3700,7 +3712,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f txt-f--sm "
+      className="txt-f  txt-f--sm  "
       id="input-472033325"
       placeholder="Placeholder Text"
       type="text"
@@ -3833,7 +3845,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f    txt-f--sr"
       disabled={false}
       id="input-362326901"
       placeholder=""
@@ -3854,7 +3866,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </div>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f    txt-f--sr"
       disabled={false}
       id="input-362326901"
       placeholder=""
@@ -3957,7 +3969,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       disabled={false}
       id="input-362326901"
       placeholder=""
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
index e9aa364b6..f7d459e08 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.stories.tsx
@@ -144,6 +144,7 @@ storiesOf('Form Elements|Inputs/TextInput', module)
           required={boolean('Required', false)}
           disabled={boolean('Disabled', false)}
           error={boolean('Error', false)}
+          focused={true}
         />
 
         <TextInput
@@ -159,9 +160,9 @@ storiesOf('Form Elements|Inputs/TextInput', module)
           label={text('Label text', 'State - Error')}
           placeholder={text('Placeholder text', '')}
           small={boolean('Small variant', false)}
-          required={boolean('Required', false)}
+          required={boolean('Required', true)}
           disabled={boolean('Disabled', false)}
-          error={boolean('Error', true)}
+          error={`Error Message ...`}
         />
       </>
     );
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 5b4a6e01c..455cee9fb 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -41,12 +41,14 @@ type Props = {
   optionalDescription?: string;
 
   required?: boolean;
-  softRequired?: boolean;
-  toolTip?: { icon: string; msg: string };
   inputMode?: string;
   maxLength?: number;
   minLength?: number;
 
+  softRequired?: boolean;
+  toolTip?: { icon: string; msg: string };
+  focused?: boolean;
+
   value?: string;
   disabled?: boolean;
   error?: string | boolean;
@@ -68,15 +70,17 @@ type Props = {
 import { ToolTip } from '../ToolTip';
 
 export default function TextInput(props: Props): JSX.Element {
-  const { toolTip } = props;
+  const { toolTip, focused } = props;
 
   const id = props.id || `input-${hash(props.label)}`;
 
   const classNames = {
     label: `txt-l ${props.small ? 'txt-l--sm' : ''}`,
-    input: `txt-f ${props.small ? 'txt-f--sm' : ''} ${
+    input: `txt-f ${props.small ? ' txt-f--sm' : ''} ${
       props.error ? 'txt-f--err' : ''
-    }${props.softRequired ? ' txt-f--sr' : ''}`,
+    } ${focused ? ' txt-f--focused' : ''}${
+      props.softRequired ? ' txt-f--sr' : ''
+    }`,
   };
 
   const labelText = (label): React.ReactChild => {

From eb900558abb149b33213f62136a7212287f1ac91 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 2 Apr 2024 23:31:43 -0400
Subject: [PATCH 12/28] DIG-4058: Text Box treatments for data entry states and
 required fields #wip3

---
 .../.storybook/preview-head.html              |  3 +-
 .../.storybook/preview-head.html              |  1 +
 .../__snapshots__/Storyshots.test.ts.snap     |  8 ------
 .../marriageintention/forms/partnerFormB.tsx  | 28 +++++++++----------
 .../marriageintention/forms/partnerFormUI.tsx |  2 --
 5 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/modules-js/storybook-common/.storybook/preview-head.html b/modules-js/storybook-common/.storybook/preview-head.html
index d11efa806..6c5f4f890 100644
--- a/modules-js/storybook-common/.storybook/preview-head.html
+++ b/modules-js/storybook-common/.storybook/preview-head.html
@@ -1,6 +1,7 @@
 <!--[if !IE]><!-->
+  <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
 <!-- <link rel="stylesheet" type="text/css" href="https://cob-patterns-staging.herokuapp.com/css/public.css" /> -->
-<link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+<!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
 <!--[if lt IE 10]>
diff --git a/services-js/registry-certs/.storybook/preview-head.html b/services-js/registry-certs/.storybook/preview-head.html
index a5759e565..fb3a8fcd7 100644
--- a/services-js/registry-certs/.storybook/preview-head.html
+++ b/services-js/registry-certs/.storybook/preview-head.html
@@ -4,5 +4,6 @@
   prod, where this tag is written by _document.tsx.
 -->
 <link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" />
+<!-- <link href="http://localhost:3030/css/public.css" type="text/css" rel="stylesheet" /> -->
 
 <script src="https://js.stripe.com/v3/"></script>
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 24e2d29f7..54cd7fca2 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -70692,7 +70692,6 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       maxLength={100}
       name="partner1_firstName"
       onChange={[Function]}
-      required={true}
       type="text"
       value="Peter"
     />
@@ -70784,7 +70783,6 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       maxLength={100}
       name="partner1_lastName"
       onChange={[Function]}
-      required={true}
       type="text"
       value="Pan"
     />
@@ -71424,7 +71422,6 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       maxLength={100}
       name="partner1_firstName"
       onChange={[Function]}
-      required={true}
       type="text"
       value="Peter"
     />
@@ -71516,7 +71513,6 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       maxLength={100}
       name="partner1_lastName"
       onChange={[Function]}
-      required={true}
       type="text"
       value="Pan"
     />
@@ -75260,7 +75256,6 @@ Array [
                         maxLength={100}
                         name="partnerA_firstName"
                         onChange={[Function]}
-                        required={true}
                         type="text"
                         value=""
                       />
@@ -75352,7 +75347,6 @@ Array [
                         maxLength={100}
                         name="partnerA_lastName"
                         onChange={[Function]}
-                        required={true}
                         type="text"
                         value=""
                       />
@@ -80315,7 +80309,6 @@ Array [
                         maxLength={100}
                         name="partnerB_firstName"
                         onChange={[Function]}
-                        required={true}
                         type="text"
                         value=""
                       />
@@ -80407,7 +80400,6 @@ Array [
                         maxLength={100}
                         name="partnerB_lastName"
                         onChange={[Function]}
-                        required={true}
                         type="text"
                         value=""
                       />
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 8f67ce9b5..e55ed7342 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -83,12 +83,6 @@ export default class PartnerForm extends Component<Props> {
       partnerB_additionalParent,
     } = requestInformation;
 
-    console.log(
-      `partnerFormB ... `,
-      requestInformation.partnerA_formPageComplete,
-      requestInformation.partnerB_formPageComplete
-    );
-
     let bloodRelReq = true;
     let useSurnameReq = true;
     let additionalParentsReq = true;
@@ -193,14 +187,6 @@ export default class PartnerForm extends Component<Props> {
       useSurnameReq
     );
 
-    if (is_Complete) {
-      handleFormPageComplete$({
-        partnerFlag: 'A',
-        val: '1',
-        certObj: arguments[0],
-      });
-    }
-
     return is_Complete;
   }
 
@@ -469,6 +455,15 @@ export default class PartnerForm extends Component<Props> {
     return false;
   };
 
+  private advanceForm = (certObj: any) => {
+    handleFormPageComplete$({
+      partnerFlag: 'B',
+      val: '1',
+      certObj,
+    });
+    this.props.handleProceed(certObj);
+  };
+
   // RENDER ALL UI
   public render() {
     const {
@@ -515,7 +510,10 @@ export default class PartnerForm extends Component<Props> {
 
     return (
       <QuestionComponent
-        handleProceed={this.props.handleProceed}
+        handleProceed={this.advanceForm.bind(
+          this,
+          marriageIntentionCertificateRequest
+        )}
         handleStepBack={this.props.handleStepBack}
         allowProceed={PartnerForm.isComplete(
           marriageIntentionCertificateRequest
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index dde0fe37f..2af30b505 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -150,7 +150,6 @@ export const nameFields = (data: {
         disableLabelNoWrap={true}
         maxLength={100}
         softRequired={true}
-        required
         error={
           formPageComplete && formPageComplete === '1' && firstName === ''
             ? 'Please enter your `First Name`'
@@ -179,7 +178,6 @@ export const nameFields = (data: {
         disableLabelNoWrap={true}
         maxLength={100}
         softRequired={true}
-        required
         error={
           formPageComplete && formPageComplete === '1' && lastName === ''
             ? 'Please enter your `Last Name`'

From 58b2292481ead2070818b1abb16ec11a5bfc5145 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Wed, 3 Apr 2024 18:02:33 -0400
Subject: [PATCH 13/28] DIG-4058: Text Box treatments for data entry states and
 required fields #wip4

---
 .../react-fleet/.storybook/preview-head.html  |   3 +-
 .../src/__snapshots__/Storyshots.test.ts.snap |   4 +-
 .../src/form-elements/inputs/TextInput.tsx    |   7 +-
 .../react-fleet/src/utilities/constants.ts    |   3 +-
 .../react-fleet/templates/stylesheets.json    |   2 +-
 .../.storybook/preview-head.html              |   6 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 156 ++--
 .../.storybook/preview-head.html              |   3 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 736 +++++++++---------
 .../marriageintention/forms/eventHandlers.ts  |  14 +-
 .../marriageintention/forms/partnerFormA.tsx  |   6 +-
 .../marriageintention/forms/partnerFormB.tsx  |   6 +-
 .../marriageintention/forms/partnerFormUI.tsx | 122 ++-
 .../registry-certs/templates/stylesheets.json |   2 +-
 14 files changed, 587 insertions(+), 483 deletions(-)

diff --git a/modules-js/react-fleet/.storybook/preview-head.html b/modules-js/react-fleet/.storybook/preview-head.html
index b9507c019..0874e3cba 100644
--- a/modules-js/react-fleet/.storybook/preview-head.html
+++ b/modules-js/react-fleet/.storybook/preview-head.html
@@ -1,5 +1,6 @@
 <!--[if !IE]><!-->
-<link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+<!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
+<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index bdca407a5..c5b71e209 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -3845,7 +3845,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </label>
     <input
       aria-label=""
-      className="txt-f    txt-f--sr"
+      className="txt-f   "
       disabled={false}
       id="input-362326901"
       placeholder=""
@@ -3866,7 +3866,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
     </div>
     <input
       aria-label=""
-      className="txt-f    txt-f--sr"
+      className="txt-f   "
       disabled={false}
       id="input-362326901"
       placeholder=""
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 455cee9fb..442cea25a 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -79,7 +79,12 @@ export default function TextInput(props: Props): JSX.Element {
     input: `txt-f ${props.small ? ' txt-f--sm' : ''} ${
       props.error ? 'txt-f--err' : ''
     } ${focused ? ' txt-f--focused' : ''}${
-      props.softRequired ? ' txt-f--sr' : ''
+      props.softRequired &&
+      props.error &&
+      typeof props.error === 'string' &&
+      props.error.length > 0
+        ? ' txt-f--sr'
+        : ''
     }`,
   };
 
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index 6a844d651..953986205 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -1,5 +1,6 @@
-export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
+// export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
 // export const PUBLIC_CSS_URL = 'http://localhost:3030/css/public.css';
+export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
 export const WHITE = '#fff';
 export const BLACK = '#000';
 export const YELLOW = '#fcb61a';
diff --git a/modules-js/react-fleet/templates/stylesheets.json b/modules-js/react-fleet/templates/stylesheets.json
index 4e5700798..302e7e0b7 100644
--- a/modules-js/react-fleet/templates/stylesheets.json
+++ b/modules-js/react-fleet/templates/stylesheets.json
@@ -1,3 +1,3 @@
 [
-  "https://patterns.boston.gov/css/public.css"
+  "https://patterns-stg.boston.gov/css/public.css"
 ]
\ No newline at end of file
diff --git a/modules-js/storybook-common/.storybook/preview-head.html b/modules-js/storybook-common/.storybook/preview-head.html
index 6c5f4f890..15c3c8046 100644
--- a/modules-js/storybook-common/.storybook/preview-head.html
+++ b/modules-js/storybook-common/.storybook/preview-head.html
@@ -1,10 +1,10 @@
 <!--[if !IE]><!-->
-  <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+  <!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="https://cob-patterns-staging.herokuapp.com/css/public.css" /> -->
+<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
 <!--[if lt IE 10]>
   <link media="all" rel="stylesheet" href="https://patterns.boston.gov/css/ie.css">
-<![endif]-->
-  
\ No newline at end of file
+<![endif]-->
\ No newline at end of file
diff --git a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
index b41fa9970..b7949a8eb 100644
--- a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -82,7 +82,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -123,7 +123,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -175,7 +175,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -232,7 +232,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -273,7 +273,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -329,7 +329,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -385,7 +385,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -438,7 +438,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -481,7 +481,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -533,7 +533,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -586,7 +586,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -645,7 +645,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -685,7 +685,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -1148,7 +1148,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm txt-f--err"
+              className="txt-f  txt-f--sm txt-f--err "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -1189,7 +1189,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -1241,7 +1241,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm txt-f--err"
+            className="txt-f  txt-f--sm txt-f--err "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -1298,7 +1298,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -1339,7 +1339,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -1395,7 +1395,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -1451,7 +1451,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -1504,7 +1504,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -1547,7 +1547,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -1599,7 +1599,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -1652,7 +1652,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -1711,7 +1711,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -1751,7 +1751,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -2214,7 +2214,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -2255,7 +2255,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -2307,7 +2307,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -2364,7 +2364,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -2405,7 +2405,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -2461,7 +2461,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -2517,7 +2517,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -2570,7 +2570,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -2613,7 +2613,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -2665,7 +2665,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -2718,7 +2718,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -2777,7 +2777,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -2817,7 +2817,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -3315,7 +3315,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -3356,7 +3356,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -3408,7 +3408,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -3465,7 +3465,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -3506,7 +3506,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -3562,7 +3562,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -3618,7 +3618,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -3671,7 +3671,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -3714,7 +3714,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -3766,7 +3766,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -3819,7 +3819,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -3878,7 +3878,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -3918,7 +3918,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -4422,7 +4422,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -4463,7 +4463,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -4515,7 +4515,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -4572,7 +4572,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -4613,7 +4613,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -4669,7 +4669,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f txt-f--sm "
+            className="txt-f  txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -4725,7 +4725,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -4778,7 +4778,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f txt-f--sm "
+              className="txt-f  txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -4821,7 +4821,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -4873,7 +4873,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -4926,7 +4926,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -4985,7 +4985,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -5025,7 +5025,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f txt-f--sm "
+          className="txt-f  txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -5665,7 +5665,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f txt-f--sm "
+                        className="txt-f  txt-f--sm  "
                         id="ApplicationForm-firstName"
                         maxLength={25}
                         name="firstName"
@@ -5706,7 +5706,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f txt-f--sm "
+                        className="txt-f  txt-f--sm  "
                         id="ApplicationForm-middleName"
                         maxLength={50}
                         name="middleName"
@@ -5758,7 +5758,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f txt-f--sm "
+                      className="txt-f  txt-f--sm  "
                       id="ApplicationForm-lastName"
                       maxLength={50}
                       name="lastName"
@@ -5815,7 +5815,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f txt-f--sm "
+                      className="txt-f  txt-f--sm  "
                       id="ApplicationForm-streetAddress"
                       maxLength={50}
                       name="streetAddress"
@@ -5856,7 +5856,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f txt-f--sm "
+                      className="txt-f  txt-f--sm  "
                       id="ApplicationForm-unit"
                       maxLength={50}
                       name="unit"
@@ -5912,7 +5912,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f txt-f--sm "
+                      className="txt-f  txt-f--sm  "
                       id="ApplicationForm-city"
                       maxLength={50}
                       name="city"
@@ -5968,7 +5968,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f txt-f--sm "
+                        className="txt-f  txt-f--sm  "
                         id="ApplicationForm-state"
                         maxLength={50}
                         name="state"
@@ -6021,7 +6021,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f txt-f--sm "
+                        className="txt-f  txt-f--sm  "
                         id="ApplicationForm-zip"
                         maxLength={5}
                         name="zip"
@@ -6064,7 +6064,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f txt-f--sm "
+                    className="txt-f  txt-f--sm  "
                     id="ApplicationForm-phone"
                     maxLength={50}
                     name="phone"
@@ -6116,7 +6116,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f txt-f--sm "
+                    className="txt-f  txt-f--sm  "
                     id="ApplicationForm-email"
                     maxLength={50}
                     name="email"
@@ -6169,7 +6169,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f txt-f--sm "
+                    className="txt-f  txt-f--sm  "
                     id="ApplicationForm-confirmEmail"
                     maxLength={50}
                     name="confirmEmail"
@@ -6228,7 +6228,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f txt-f--sm "
+                    className="txt-f  txt-f--sm  "
                     id="ApplicationForm-degreeAttained"
                     maxLength={100}
                     name="degreeAttained"
@@ -6268,7 +6268,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f txt-f--sm "
+                    className="txt-f  txt-f--sm  "
                     id="ApplicationForm-educationalInstitution"
                     maxLength={100}
                     name="educationalInstitution"
diff --git a/services-js/registry-certs/.storybook/preview-head.html b/services-js/registry-certs/.storybook/preview-head.html
index fb3a8fcd7..2f5207070 100644
--- a/services-js/registry-certs/.storybook/preview-head.html
+++ b/services-js/registry-certs/.storybook/preview-head.html
@@ -3,7 +3,8 @@
   That way Emotion can override the default styles. This matches the behavior in
   prod, where this tag is written by _document.tsx.
 -->
-<link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" />
+<!-- <link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" /> -->
+<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link href="http://localhost:3030/css/public.css" type="text/css" rel="stylesheet" /> -->
 
 <script src="https://js.stripe.com/v3/"></script>
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 54cd7fca2..771cfa9ed 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -7955,7 +7955,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-2048906072"
               name="parent1FirstName"
               onChange={[Function]}
@@ -8001,7 +8001,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-5381"
               name="parent1LastName"
               onChange={[Function]}
@@ -8053,7 +8053,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-2048906072"
               name="parent2FirstName"
               onChange={[Function]}
@@ -8099,7 +8099,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-5381"
               name="parent2LastName"
               onChange={[Function]}
@@ -8680,7 +8680,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-2048906072"
               name="parent1FirstName"
               onChange={[Function]}
@@ -8726,7 +8726,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-5381"
               name="parent1LastName"
               onChange={[Function]}
@@ -8778,7 +8778,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-2048906072"
               name="parent2FirstName"
               onChange={[Function]}
@@ -8824,7 +8824,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-5381"
               name="parent2LastName"
               onChange={[Function]}
@@ -9433,7 +9433,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-2048906072"
               name="parent1FirstName"
               onChange={[Function]}
@@ -9479,7 +9479,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-5381"
               name="parent1LastName"
               onChange={[Function]}
@@ -9531,7 +9531,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-2048906072"
               name="parent2FirstName"
               onChange={[Function]}
@@ -9577,7 +9577,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
             </label>
             <input
               aria-label=""
-              className="txt-f  "
+              className="txt-f   "
               id="input-5381"
               name="parent2LastName"
               onChange={[Function]}
@@ -10054,7 +10054,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
           </label>
           <input
             aria-label=""
-            className="txt-f  "
+            className="txt-f   "
             id="input-2048906072"
             name="firstName"
             onChange={[Function]}
@@ -10091,7 +10091,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
           </label>
           <input
             aria-label=""
-            className="txt-f  "
+            className="txt-f   "
             id="input-1103291528"
             name="lastName"
             onChange={[Function]}
@@ -10132,7 +10132,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
           </label>
           <input
             aria-label=""
-            className="txt-f  "
+            className="txt-f   "
             id="input-2099238988"
             name="altSpelling"
             onChange={[Function]}
@@ -10611,7 +10611,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
           </label>
           <input
             aria-label=""
-            className="txt-f  "
+            className="txt-f   "
             id="input-2048906072"
             name="firstName"
             onChange={[Function]}
@@ -10648,7 +10648,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
           </label>
           <input
             aria-label=""
-            className="txt-f  "
+            className="txt-f   "
             id="input-1103291528"
             name="lastName"
             onChange={[Function]}
@@ -10689,7 +10689,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
           </label>
           <input
             aria-label=""
-            className="txt-f  "
+            className="txt-f   "
             id="input-2099238988"
             name="altSpelling"
             onChange={[Function]}
@@ -14219,7 +14219,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  "
+                      className="txt-f   "
                       id="input-2048906072"
                       name="firstName"
                       onChange={[Function]}
@@ -14256,7 +14256,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  "
+                      className="txt-f   "
                       id="input-1103291528"
                       name="lastName"
                       onChange={[Function]}
@@ -14297,7 +14297,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  "
+                      className="txt-f   "
                       id="input-2099238988"
                       name="altSpelling"
                       onChange={[Function]}
@@ -15258,7 +15258,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   "
                         id="input-2048906072"
                         name="parent1FirstName"
                         onChange={[Function]}
@@ -15304,7 +15304,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   "
                         id="input-5381"
                         name="parent1LastName"
                         onChange={[Function]}
@@ -15356,7 +15356,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   "
                         id="input-2048906072"
                         name="parent2FirstName"
                         onChange={[Function]}
@@ -15402,7 +15402,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   "
                         id="input-5381"
                         name="parent2LastName"
                         onChange={[Function]}
@@ -65831,7 +65831,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
       </label>
       <input
         aria-label=""
-        className="txt-f   txt-f--sr"
+        className="txt-f   "
         id="input-1547104625"
         maxLength={100}
         name="partnerA_birthCity"
@@ -67871,7 +67871,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
       </label>
       <input
         aria-label=""
-        className="txt-f   txt-f--sr"
+        className="txt-f   "
         id="input-1547104625"
         maxLength={100}
         name="partnerA_birthCity"
@@ -70331,10 +70331,22 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, D
           >
             Partnership State/Country
           </span>
+          <span
+            aria-hidden="true"
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
+                "flexGrow": 1,
+              }
+            }
+          >
+            Required
+          </span>
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-234553913"
           maxLength={100}
           name="partnerA_partnershipState"
@@ -70687,7 +70699,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f   "
       id="input-2048906072"
       maxLength={100}
       name="partner1_firstName"
@@ -70729,7 +70741,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       id="input-2852212527"
       maxLength={50}
       name="partner1_middleName"
@@ -70778,7 +70790,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f   "
       id="input-1103291528"
       maxLength={100}
       name="partner1_lastName"
@@ -71017,7 +71029,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f   "
       id="input-2786084594"
       maxLength={100}
       name="partner1_occupation"
@@ -71417,7 +71429,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f   "
       id="input-2048906072"
       maxLength={100}
       name="partner1_firstName"
@@ -71459,7 +71471,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f  "
+      className="txt-f   "
       id="input-2852212527"
       maxLength={50}
       name="partner1_middleName"
@@ -71508,7 +71520,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f   "
       id="input-1103291528"
       maxLength={100}
       name="partner1_lastName"
@@ -71659,7 +71671,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
       </label>
       <input
         aria-label=""
-        className="txt-f   txt-f--sr"
+        className="txt-f   "
         id="input-546901997"
         maxLength={50}
         name="partner1_surName"
@@ -71818,7 +71830,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
     </label>
     <input
       aria-label=""
-      className="txt-f   txt-f--sr"
+      className="txt-f   "
       id="input-2786084594"
       maxLength={100}
       name="partner1_occupation"
@@ -73401,315 +73413,313 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </div>
       </div>
     </div>
-    <div>
-      <div
-        className="emotion-3"
-      >
-        <div>
-          <label
-            className="txt-l "
-            htmlFor="select-496160159"
+    <div
+      className="emotion-3"
+    >
+      <div>
+        <label
+          className="txt-l "
+          htmlFor="select-496160159"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          <span
             style={
               Object {
                 "display": "flex",
+                "marginRight": "0.5em",
+                "whiteSpace": "nowrap",
               }
             }
           >
-            <span
-              style={
-                Object {
-                  "display": "flex",
-                  "marginRight": "0.5em",
-                  "whiteSpace": "nowrap",
-                }
+            State of Residence
+          </span>
+          <span
+            className="t--req"
+            style={
+              Object {
+                "display": "flex",
               }
+            }
+          >
+            Required
+          </span>
+        </label>
+        <div
+          className="sel-c  "
+        >
+          <select
+            aria-label=""
+            className="sel-f  "
+            id="select-496160159"
+            name="partnerA_residenceState"
+            onChange={[Function]}
+            value="MA"
+          >
+            <option
+              value=""
             >
-              State of Residence
-            </span>
-            <span
-              className="t--req"
-              style={
-                Object {
-                  "display": "flex",
-                }
-              }
+              --
+            </option>
+            <option
+              value="AL"
             >
-              Required
-            </span>
-          </label>
-          <div
-            className="sel-c  "
-          >
-            <select
-              aria-label=""
-              className="sel-f  "
-              id="select-496160159"
-              name="partnerA_residenceState"
-              onChange={[Function]}
+              AL
+            </option>
+            <option
+              value="AK"
+            >
+              AK
+            </option>
+            <option
+              value="AZ"
+            >
+              AZ
+            </option>
+            <option
+              value="AR"
+            >
+              AR
+            </option>
+            <option
+              value="CA"
+            >
+              CA
+            </option>
+            <option
+              value="CO"
+            >
+              CO
+            </option>
+            <option
+              value="CT"
+            >
+              CT
+            </option>
+            <option
+              value="DE"
+            >
+              DE
+            </option>
+            <option
+              value="DC"
+            >
+              DC
+            </option>
+            <option
+              value="FL"
+            >
+              FL
+            </option>
+            <option
+              value="GA"
+            >
+              GA
+            </option>
+            <option
+              value="HI"
+            >
+              HI
+            </option>
+            <option
+              value="ID"
+            >
+              ID
+            </option>
+            <option
+              value="IL"
+            >
+              IL
+            </option>
+            <option
+              value="IN"
+            >
+              IN
+            </option>
+            <option
+              value="IA"
+            >
+              IA
+            </option>
+            <option
+              value="KS"
+            >
+              KS
+            </option>
+            <option
+              value="KY"
+            >
+              KY
+            </option>
+            <option
+              value="LA"
+            >
+              LA
+            </option>
+            <option
+              value="ME"
+            >
+              ME
+            </option>
+            <option
+              value="MD"
+            >
+              MD
+            </option>
+            <option
               value="MA"
             >
-              <option
-                value=""
-              >
-                --
-              </option>
-              <option
-                value="AL"
-              >
-                AL
-              </option>
-              <option
-                value="AK"
-              >
-                AK
-              </option>
-              <option
-                value="AZ"
-              >
-                AZ
-              </option>
-              <option
-                value="AR"
-              >
-                AR
-              </option>
-              <option
-                value="CA"
-              >
-                CA
-              </option>
-              <option
-                value="CO"
-              >
-                CO
-              </option>
-              <option
-                value="CT"
-              >
-                CT
-              </option>
-              <option
-                value="DE"
-              >
-                DE
-              </option>
-              <option
-                value="DC"
-              >
-                DC
-              </option>
-              <option
-                value="FL"
-              >
-                FL
-              </option>
-              <option
-                value="GA"
-              >
-                GA
-              </option>
-              <option
-                value="HI"
-              >
-                HI
-              </option>
-              <option
-                value="ID"
-              >
-                ID
-              </option>
-              <option
-                value="IL"
-              >
-                IL
-              </option>
-              <option
-                value="IN"
-              >
-                IN
-              </option>
-              <option
-                value="IA"
-              >
-                IA
-              </option>
-              <option
-                value="KS"
-              >
-                KS
-              </option>
-              <option
-                value="KY"
-              >
-                KY
-              </option>
-              <option
-                value="LA"
-              >
-                LA
-              </option>
-              <option
-                value="ME"
-              >
-                ME
-              </option>
-              <option
-                value="MD"
-              >
-                MD
-              </option>
-              <option
-                value="MA"
-              >
-                MA
-              </option>
-              <option
-                value="MI"
-              >
-                MI
-              </option>
-              <option
-                value="MN"
-              >
-                MN
-              </option>
-              <option
-                value="MS"
-              >
-                MS
-              </option>
-              <option
-                value="MO"
-              >
-                MO
-              </option>
-              <option
-                value="MT"
-              >
-                MT
-              </option>
-              <option
-                value="NE"
-              >
-                NE
-              </option>
-              <option
-                value="NV"
-              >
-                NV
-              </option>
-              <option
-                value="NH"
-              >
-                NH
-              </option>
-              <option
-                value="NJ"
-              >
-                NJ
-              </option>
-              <option
-                value="NM"
-              >
-                NM
-              </option>
-              <option
-                value="NY"
-              >
-                NY
-              </option>
-              <option
-                value="NC"
-              >
-                NC
-              </option>
-              <option
-                value="ND"
-              >
-                ND
-              </option>
-              <option
-                value="OH"
-              >
-                OH
-              </option>
-              <option
-                value="OK"
-              >
-                OK
-              </option>
-              <option
-                value="OR"
-              >
-                OR
-              </option>
-              <option
-                value="PA"
-              >
-                PA
-              </option>
-              <option
-                value="RI"
-              >
-                RI
-              </option>
-              <option
-                value="SC"
-              >
-                SC
-              </option>
-              <option
-                value="SD"
-              >
-                SD
-              </option>
-              <option
-                value="TN"
-              >
-                TN
-              </option>
-              <option
-                value="TX"
-              >
-                TX
-              </option>
-              <option
-                value="UT"
-              >
-                UT
-              </option>
-              <option
-                value="VT"
-              >
-                VT
-              </option>
-              <option
-                value="VA"
-              >
-                VA
-              </option>
-              <option
-                value="WA"
-              >
-                WA
-              </option>
-              <option
-                value="WV"
-              >
-                WV
-              </option>
-              <option
-                value="WI"
-              >
-                WI
-              </option>
-              <option
-                value="WY"
-              >
-                WY
-              </option>
-            </select>
-          </div>
+              MA
+            </option>
+            <option
+              value="MI"
+            >
+              MI
+            </option>
+            <option
+              value="MN"
+            >
+              MN
+            </option>
+            <option
+              value="MS"
+            >
+              MS
+            </option>
+            <option
+              value="MO"
+            >
+              MO
+            </option>
+            <option
+              value="MT"
+            >
+              MT
+            </option>
+            <option
+              value="NE"
+            >
+              NE
+            </option>
+            <option
+              value="NV"
+            >
+              NV
+            </option>
+            <option
+              value="NH"
+            >
+              NH
+            </option>
+            <option
+              value="NJ"
+            >
+              NJ
+            </option>
+            <option
+              value="NM"
+            >
+              NM
+            </option>
+            <option
+              value="NY"
+            >
+              NY
+            </option>
+            <option
+              value="NC"
+            >
+              NC
+            </option>
+            <option
+              value="ND"
+            >
+              ND
+            </option>
+            <option
+              value="OH"
+            >
+              OH
+            </option>
+            <option
+              value="OK"
+            >
+              OK
+            </option>
+            <option
+              value="OR"
+            >
+              OR
+            </option>
+            <option
+              value="PA"
+            >
+              PA
+            </option>
+            <option
+              value="RI"
+            >
+              RI
+            </option>
+            <option
+              value="SC"
+            >
+              SC
+            </option>
+            <option
+              value="SD"
+            >
+              SD
+            </option>
+            <option
+              value="TN"
+            >
+              TN
+            </option>
+            <option
+              value="TX"
+            >
+              TX
+            </option>
+            <option
+              value="UT"
+            >
+              UT
+            </option>
+            <option
+              value="VT"
+            >
+              VT
+            </option>
+            <option
+              value="VA"
+            >
+              VA
+            </option>
+            <option
+              value="WA"
+            >
+              WA
+            </option>
+            <option
+              value="WV"
+            >
+              WV
+            </option>
+            <option
+              value="WI"
+            >
+              WI
+            </option>
+            <option
+              value="WY"
+            >
+              WY
+            </option>
+          </select>
         </div>
       </div>
     </div>
@@ -73754,7 +73764,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </label>
         <input
           aria-label=""
-          className="txt-f   txt-f--sr"
+          className="txt-f   "
           id="input-2580217931"
           maxLength={100}
           name="partnerA_residenceCity"
@@ -73809,7 +73819,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </label>
         <input
           aria-label=""
-          className="txt-f   txt-f--sr"
+          className="txt-f   "
           id="input-770365431"
           maxLength={100}
           name="partnerA_residenceAddress"
@@ -73860,7 +73870,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
         </label>
         <input
           aria-label=""
-          className="txt-f   txt-f--sr"
+          className="txt-f   "
           id="input-2413436367"
           maxLength={10}
           minLength={5}
@@ -75251,7 +75261,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f   txt-f--sr"
+                        className="txt-f   "
                         id="input-2048906072"
                         maxLength={100}
                         name="partnerA_firstName"
@@ -75293,7 +75303,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   "
                         id="input-2852212527"
                         maxLength={50}
                         name="partnerA_middleName"
@@ -75342,7 +75352,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f   txt-f--sr"
+                        className="txt-f   "
                         id="input-1103291528"
                         maxLength={100}
                         name="partnerA_lastName"
@@ -75579,7 +75589,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f   txt-f--sr"
+                        className="txt-f   "
                         id="input-2786084594"
                         maxLength={100}
                         name="partnerA_occupation"
@@ -78583,7 +78593,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f   txt-f--sr"
+                          className="txt-f   "
                           id="input-507056287"
                           maxLength={38}
                           name="partnerA_parentA_Name"
@@ -78637,7 +78647,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f   txt-f--sr"
+                          className="txt-f   "
                           id="input-4196106810"
                           maxLength={38}
                           name="partnerA_parentA_Surname"
@@ -80304,7 +80314,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f   txt-f--sr"
+                        className="txt-f   "
                         id="input-2048906072"
                         maxLength={100}
                         name="partnerB_firstName"
@@ -80346,7 +80356,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  "
+                        className="txt-f   "
                         id="input-2852212527"
                         maxLength={50}
                         name="partnerB_middleName"
@@ -80395,7 +80405,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f   txt-f--sr"
+                        className="txt-f   "
                         id="input-1103291528"
                         maxLength={100}
                         name="partnerB_lastName"
@@ -80632,7 +80642,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f   txt-f--sr"
+                        className="txt-f   "
                         id="input-2786084594"
                         maxLength={100}
                         name="partnerB_occupation"
@@ -83636,7 +83646,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f   txt-f--sr"
+                          className="txt-f   "
                           id="input-507056287"
                           maxLength={38}
                           name="partnerB_parentA_Name"
@@ -83690,7 +83700,7 @@ Array [
                         </label>
                         <input
                           aria-label=""
-                          className="txt-f   txt-f--sr"
+                          className="txt-f   "
                           id="input-4196106810"
                           maxLength={38}
                           name="partnerB_parentA_Surname"
@@ -84900,7 +84910,7 @@ Array [
                           </label>
                           <input
                             aria-label=""
-                            className="txt-f  "
+                            className="txt-f   "
                             id="input-2778663327"
                             name="email"
                             onChange={[Function]}
@@ -84952,7 +84962,7 @@ Array [
                           </label>
                           <input
                             aria-label=""
-                            className="txt-f  "
+                            className="txt-f   "
                             id="input-1813726221"
                             name="emailConfirm"
                             onChange={[Function]}
@@ -85009,7 +85019,7 @@ Array [
                           </label>
                           <input
                             aria-label=""
-                            className="txt-f  "
+                            className="txt-f   "
                             id="input-1267882554"
                             maxLength={14}
                             minLength={10}
@@ -99179,7 +99189,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-1103008209"
           name="fullName1"
           onChange={[Function]}
@@ -99217,7 +99227,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-5381"
           name="maidenName1"
           onChange={[Function]}
@@ -99857,7 +99867,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-1103008209"
           name="fullName2"
           onChange={[Function]}
@@ -99895,7 +99905,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-5381"
           name="maidenName2"
           onChange={[Function]}
@@ -100535,7 +100545,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-1103008209"
           name="fullName1"
           onChange={[Function]}
@@ -100573,7 +100583,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  "
+          className="txt-f   "
           id="input-5381"
           name="maidenName1"
           onChange={[Function]}
@@ -105105,7 +105115,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  "
+                    className="txt-f   "
                     id="input-1103008209"
                     name="fullName1"
                     onChange={[Function]}
@@ -105143,7 +105153,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  "
+                    className="txt-f   "
                     id="input-5381"
                     name="maidenName1"
                     onChange={[Function]}
@@ -106164,7 +106174,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  "
+                    className="txt-f   "
                     id="input-1103008209"
                     name="fullName2"
                     onChange={[Function]}
@@ -106202,7 +106212,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  "
+                    className="txt-f   "
                     id="input-5381"
                     name="maidenName2"
                     onChange={[Function]}
diff --git a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
index 1b4cfa988..82dce9cda 100644
--- a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
+++ b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
@@ -6,18 +6,6 @@ export const handleFormPageComplete$ = (data: {
   val: string;
   certObj: MarriageIntentionCertificateRequest;
 }): void => {
-  // const currValue: boolean =
-  //   data.certObj.requestInformation[
-  //     `partner${data.partnerFlag}_formPageComplete`
-  //   ];
-
-  // console.log(`partnerFlag: ${data.partnerFlag}`, data.certObj.answerQuestion);
-  // console.log(
-  //   `handleFormPageComplete$ > partner${
-  //     data.partnerFlag
-  //   }_formPageComplete: ${currValue} > ${!currValue}`
-  // );
-
   data.certObj.answerQuestion(
     {
       [`partner${data.partnerFlag}_formPageComplete`]: data.val,
@@ -31,7 +19,7 @@ export const handleChange$ = (data: {
   certObj: MarriageIntentionCertificateRequest;
 }) => {
   const { e, certObj } = data;
-  console.log(`certObj: `, certObj);
+
   certObj.answerQuestion(
     {
       [e.target.name]: e.target.value,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index b48d8b56a..e0cdcc087 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -526,8 +526,8 @@ export default class PartnerForm extends Component<Props> {
           }
         >
           {nameFields({
-            partnerFlag: partnerLabel,
             formPageComplete: partnerA_formPageComplete,
+            partnerFlag: partnerLabel,
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleUseSurnameChange: this.handleUseSurnameChange,
@@ -541,6 +541,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {datePlaceOfBirth({
+            formPageComplete: partnerA_formPageComplete,
             partnerFlag: partnerLabel,
             partnerDOB: partnerA_dob,
             birthCountryStr: partnerA_birthCountry,
@@ -553,6 +554,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {residence({
+            formPageComplete: partnerA_formPageComplete,
             partnerFlag: partnerLabel,
             residenceZipStr: partnerA_residenceZip,
             residenceCityStr: partnerA_residenceCity,
@@ -567,6 +569,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {marriageBlock({
+            formPageComplete: partnerA_formPageComplete,
             partnerFlag: partnerLabel,
             bloodRelation: partnerA_bloodRelation,
             bloodRelationDesc: partnerA_bloodRelationDesc,
@@ -585,6 +588,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {parents({
+            formPageComplete: partnerA_formPageComplete,
             partnerFlag: partnerLabel,
             parentA_Name: partnerA_parentA_Name,
             parentA_Surname: partnerA_parentA_Surname,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index e55ed7342..42d0d2246 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -526,8 +526,8 @@ export default class PartnerForm extends Component<Props> {
           }
         >
           {nameFields({
-            partnerFlag: partnerLabel,
             formPageComplete: partnerB_formPageComplete,
+            partnerFlag: partnerLabel,
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleUseSurnameChange: this.handleUseSurnameChange,
@@ -541,6 +541,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {datePlaceOfBirth({
+            formPageComplete: partnerB_formPageComplete,
             partnerFlag: partnerLabel,
             partnerDOB: partnerB_dob,
             birthCountryStr: partnerB_birthCountry,
@@ -553,6 +554,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {residence({
+            formPageComplete: partnerB_formPageComplete,
             partnerFlag: partnerLabel,
             residenceZipStr: partnerB_residenceZip,
             residenceCityStr: partnerB_residenceCity,
@@ -567,6 +569,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {marriageBlock({
+            formPageComplete: partnerB_formPageComplete,
             partnerFlag: partnerLabel,
             bloodRelation: partnerB_bloodRelation,
             bloodRelationDesc: partnerB_bloodRelationDesc,
@@ -585,6 +588,7 @@ export default class PartnerForm extends Component<Props> {
           })}
 
           {parents({
+            formPageComplete: partnerB_formPageComplete,
             partnerFlag: partnerLabel,
             parentA_Name: partnerB_parentA_Name,
             parentA_Surname: partnerB_parentA_Surname,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index 2af30b505..9c660a14b 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -267,6 +267,11 @@ export const nameFields = (data: {
           msg:
             'This information is collected as required by the Massachusetts State Marriage Intention Form.',
         }}
+        error={
+          formPageComplete && formPageComplete === '1' && occupation === ''
+            ? 'Please enter your `Occupation`'
+            : ''
+        }
       />
     </div>
   );
@@ -274,6 +279,7 @@ export const nameFields = (data: {
 
 export const datePlaceOfBirth = (data: {
   partnerFlag: string;
+  formPageComplete?: string | null;
   partnerDOB: Date | null | undefined;
   birthCityStr: string;
   birthCountryStr: string;
@@ -284,26 +290,29 @@ export const datePlaceOfBirth = (data: {
   handleBirthDateChange: (newDate: Date | null) => void;
 }) => {
   const {
+    formPageComplete,
     partnerFlag,
     partnerDOB,
-    handleBirthDateChange,
     birthCityStr,
     birthCountryStr,
     birthStateStr,
     handleChange,
+    handleBirthDateChange,
     handleBirthplaceCountryChange,
     checkBirthCityForNeighborhood,
   } = data;
 
   const birthCity = (data: {
+    formPageComplete?: string | null;
     partnerFlag: string;
-    birthCity: string;
+    birthCityStr: string;
     handleChange: ((e: any) => void) | undefined;
     checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
   }) => {
     const {
+      formPageComplete,
       partnerFlag,
-      birthCity,
+      birthCityStr,
       handleChange,
       checkBirthCityForNeighborhood,
     } = data;
@@ -313,7 +322,7 @@ export const datePlaceOfBirth = (data: {
         <TextInput
           label="Birthplace City/Town"
           name={`partner${partnerFlag}_birthCity`}
-          value={birthCity}
+          value={birthCityStr}
           onChange={handleChange}
           disableLabelNoWrap={true}
           onBlur={checkBirthCityForNeighborhood}
@@ -322,12 +331,19 @@ export const datePlaceOfBirth = (data: {
           }
           maxLength={100}
           softRequired={true}
+          error={
+            formPageComplete &&
+            formPageComplete === '1' &&
+            birthCityStr.length === 0
+              ? `Please enter your 'Birth City/Town'`
+              : ''
+          }
         />
       </div>
     );
   };
 
-  const birthStateZip = (data: {
+  const birthStateAndZip = (data: {
     partnerFlag: string;
     birthStateStr: string;
     handleChange: ((e: any) => void) | undefined;
@@ -359,13 +375,7 @@ export const datePlaceOfBirth = (data: {
 
   return (
     <div css={[SECTION_WRAPPER_STYLING, NAME_FIELDS_BASIC_CONTAINER_STYLING]}>
-      <h1
-        css={[
-          PARTNERFORM_SECTION_HEADING_STYLING,
-          // SECTION_HEADING_STYLING
-          BOTTOM_BORDER,
-        ]}
-      >
+      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING, BOTTOM_BORDER]}>
         Date and Place of Birth
       </h1>
 
@@ -395,11 +405,18 @@ export const datePlaceOfBirth = (data: {
           onChange={handleBirthplaceCountryChange}
           onBlur={checkBirthCityForNeighborhood}
           softRequired={true}
+          error={
+            formPageComplete &&
+            formPageComplete === '1' &&
+            birthCountryStr === ''
+              ? 'Please select your `Birthplace Country`'
+              : ''
+          }
         />
       </div>
 
       {birthCountryStr === 'USA' &&
-        birthStateZip({
+        birthStateAndZip({
           partnerFlag,
           birthStateStr: birthStateStr,
           handleChange,
@@ -407,8 +424,9 @@ export const datePlaceOfBirth = (data: {
         })}
       {birthCountryStr &&
         birthCity({
+          formPageComplete,
           partnerFlag,
-          birthCity: birthCityStr,
+          birthCityStr: birthCityStr,
           handleChange,
           checkBirthCityForNeighborhood,
         })}
@@ -417,6 +435,7 @@ export const datePlaceOfBirth = (data: {
 };
 
 export const residence = (data: {
+  formPageComplete?: string | null;
   partnerFlag: string;
   residenceZipStr: string;
   residenceCityStr: string;
@@ -430,6 +449,7 @@ export const residence = (data: {
   handleResidenceCountryChange: ((e: any) => void) | undefined;
 }) => {
   const {
+    formPageComplete,
     partnerFlag,
     residenceZipStr,
     residenceCityStr,
@@ -461,6 +481,13 @@ export const residence = (data: {
           maxLength={10}
           minLength={5}
           softRequired={true}
+          error={
+            formPageComplete &&
+            formPageComplete === '1' &&
+            residenceZipStr === ''
+              ? `Please enter your 'Residence Zip Code'`
+              : ''
+          }
         />
       </div>
     );
@@ -474,7 +501,7 @@ export const residence = (data: {
     const { partnerFlag, residenceStateStr, handleResidenceStateChange } = data;
 
     return (
-      <div>
+      <>
         <div
           css={[
             NAME_FIELDS_CONTAINER_STYLING,
@@ -490,9 +517,16 @@ export const residence = (data: {
             value={residenceStateStr}
             onChange={handleResidenceStateChange}
             softRequired={true}
+            error={
+              formPageComplete &&
+              formPageComplete === '1' &&
+              residenceStateStr === ''
+                ? 'Please select your `Residence Address`'
+                : ''
+            }
           />
         </div>
-      </div>
+      </>
     );
   };
 
@@ -525,6 +559,13 @@ export const residence = (data: {
           }
           maxLength={100}
           softRequired={true}
+          error={
+            formPageComplete &&
+            formPageComplete === '1' &&
+            residenceCityStr === ''
+              ? `Please enter your City/Town of Residence'`
+              : ''
+          }
         />
 
         <TextInput
@@ -538,6 +579,13 @@ export const residence = (data: {
           }
           maxLength={100}
           softRequired={true}
+          error={
+            formPageComplete &&
+            formPageComplete === '1' &&
+            residenceAddressStr === ''
+              ? 'Please enter your `Residence Address`'
+              : ''
+          }
         />
       </div>
     );
@@ -577,6 +625,13 @@ export const residence = (data: {
               msg:
                 'If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.',
             }}
+            error={
+              formPageComplete &&
+              formPageComplete === '1' &&
+              residenceCountryStr === ''
+                ? 'Please select your `Residence Address`'
+                : ''
+            }
           />
         </div>
 
@@ -609,6 +664,7 @@ export const findMarriageNumb = (val: string) =>
   MARRIAGE_COUNT.find(entry => entry.value === val);
 
 export const marriageBlock = (data: {
+  formPageComplete?: string | null;
   partnerFlag: string;
   bloodRelation: string;
   bloodRelationDesc: string;
@@ -626,6 +682,7 @@ export const marriageBlock = (data: {
   handleMarriedBeforeChange: ((e: any) => void) | undefined;
 }) => {
   const {
+    formPageComplete,
     partnerFlag,
     bloodRelation,
     bloodRelationDesc,
@@ -664,6 +721,11 @@ export const marriageBlock = (data: {
             msg:
               'This information is collected as required by Massachusetts State Law Chapter 46 Section 1.',
           }}
+          error={
+            formPageComplete && formPageComplete === '1' && marriageNumb === ''
+              ? 'Please select your `Marriage Number`'
+              : ''
+          }
         />
       </div>
     );
@@ -729,6 +791,7 @@ export const marriageBlock = (data: {
         })}
 
       {$partnershipType({
+        formPageComplete,
         partnerFlag,
         partnershipType,
         partnershipState,
@@ -771,6 +834,7 @@ export const $lastMarriageStatus = (data: {
 };
 
 export const $partnershipType = (data: {
+  formPageComplete?: string | null;
   partnerFlag: string;
   partnershipType: string;
   partnershipState: string;
@@ -778,6 +842,7 @@ export const $partnershipType = (data: {
   handleChange: ((e: any) => void) | undefined;
 }) => {
   const {
+    formPageComplete,
     partnerFlag,
     partnershipType,
     partnershipState,
@@ -816,6 +881,7 @@ export const $partnershipType = (data: {
       {partnershipType &&
         (partnershipType === 'CIV' || partnershipType === 'DOM') &&
         $dissolved({
+          formPageComplete,
           partnerFlag,
           partnershipState,
           partnershipTypeDissolved,
@@ -826,12 +892,14 @@ export const $partnershipType = (data: {
 };
 
 const $dissolved = (data: {
+  formPageComplete?: string | null;
   partnerFlag: string;
   partnershipState: string;
   partnershipTypeDissolved: string;
   handleChange: ((e: any) => void) | undefined;
 }) => {
   const {
+    formPageComplete,
     partnerFlag,
     partnershipTypeDissolved,
     partnershipState,
@@ -866,6 +934,14 @@ const $dissolved = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         maxLength={100}
+        softRequired={true}
+        error={
+          formPageComplete &&
+          formPageComplete === '1' &&
+          partnershipState === ''
+            ? `Please enter your 'Patnershipt's State/Country'`
+            : ''
+        }
       />
     </div>
   );
@@ -927,6 +1003,7 @@ export const parentsMarried = (data: {
 };
 
 export const parents = (data: {
+  formPageComplete?: string | null;
   partnerFlag: string;
   parentA_Name: string;
   parentA_Surname: string;
@@ -938,6 +1015,7 @@ export const parents = (data: {
   handleAdditionalParentChange: ((e: any) => void) | undefined;
 }) => {
   const {
+    formPageComplete,
     partnerFlag,
     parentA_Name,
     parentA_Surname,
@@ -980,6 +1058,11 @@ export const parents = (data: {
           disableLabelNoWrap={true}
           maxLength={38}
           softRequired={true}
+          error={
+            formPageComplete && formPageComplete === '1' && parentA_Name === ''
+              ? `Please enter your 'Parent 1 - Names'`
+              : ''
+          }
         />
 
         <TextInput
@@ -993,6 +1076,13 @@ export const parents = (data: {
             'This information might be found on your birth certificate.'
           }
           softRequired={true}
+          error={
+            formPageComplete &&
+            formPageComplete === '1' &&
+            parentA_Surname === ''
+              ? `Please enter your 'Parent 1 - Family Name at birth or adoption'`
+              : ''
+          }
         />
 
         <div css={RADIOGROUP_CONTAINER_STYLING}>
diff --git a/services-js/registry-certs/templates/stylesheets.json b/services-js/registry-certs/templates/stylesheets.json
index 4e5700798..302e7e0b7 100644
--- a/services-js/registry-certs/templates/stylesheets.json
+++ b/services-js/registry-certs/templates/stylesheets.json
@@ -1,3 +1,3 @@
 [
-  "https://patterns.boston.gov/css/public.css"
+  "https://patterns-stg.boston.gov/css/public.css"
 ]
\ No newline at end of file

From b74ba951c07c490493a6b43a40ae7a8b0f4bbced Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Fri, 5 Apr 2024 19:20:53 -0400
Subject: [PATCH 14/28] DIG-4059: Navigation Bar and Next Button behavior is
 aligned

---
 .../src/__snapshots__/Storyshots.test.ts.snap |   2 +-
 .../src/form-elements/inputs/Radio.tsx        |   3 +
 .../src/form-elements/inputs/TextInput.tsx    |   9 +-
 .../__snapshots__/Storyshots.test.ts.snap     |  10 +
 .../marriageintention/forms/partnerFormA.tsx  | 177 +---
 .../marriageintention/forms/partnerFormB.tsx  | 172 +---
 .../marriageintention/forms/partnerFormUI.tsx | 767 ++++++++++++------
 .../marriageintention/helpers/formUtils.ts    | 238 ++++++
 .../client/marriageintention/index.tsx        | 195 +++--
 services-js/registry-certs/client/types.ts    |   4 +-
 10 files changed, 987 insertions(+), 590 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index c5b71e209..d52d20415 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -3712,7 +3712,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
     </label>
     <input
       aria-label=""
-      className="txt-f  txt-f--sm  "
+      className="txt-f txt-f--sm  "
       id="input-472033325"
       placeholder="Placeholder Text"
       type="text"
diff --git a/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx b/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx
index 3362d72cd..f30914a7f 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/Radio.tsx
@@ -65,6 +65,9 @@ interface RadioGroupProps {
   softRequired?: boolean;
   toolTip?: { icon: string; msg: string };
 
+  required?: boolean;
+  error?: string;
+
   handleItemChange?(e: ChangeEvent<HTMLInputElement>): void;
   handleItemBlur?(e: FocusEvent<HTMLInputElement>): void;
 }
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 442cea25a..16b98d465 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -41,13 +41,12 @@ type Props = {
   optionalDescription?: string;
 
   required?: boolean;
-  inputMode?: string;
-  maxLength?: number;
-  minLength?: number;
-
   softRequired?: boolean;
   toolTip?: { icon: string; msg: string };
   focused?: boolean;
+  inputMode?: string;
+  maxLength?: number;
+  minLength?: number;
 
   value?: string;
   disabled?: boolean;
@@ -76,7 +75,7 @@ export default function TextInput(props: Props): JSX.Element {
 
   const classNames = {
     label: `txt-l ${props.small ? 'txt-l--sm' : ''}`,
-    input: `txt-f ${props.small ? ' txt-f--sm' : ''} ${
+    input: `txt-f ${props.small ? 'txt-f--sm' : ''} ${
       props.error ? 'txt-f--err' : ''
     } ${focused ? ' txt-f--focused' : ''}${
       props.softRequired &&
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 771cfa9ed..262409451 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -75226,6 +75226,7 @@ Array [
                         Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
                       </div>
                     </h1>
+                    <span />
                     <div>
                       <label
                         className="txt-l "
@@ -75612,6 +75613,7 @@ Array [
                     >
                       Date and Place of Birth
                     </h1>
+                    <span />
                     <fieldset
                       className="emotion-17"
                     >
@@ -77006,6 +77008,7 @@ Array [
                       <div
                         className="emotion-11"
                       >
+                        <span />
                         <div>
                           <label
                             className="txt-l "
@@ -78279,6 +78282,7 @@ Array [
                         className="notice"
                       />
                     </h1>
+                    <span />
                     <div
                       className="emotion-9"
                     >
@@ -78555,6 +78559,7 @@ Array [
                         </span>
                       </div>
                     </h1>
+                    <span />
                     <div
                       className="emotion-45"
                     >
@@ -80279,6 +80284,7 @@ Array [
                         Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
                       </div>
                     </h1>
+                    <span />
                     <div>
                       <label
                         className="txt-l "
@@ -80665,6 +80671,7 @@ Array [
                     >
                       Date and Place of Birth
                     </h1>
+                    <span />
                     <fieldset
                       className="emotion-17"
                     >
@@ -82059,6 +82066,7 @@ Array [
                       <div
                         className="emotion-11"
                       >
+                        <span />
                         <div>
                           <label
                             className="txt-l "
@@ -83332,6 +83340,7 @@ Array [
                         className="notice"
                       />
                     </h1>
+                    <span />
                     <div
                       className="emotion-9"
                     >
@@ -83608,6 +83617,7 @@ Array [
                         </span>
                       </div>
                     </h1>
+                    <span />
                     <div
                       className="emotion-45"
                     >
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index e0cdcc087..3a7381185 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -12,11 +12,7 @@ import QuestionComponent from '../../common/question-components/QuestionComponen
 
 import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import {
-  PARTNERSHIP_TYPE,
-  MARRIAGE_COUNT,
-  BOSTON_NEIGHBORHOODS,
-} from './inputData';
+import { BOSTON_NEIGHBORHOODS } from './inputData';
 
 import {
   nameFields,
@@ -36,12 +32,27 @@ import {
   handleFormPageComplete$,
 } from './eventHandlers';
 
+import { isPartnerFormPageComplete } from '../../marriageintention/helpers/formUtils';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
   handleStepBack: (ev: MouseEvent) => void;
-  partnerLabel: string;
+  formErrors: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement> | null;
+    section: string;
+  }) => any | undefined;
+  refObjs: {
+    nameFieldsRef: React.RefObject<HTMLSpanElement>;
+    residenceRef: React.RefObject<HTMLSpanElement>;
+    marriageRef: React.RefObject<HTMLSpanElement>;
+    datePlaceOfBirthRef: React.RefObject<HTMLSpanElement>;
+    parentsRef: React.RefObject<HTMLSpanElement>;
+  };
+  errorElemSrc: object;
   partnerNum?: number | string;
+  partnerLabel: string;
 }
 
 @observer
@@ -53,141 +64,7 @@ export default class PartnerForm extends Component<Props> {
   public static isComplete({
     requestInformation,
   }: MarriageIntentionCertificateRequest): boolean {
-    const {
-      partnerA_lastName,
-      partnerA_firstName,
-      partnerA_dob,
-      partnerA_age,
-      partnerA_surName,
-      partnerA_useSurname,
-      partnerA_occupation,
-      partnerA_bloodRelation,
-      partnerA_bloodRelationDesc,
-      partnerA_birthCity,
-      partnerA_birthState,
-      partnerA_birthCountry,
-      partnerA_residenceAddress,
-      partnerA_residenceCountry,
-      partnerA_parentsMarriedAtBirth,
-      partnerA_parentA_Name,
-      partnerA_parentA_Surname,
-      partnerA_parentB_Name,
-      partnerA_parentB_Surname,
-      partnerA_partnershipType,
-      partnerA_partnershipTypeDissolved,
-      partnerA_partnershipState,
-
-      partnerA_marriageNumb,
-      partnerA_marriedBefore,
-      partnerA_lastMarriageStatus,
-      partnerA_additionalParent,
-    } = requestInformation;
-
-    let bloodRelReq = true;
-    let useSurnameReq = true;
-    let additionalParentsReq = true;
-    let marriedBeforeReq = true;
-    let partnerA_partnership_dissolved = true;
-    let partnerA_lastMarriageStatusReq = true;
-    let partnerA_birthStateZip = true;
-    let partnershipState = true;
-    if (
-      partnerA_partnershipType !== PARTNERSHIP_TYPE[0].value &&
-      partnerA_partnershipState.length < 2
-    ) {
-      partnershipState = false;
-    }
-
-    const bloodRelDescReq =
-      partnerA_bloodRelation && partnerA_bloodRelation == '1' ? true : false;
-
-    if (bloodRelDescReq && partnerA_bloodRelationDesc.length < 1) {
-      bloodRelReq = false;
-    }
-
-    const surNameTextReq =
-      partnerA_useSurname && partnerA_useSurname === '1' ? true : false;
-
-    if (
-      (surNameTextReq && partnerA_surName.length < 1) ||
-      partnerA_useSurname == ''
-    ) {
-      useSurnameReq = false;
-    }
-
-    const addParentsReq =
-      partnerA_additionalParent && partnerA_additionalParent == '1'
-        ? true
-        : false;
-
-    if (
-      (addParentsReq &&
-        (partnerA_parentB_Name.length < 1 ||
-          partnerA_parentB_Surname.length < 1)) ||
-      partnerA_additionalParent == ''
-    ) {
-      additionalParentsReq = false;
-    }
-
-    if (partnerA_birthCountry === 'USA') {
-      partnerA_birthStateZip = partnerA_birthState.length > 0 ? true : false;
-    }
-
-    const marriedBefore = partnerA_marriedBefore === '1' ? true : false;
-
-    if (partnerA_marriedBefore === '') marriedBeforeReq = false;
-    if (marriedBefore && partnerA_marriageNumb === '') marriedBeforeReq = false;
-
-    const getMarriageNumb = (): { label: string; value: string } => {
-      let retOb = MARRIAGE_COUNT.find(
-        entry => entry.value == partnerA_marriageNumb
-      );
-
-      if (!retOb) retOb = { label: '', value: '' };
-
-      return retOb;
-    };
-
-    const marriageNumb: { label: string; value: string } = getMarriageNumb();
-
-    if (marriageNumb && marriageNumb.value !== '') {
-      if (partnerA_lastMarriageStatus === '') {
-        partnerA_lastMarriageStatusReq = false;
-      }
-    }
-
-    if (partnerA_partnershipType !== PARTNERSHIP_TYPE[0].value) {
-      if (partnerA_partnershipTypeDissolved === '') {
-        partnerA_partnership_dissolved = false;
-      }
-    }
-
-    const is_Complete = !!(
-      partnerA_lastName &&
-      partnerA_firstName &&
-      partnerA_dob &&
-      partnerA_age &&
-      partnerA_occupation &&
-      partnerA_bloodRelation &&
-      partnerA_birthCity &&
-      partnerA_birthCountry &&
-      partnerA_residenceAddress &&
-      partnerA_residenceCountry &&
-      partnerA_parentsMarriedAtBirth &&
-      partnerA_partnershipType &&
-      partnerA_parentA_Name &&
-      partnerA_parentA_Surname &&
-      partnerA_partnership_dissolved &&
-      partnerA_lastMarriageStatusReq &&
-      partnershipState &&
-      partnerA_birthStateZip &&
-      bloodRelReq &&
-      additionalParentsReq &&
-      marriedBeforeReq &&
-      useSurnameReq
-    );
-
-    return is_Complete;
+    return isPartnerFormPageComplete('A', requestInformation);
   }
 
   private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -508,6 +385,8 @@ export default class PartnerForm extends Component<Props> {
 
     const partner_num = partnerNum ? partnerNum : partnerLabel;
 
+    // console.log(`this.props.refObjs: `, this.props.refObjs, this.props);
+
     return (
       <QuestionComponent
         handleProceed={this.advanceForm.bind(
@@ -531,6 +410,10 @@ export default class PartnerForm extends Component<Props> {
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleUseSurnameChange: this.handleUseSurnameChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.nameFieldsRef,
+
             firstName: partnerA_firstName,
             lastName: partnerA_lastName,
             middleName: partnerA_middleName,
@@ -551,6 +434,9 @@ export default class PartnerForm extends Component<Props> {
             handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
             checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
             handleBirthDateChange: this.handleBirthDateChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.datePlaceOfBirthRef,
           })}
 
           {residence({
@@ -566,6 +452,9 @@ export default class PartnerForm extends Component<Props> {
             replaceBosNeighborhoods: this.replaceBosNeighborhoods,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleResidenceCountryChange: this.handleResidenceCountryChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.residenceRef,
           })}
 
           {marriageBlock({
@@ -585,6 +474,9 @@ export default class PartnerForm extends Component<Props> {
             handleBloodRelChange: this.handleBloodRelChange,
             handleBloodRelDescChange: this.handleBloodRelDescChange,
             handleMarriedBeforeChange: this.handleMarriedBeforeChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.marriageRef,
           })}
 
           {parents({
@@ -598,6 +490,9 @@ export default class PartnerForm extends Component<Props> {
             parentsMarriedAtBirth: partnerA_parentsMarriedAtBirth,
             handleChange: this.handleChange,
             handleAdditionalParentChange: this.handleAdditionalParentChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.parentsRef,
           })}
         </FieldsetComponent>
       </QuestionComponent>
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 42d0d2246..c3c6af418 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -12,11 +12,7 @@ import QuestionComponent from '../../common/question-components/QuestionComponen
 
 import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import {
-  PARTNERSHIP_TYPE,
-  MARRIAGE_COUNT,
-  BOSTON_NEIGHBORHOODS,
-} from './inputData';
+import { BOSTON_NEIGHBORHOODS } from './inputData';
 
 import {
   nameFields,
@@ -36,10 +32,25 @@ import {
   handleFormPageComplete$,
 } from './eventHandlers';
 
+import { isPartnerFormPageComplete } from '../../marriageintention/helpers/formUtils';
+
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
   handleStepBack: (ev: MouseEvent) => void;
+  formErrors: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement> | null;
+    section: string;
+  }) => any | undefined;
+  refObjs: {
+    nameFieldsRef: React.RefObject<HTMLSpanElement>;
+    residenceRef: React.RefObject<HTMLSpanElement>;
+    marriageRef: React.RefObject<HTMLSpanElement>;
+    datePlaceOfBirthRef: React.RefObject<HTMLSpanElement>;
+    parentsRef: React.RefObject<HTMLSpanElement>;
+  };
+  errorElemSrc: object;
   partnerLabel: string;
   partnerNum?: number | string;
 }
@@ -53,141 +64,7 @@ export default class PartnerForm extends Component<Props> {
   public static isComplete({
     requestInformation,
   }: MarriageIntentionCertificateRequest): boolean {
-    const {
-      partnerB_firstName,
-      partnerB_lastName,
-      partnerB_dob,
-      partnerB_age,
-      partnerB_surName,
-      partnerB_useSurname,
-      partnerB_occupation,
-      partnerB_bloodRelation,
-      partnerB_bloodRelationDesc,
-      partnerB_birthCity,
-      partnerB_birthState,
-      partnerB_birthCountry,
-      partnerB_residenceAddress,
-      partnerB_residenceCountry,
-      partnerB_parentsMarriedAtBirth,
-      partnerB_parentA_Name,
-      partnerB_parentA_Surname,
-      partnerB_parentB_Name,
-      partnerB_parentB_Surname,
-      partnerB_partnershipType,
-      partnerB_partnershipTypeDissolved,
-      partnerB_partnershipState,
-
-      partnerB_marriageNumb,
-      partnerB_marriedBefore,
-      partnerB_lastMarriageStatus,
-      partnerB_additionalParent,
-    } = requestInformation;
-
-    let bloodRelReq = true;
-    let useSurnameReq = true;
-    let additionalParentsReq = true;
-    let marriedBeforeReq = true;
-    let partnerB_partnership_dissolved = true;
-    let partnerB_lastMarriageStatusReq = true;
-    let partnerB_birthStateZip = true;
-    let partnershipState = true;
-    if (
-      partnerB_partnershipType !== PARTNERSHIP_TYPE[0].value &&
-      partnerB_partnershipState.length < 2
-    ) {
-      partnershipState = false;
-    }
-
-    const bloodRelDescReq =
-      partnerB_bloodRelation && partnerB_bloodRelation == '1' ? true : false;
-
-    if (bloodRelDescReq && partnerB_bloodRelationDesc.length < 1) {
-      bloodRelReq = false;
-    }
-
-    const surNameTextReq =
-      partnerB_useSurname && partnerB_useSurname === '1' ? true : false;
-
-    if (
-      (surNameTextReq && partnerB_surName.length < 1) ||
-      partnerB_useSurname == ''
-    ) {
-      useSurnameReq = false;
-    }
-
-    const addParentsReq =
-      partnerB_additionalParent && partnerB_additionalParent == '1'
-        ? true
-        : false;
-
-    if (
-      (addParentsReq &&
-        (partnerB_parentB_Name.length < 1 ||
-          partnerB_parentB_Surname.length < 1)) ||
-      partnerB_additionalParent == ''
-    ) {
-      additionalParentsReq = false;
-    }
-
-    if (partnerB_birthCountry === 'USA') {
-      partnerB_birthStateZip = partnerB_birthState.length > 0 ? true : false;
-    }
-
-    const marriedBefore = partnerB_marriedBefore === '1' ? true : false;
-
-    if (partnerB_marriedBefore === '') marriedBeforeReq = false;
-    if (marriedBefore && partnerB_marriageNumb === '') marriedBeforeReq = false;
-
-    const getMarriageNumb = (): { label: string; value: string } => {
-      let retOb = MARRIAGE_COUNT.find(
-        entry => entry.value == partnerB_marriageNumb
-      );
-
-      if (!retOb) retOb = { label: '', value: '' };
-
-      return retOb;
-    };
-
-    const marriageNumb: { label: string; value: string } = getMarriageNumb();
-
-    if (marriageNumb && marriageNumb.value !== '') {
-      if (partnerB_lastMarriageStatus === '') {
-        partnerB_lastMarriageStatusReq = false;
-      }
-    }
-
-    if (partnerB_partnershipType !== PARTNERSHIP_TYPE[0].value) {
-      if (partnerB_partnershipTypeDissolved === '') {
-        partnerB_partnership_dissolved = false;
-      }
-    }
-
-    const is_Complete = !!(
-      partnerB_firstName &&
-      partnerB_lastName &&
-      partnerB_dob &&
-      partnerB_age &&
-      partnerB_occupation &&
-      partnerB_bloodRelation &&
-      partnerB_birthCity &&
-      partnerB_birthCountry &&
-      partnerB_residenceAddress &&
-      partnerB_residenceCountry &&
-      partnerB_parentsMarriedAtBirth &&
-      partnerB_partnershipType &&
-      partnerB_parentA_Name &&
-      partnerB_parentA_Surname &&
-      partnerB_partnership_dissolved &&
-      partnerB_lastMarriageStatusReq &&
-      partnershipState &&
-      partnerB_birthStateZip &&
-      bloodRelReq &&
-      additionalParentsReq &&
-      marriedBeforeReq &&
-      useSurnameReq
-    );
-
-    return is_Complete;
+    return isPartnerFormPageComplete('B', requestInformation);
   }
 
   private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -531,6 +408,9 @@ export default class PartnerForm extends Component<Props> {
             handleChange: this.handleChange,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleUseSurnameChange: this.handleUseSurnameChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.nameFieldsRef,
             firstName: partnerB_firstName,
             lastName: partnerB_lastName,
             middleName: partnerB_middleName,
@@ -551,6 +431,9 @@ export default class PartnerForm extends Component<Props> {
             handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
             checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
             handleBirthDateChange: this.handleBirthDateChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.datePlaceOfBirthRef,
           })}
 
           {residence({
@@ -566,6 +449,9 @@ export default class PartnerForm extends Component<Props> {
             replaceBosNeighborhoods: this.replaceBosNeighborhoods,
             handleResidenceStateChange: this.handleResidenceStateChange,
             handleResidenceCountryChange: this.handleResidenceCountryChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.residenceRef,
           })}
 
           {marriageBlock({
@@ -585,6 +471,9 @@ export default class PartnerForm extends Component<Props> {
             handleBloodRelChange: this.handleBloodRelChange,
             handleBloodRelDescChange: this.handleBloodRelDescChange,
             handleMarriedBeforeChange: this.handleMarriedBeforeChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.marriageRef,
           })}
 
           {parents({
@@ -598,6 +487,9 @@ export default class PartnerForm extends Component<Props> {
             parentsMarriedAtBirth: partnerB_parentsMarriedAtBirth,
             handleChange: this.handleChange,
             handleAdditionalParentChange: this.handleAdditionalParentChange,
+            formErrors: this.props.formErrors,
+            errorElemSrc: this.props.errorElemSrc,
+            refs: this.props.refObjs.parentsRef,
           })}
         </FieldsetComponent>
       </QuestionComponent>
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index 9c660a14b..912bda8cc 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -97,10 +97,17 @@ const MEMORABLEDATEINPUT_STYLING = css(`
 
 export const nameFields = (data: {
   partnerFlag: string;
-  formPageComplete?: string | null;
+  formPageComplete?: '' | '1' | null;
   handleChange: ((e: any) => void) | undefined;
   handleResidenceStateChange: ((e: any) => void) | undefined;
   handleUseSurnameChange: ((e: any) => void) | undefined;
+  formErrors?: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement>;
+    section: string;
+  }) => any | undefined;
+  refs?: React.RefObject<HTMLSpanElement> | null;
+  errorElemSrc?: object;
   firstName: string;
   lastName: string;
   middleName: string;
@@ -122,8 +129,62 @@ export const nameFields = (data: {
     handleChange,
     handleResidenceStateChange,
     handleUseSurnameChange,
+    formErrors,
+    refs,
+    errorElemSrc,
   } = data;
   const $CSS_SECTION_WRAPPER = css(`margin-bottom: 1.5em;`);
+  let errors = new Set();
+
+  const errorVal_firstName =
+    formPageComplete && formPageComplete === '1' && firstName === ''
+      ? 'Please enter your `First Name`'
+      : '';
+  if (errorVal_firstName.length > 0)
+    errors.add(`partner${partnerFlag}_firstName`);
+
+  const errorVal_lastName =
+    formPageComplete && formPageComplete === '1' && lastName === ''
+      ? 'Please enter your `Last Name`'
+      : '';
+  if (errorVal_lastName.length > 0)
+    errors.add(`partner${partnerFlag}_lastName`);
+
+  const errorVal_surName =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    useSurname === '1' &&
+    surName === ''
+      ? `Please enter the 'Last Name' you'll use`
+      : '';
+  if (errorVal_surName.length > 0) errors.add(`partner${partnerFlag}_surName`);
+
+  const errorVal_occupation =
+    formPageComplete && formPageComplete === '1' && occupation === ''
+      ? 'Please enter your `Occupation`'
+      : '';
+  if (errorVal_occupation.length > 0)
+    errors.add(`partner${partnerFlag}_occupation`);
+
+  if (formErrors && formPageComplete === '1') {
+    if (
+      refs &&
+      errorElemSrc &&
+      !errorElemSrc['nameFields'] &&
+      errors.size > 0
+    ) {
+      formErrors({
+        action: 'add',
+        ref: refs,
+        section: 'nameFields',
+      });
+    } else {
+      formErrors({
+        action: 'delete',
+        section: 'nameFields',
+      });
+    }
+  }
 
   return (
     <div
@@ -142,6 +203,7 @@ export const nameFields = (data: {
         </div>
       </h1>
 
+      {refs && <span ref={refs} />}
       <TextInput
         label="First Name"
         name={`partner${partnerFlag}_firstName`}
@@ -150,11 +212,7 @@ export const nameFields = (data: {
         disableLabelNoWrap={true}
         maxLength={100}
         softRequired={true}
-        error={
-          formPageComplete && formPageComplete === '1' && firstName === ''
-            ? 'Please enter your `First Name`'
-            : ''
-        }
+        error={errorVal_firstName}
       />
 
       <TextInput
@@ -178,11 +236,7 @@ export const nameFields = (data: {
         disableLabelNoWrap={true}
         maxLength={100}
         softRequired={true}
-        error={
-          formPageComplete && formPageComplete === '1' && lastName === ''
-            ? 'Please enter your `Last Name`'
-            : ''
-        }
+        error={errorVal_lastName}
       />
 
       <div css={RADIOGROUP_CONTAINER_STYLING}>
@@ -227,11 +281,7 @@ export const nameFields = (data: {
             }}
             softRequired={true}
             required
-            error={
-              formPageComplete && formPageComplete === '1' && surName === ''
-                ? `Please enter the 'Last Name' you'll use`
-                : ''
-            }
+            error={errorVal_surName}
           />
         </div>
       )}
@@ -267,11 +317,7 @@ export const nameFields = (data: {
           msg:
             'This information is collected as required by the Massachusetts State Marriage Intention Form.',
         }}
-        error={
-          formPageComplete && formPageComplete === '1' && occupation === ''
-            ? 'Please enter your `Occupation`'
-            : ''
-        }
+        error={errorVal_occupation}
       />
     </div>
   );
@@ -279,7 +325,7 @@ export const nameFields = (data: {
 
 export const datePlaceOfBirth = (data: {
   partnerFlag: string;
-  formPageComplete?: string | null;
+  formPageComplete?: '' | '1' | null;
   partnerDOB: Date | null | undefined;
   birthCityStr: string;
   birthCountryStr: string;
@@ -288,6 +334,13 @@ export const datePlaceOfBirth = (data: {
   handleBirthplaceCountryChange: ((e: any) => void) | undefined;
   checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
   handleBirthDateChange: (newDate: Date | null) => void;
+  formErrors?: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement>;
+    section: string;
+  }) => any | undefined;
+  refs?: React.RefObject<HTMLSpanElement> | null;
+  errorElemSrc?: object;
 }) => {
   const {
     formPageComplete,
@@ -300,17 +353,47 @@ export const datePlaceOfBirth = (data: {
     handleBirthDateChange,
     handleBirthplaceCountryChange,
     checkBirthCityForNeighborhood,
+    formErrors,
+    refs,
+    errorElemSrc,
   } = data;
 
+  let errors = new Set();
+
+  const errorVal_birthCity =
+    formPageComplete && formPageComplete === '1' && birthCityStr.length === 0
+      ? `Please enter your 'Birth City/Town'`
+      : '';
+  if (errorVal_birthCity.length > 0) errors.add('');
+
+  if (formErrors && formPageComplete === '1') {
+    if (
+      refs &&
+      errorElemSrc &&
+      !errorElemSrc['datePlaceBirth'] &&
+      errors.size > 0
+    ) {
+      formErrors({
+        action: 'add',
+        ref: refs,
+        section: 'datePlaceOfBirth',
+      });
+    } else {
+      formErrors({
+        action: 'delete',
+        section: 'datePlaceOfBirth',
+      });
+    }
+  }
+
   const birthCity = (data: {
-    formPageComplete?: string | null;
+    formPageComplete?: '' | '1' | null;
     partnerFlag: string;
     birthCityStr: string;
     handleChange: ((e: any) => void) | undefined;
     checkBirthCityForNeighborhood: ((e: any) => void) | undefined;
   }) => {
     const {
-      formPageComplete,
       partnerFlag,
       birthCityStr,
       handleChange,
@@ -331,13 +414,7 @@ export const datePlaceOfBirth = (data: {
           }
           maxLength={100}
           softRequired={true}
-          error={
-            formPageComplete &&
-            formPageComplete === '1' &&
-            birthCityStr.length === 0
-              ? `Please enter your 'Birth City/Town'`
-              : ''
-          }
+          error={errorVal_birthCity}
         />
       </div>
     );
@@ -379,6 +456,8 @@ export const datePlaceOfBirth = (data: {
         Date and Place of Birth
       </h1>
 
+      {refs && <span ref={refs} />}
+
       <MemorableDateInput
         hideLengend={true}
         legend={`Person ${partnerFlag} Date of Birth`}
@@ -435,7 +514,7 @@ export const datePlaceOfBirth = (data: {
 };
 
 export const residence = (data: {
-  formPageComplete?: string | null;
+  formPageComplete?: '' | '1' | null;
   partnerFlag: string;
   residenceZipStr: string;
   residenceCityStr: string;
@@ -447,6 +526,13 @@ export const residence = (data: {
   replaceBosNeighborhoods: ((e: any) => void) | undefined;
   handleResidenceStateChange: ((e: any) => void) | undefined;
   handleResidenceCountryChange: ((e: any) => void) | undefined;
+  formErrors?: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement>;
+    section: string;
+  }) => any | undefined;
+  refs?: React.RefObject<HTMLSpanElement> | null;
+  errorElemSrc?: object;
 }) => {
   const {
     formPageComplete,
@@ -461,8 +547,56 @@ export const residence = (data: {
     replaceBosNeighborhoods,
     handleResidenceStateChange,
     handleResidenceCountryChange,
+    formErrors,
+    errorElemSrc,
+    refs,
   } = data;
 
+  let errors = new Set();
+
+  const errorVal_Zipcode =
+    formPageComplete && formPageComplete === '1' && residenceZipStr === ''
+      ? `Please enter your 'Residence Zip Code'`
+      : '';
+  if (errorVal_Zipcode.length > 0) errors.add('');
+
+  const errorVal_residenceAddress =
+    formPageComplete && formPageComplete === '1' && residenceAddressStr === ''
+      ? 'Please enter your `Residence Address`'
+      : '';
+  if (errorVal_residenceAddress.length > 0) errors.add('');
+
+  const errorVal_residenceCity =
+    formPageComplete && formPageComplete === '1' && residenceCityStr === ''
+      ? `Please enter your City/Town of Residence'`
+      : '';
+  if (errorVal_residenceCity.length > 0) errors.add('');
+
+  const errorVal_residenceState =
+    formPageComplete && formPageComplete === '1' && residenceStateStr === ''
+      ? 'Please select your `State of Residence`'
+      : '';
+
+  const errorVal_residenceCountry =
+    formPageComplete && formPageComplete === '1' && residenceCountryStr === ''
+      ? 'Please select your `Country of Residence`'
+      : '';
+
+  if (formErrors && formPageComplete === '1') {
+    if (refs && errorElemSrc && !errorElemSrc['residence'] && errors.size > 0) {
+      formErrors({
+        action: 'add',
+        ref: refs,
+        section: 'residence',
+      });
+    } else {
+      formErrors({
+        action: 'delete',
+        section: 'residence',
+      });
+    }
+  }
+
   const residenceZip = (data: {
     partnerFlag: string;
     residenceZipStr: string;
@@ -481,13 +615,7 @@ export const residence = (data: {
           maxLength={10}
           minLength={5}
           softRequired={true}
-          error={
-            formPageComplete &&
-            formPageComplete === '1' &&
-            residenceZipStr === ''
-              ? `Please enter your 'Residence Zip Code'`
-              : ''
-          }
+          error={errorVal_Zipcode}
         />
       </div>
     );
@@ -517,13 +645,7 @@ export const residence = (data: {
             value={residenceStateStr}
             onChange={handleResidenceStateChange}
             softRequired={true}
-            error={
-              formPageComplete &&
-              formPageComplete === '1' &&
-              residenceStateStr === ''
-                ? 'Please select your `Residence Address`'
-                : ''
-            }
+            error={errorVal_residenceState}
           />
         </div>
       </>
@@ -559,13 +681,7 @@ export const residence = (data: {
           }
           maxLength={100}
           softRequired={true}
-          error={
-            formPageComplete &&
-            formPageComplete === '1' &&
-            residenceCityStr === ''
-              ? `Please enter your City/Town of Residence'`
-              : ''
-          }
+          error={errorVal_residenceCity}
         />
 
         <TextInput
@@ -579,13 +695,7 @@ export const residence = (data: {
           }
           maxLength={100}
           softRequired={true}
-          error={
-            formPageComplete &&
-            formPageComplete === '1' &&
-            residenceAddressStr === ''
-              ? 'Please enter your `Residence Address`'
-              : ''
-          }
+          error={errorVal_residenceAddress}
         />
       </div>
     );
@@ -612,6 +722,8 @@ export const residence = (data: {
             SELECTINPUT_WRAPPER_STYLING,
           ]}
         >
+          {refs && <span ref={refs} />}
+
           <SelectDropdown
             label="Country of Residence"
             options={COUNTRIES}
@@ -625,13 +737,7 @@ export const residence = (data: {
               msg:
                 'If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.',
             }}
-            error={
-              formPageComplete &&
-              formPageComplete === '1' &&
-              residenceCountryStr === ''
-                ? 'Please select your `Residence Address`'
-                : ''
-            }
+            error={errorVal_residenceCountry}
           />
         </div>
 
@@ -660,11 +766,8 @@ export const residence = (data: {
   );
 };
 
-export const findMarriageNumb = (val: string) =>
-  MARRIAGE_COUNT.find(entry => entry.value === val);
-
 export const marriageBlock = (data: {
-  formPageComplete?: string | null;
+  formPageComplete?: '' | '1' | null;
   partnerFlag: string;
   bloodRelation: string;
   bloodRelationDesc: string;
@@ -680,6 +783,13 @@ export const marriageBlock = (data: {
   handleBloodRelChange: ((e: any) => void) | undefined;
   handleBloodRelDescChange: ((e: any) => void) | undefined;
   handleMarriedBeforeChange: ((e: any) => void) | undefined;
+  formErrors?: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement>;
+    section: string;
+  }) => any | undefined;
+  refs?: React.RefObject<HTMLSpanElement> | null;
+  errorElemSrc?: object;
 }) => {
   const {
     formPageComplete,
@@ -698,7 +808,75 @@ export const marriageBlock = (data: {
     handleBloodRelChange,
     handleBloodRelDescChange,
     handleMarriedBeforeChange,
+    formErrors,
+    errorElemSrc,
+    refs,
   } = data;
+  let errors = new Set();
+  let errorMgs: Array<string> = [];
+
+  const errorVal_bloodRelationDesc =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    bloodRelation === '1' &&
+    bloodRelationDesc === ''
+      ? 'Please describe your `Blood Relation to your partner.`'
+      : '';
+  if (errorVal_bloodRelationDesc.length > 0) {
+    errorMgs.push(errorVal_bloodRelationDesc);
+    errors.add('');
+  }
+
+  const errorVal_marriageNumb =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    marriedBefore === '1' &&
+    marriageNumb === ''
+      ? 'Please select your `Marriage Number`'
+      : '';
+  if (errorVal_marriageNumb.length > 0) {
+    errorMgs.push(errorVal_marriageNumb);
+    errors.add('');
+  }
+
+  const errorVal_partnershipState =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    (partnershipType === 'CIV' || partnershipType === 'DOM') &&
+    partnershipState === ''
+      ? `Please enter your 'Parnership's State/Country'`
+      : '';
+  if (errorVal_partnershipState.length > 0) {
+    errorMgs.push(errorVal_partnershipState);
+    errors.add('');
+  }
+
+  const errorVal_partnershipTypeDissolved =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    (partnershipType === 'CIV' || partnershipType === 'DOM') &&
+    partnershipTypeDissolved === ''
+      ? `Please select if your Parnership or Civil Union has been Dissolved`
+      : '';
+  if (errorVal_partnershipTypeDissolved.length > 0) {
+    errorMgs.push(errorVal_partnershipTypeDissolved);
+    errors.add('');
+  }
+
+  if (formErrors && formPageComplete === '1') {
+    if (refs && errorElemSrc && errors.size > 0) {
+      formErrors({
+        action: 'add',
+        ref: refs,
+        section: 'marriageBlock',
+      });
+    } else {
+      formErrors({
+        action: 'delete',
+        section: 'marriageBlock',
+      });
+    }
+  }
 
   const marrigeNumInput = (marriageNumb: string) => {
     return (
@@ -721,11 +899,7 @@ export const marriageBlock = (data: {
             msg:
               'This information is collected as required by Massachusetts State Law Chapter 46 Section 1.',
           }}
-          error={
-            formPageComplete && formPageComplete === '1' && marriageNumb === ''
-              ? 'Please select your `Marriage Number`'
-              : ''
-          }
+          error={errorVal_marriageNumb}
         />
       </div>
     );
@@ -738,6 +912,8 @@ export const marriageBlock = (data: {
         <div className="notice" />
       </h1>
 
+      {refs && <span ref={refs} />}
+
       <div css={RADIOGROUP_CONTAINER_STYLING}>
         <div css={ONE_AND_HALF_MARGINBOTTOM}>
           <RadioGroup
@@ -761,6 +937,7 @@ export const marriageBlock = (data: {
       {bloodRelation === '1' &&
         bloodRelDesc({
           partnerFlag,
+          errorStr: errorVal_bloodRelationDesc,
           bloodRelationDesc,
           handleBloodRelDescChange,
         })}
@@ -791,17 +968,258 @@ export const marriageBlock = (data: {
         })}
 
       {$partnershipType({
-        formPageComplete,
         partnerFlag,
         partnershipType,
         partnershipState,
         partnershipTypeDissolved,
+        errorVal_partnershipState,
         handleChange,
       })}
     </div>
   );
 };
 
+export const bloodRelDesc = (data: {
+  partnerFlag: string;
+  errorStr: string;
+  bloodRelationDesc: string;
+  handleBloodRelDescChange: ((e: any) => void) | undefined;
+}) => {
+  const {
+    partnerFlag,
+    errorStr,
+    bloodRelationDesc,
+    handleBloodRelDescChange,
+  } = data;
+
+  return (
+    <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
+      <TextInput
+        label="Blood Relation: If yes, how?"
+        name={`partner${partnerFlag}_bloodRelationDesc`}
+        value={bloodRelationDesc}
+        onChange={handleBloodRelDescChange}
+        disableLabelNoWrap={true}
+        maxLength={100}
+        softRequired={true}
+        error={errorStr}
+      />
+    </div>
+  );
+};
+
+export const parents = (data: {
+  formPageComplete?: '' | '1' | null;
+  partnerFlag: string;
+  parentA_Name: string;
+  parentA_Surname: string;
+  parentB_Name: string;
+  parentB_Surname: string;
+  additionalParent: string;
+  parentsMarriedAtBirth: string;
+  handleChange: ((e: any) => void) | undefined;
+  handleAdditionalParentChange: ((e: any) => void) | undefined;
+  formErrors?: (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement>;
+    section: string;
+  }) => any | undefined;
+  refs?: React.RefObject<HTMLSpanElement> | null;
+  errorElemSrc?: object;
+}) => {
+  const {
+    formPageComplete,
+    partnerFlag,
+    parentA_Name,
+    parentA_Surname,
+    parentB_Name,
+    parentB_Surname,
+    additionalParent,
+    parentsMarriedAtBirth,
+    handleChange,
+    handleAdditionalParentChange,
+    formErrors,
+    errorElemSrc,
+    refs,
+  } = data;
+  let errors = new Set();
+  let errorMgs: Array<string> = [];
+
+  const errorVal_parentA_Name =
+    formPageComplete && formPageComplete === '1' && parentA_Name === ''
+      ? `Please enter your 'Parent 1 - Names'`
+      : '';
+  if (errorVal_parentA_Name.length > 0) {
+    errorMgs.push(errorVal_parentA_Name);
+    errors.add('');
+  }
+
+  const errorVal_parentA_Surname =
+    formPageComplete && formPageComplete === '1' && parentA_Surname === ''
+      ? `Please enter your 'Parent 1 - Family Name at birth or adoption'`
+      : '';
+  if (errorVal_parentA_Surname.length > 0) {
+    errorMgs.push(errorVal_parentA_Surname);
+    errors.add('');
+  }
+
+  const errorVal_parentB_Name =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    additionalParent === '1' &&
+    parentB_Name === ''
+      ? `Please enter your 'Parent 2 - Names'`
+      : '';
+  if (errorVal_parentB_Name.length > 0) {
+    errorMgs.push(errorVal_parentB_Name);
+    errors.add('');
+  }
+
+  const errorVal_parentB_Surname =
+    formPageComplete &&
+    formPageComplete === '1' &&
+    additionalParent === '1' &&
+    parentB_Surname === ''
+      ? `Please enter your 'Parent 2 - Family Name at birth or adoption'`
+      : '';
+  if (errorVal_parentB_Surname.length > 0) {
+    errorMgs.push(errorVal_parentB_Surname);
+    errors.add('');
+  }
+
+  if (formErrors && formPageComplete === '1') {
+    if (refs && errorElemSrc && errors.size > 0) {
+      formErrors({
+        action: 'add',
+        ref: refs,
+        section: 'parents',
+      });
+    } else {
+      formErrors({
+        action: 'delete',
+        section: 'parents',
+      });
+    }
+  }
+
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING]}>
+        Parents
+        <div className="notice">
+          Please enter the full names of your parent(s) as they appear on your
+          birth certificate. It’s important to note that marriage licenses
+          contain details about your parents and are accessible as public
+          records, but they cannot be searched for by the general public.
+          {ToolTip({
+            icon: '?',
+            msg:
+              'This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.',
+          })}
+        </div>
+      </h1>
+
+      {refs && <span ref={refs} />}
+
+      <div
+        css={[
+          MARRIAGE_INTENTION_FORM_STYLING,
+          TWO_AND_HALF_MARGINBOTTOM,
+          NAME_FIELDS_BASIC_CONTAINER_STYLING,
+        ]}
+      >
+        <TextInput
+          label="Parent 1 - First Middle Last Name"
+          name={`partner${partnerFlag}_parentA_Name`}
+          value={parentA_Name}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          maxLength={38}
+          softRequired={true}
+          error={errorVal_parentA_Name}
+        />
+
+        <TextInput
+          label="Parent 1 - Family Name/Last Name At the time of their birth or adoption"
+          name={`partner${partnerFlag}_parentA_Surname`}
+          value={parentA_Surname}
+          onChange={handleChange}
+          disableLabelNoWrap={true}
+          maxLength={38}
+          optionalDescription={
+            'This information might be found on your birth certificate.'
+          }
+          softRequired={true}
+          error={errorVal_parentA_Surname}
+        />
+
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <RadioGroup
+            items={BOOL_RADIOGROUP}
+            name={`partner${partnerFlag}_additionalParent`}
+            checkedValue={additionalParent}
+            handleItemChange={handleAdditionalParentChange}
+            groupLabel="Do you have a second parent?"
+            className={`radio-group__label`}
+            softRequired={true}
+            hideLabel={false}
+          />
+        </div>
+
+        {additionalParent === '1' &&
+          $additionalParent({
+            partnerFlag,
+            parentB_Name,
+            parentB_Surname,
+            errorVal_parentB_Name,
+            errorVal_parentB_Surname,
+            handleChange,
+          })}
+
+        {parentsMarried({
+          partnerFlag,
+          parentsMarriedAtBirth,
+          handleChange,
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const parentsMarried = (data: {
+  partnerFlag: string;
+  parentsMarriedAtBirth: string;
+  handleChange: ((e: any) => void) | undefined;
+}) => {
+  const { partnerFlag, parentsMarriedAtBirth, handleChange } = data;
+
+  return (
+    <div css={SECTION_WRAPPER_STYLING}>
+      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
+        <div css={RADIOGROUP_CONTAINER_STYLING}>
+          <div css={ONE_AND_HALF_MARGINBOTTOM}>
+            <RadioGroup
+              items={BOOL_RADIOGROUP}
+              groupLabel="Were your parents married at the time of your birth?"
+              name={`partner${partnerFlag}_parentsMarriedAtBirth`}
+              checkedValue={parentsMarriedAtBirth}
+              handleItemChange={handleChange}
+              className={`radio-group__label`}
+              hideLabel={false}
+              softRequired={true}
+              toolTip={{
+                icon: '?',
+                msg:
+                  'This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const $lastMarriageStatus = (data: {
   partnerFlag: string;
   handleChange: ((e: any) => void) | undefined;
@@ -834,19 +1252,19 @@ export const $lastMarriageStatus = (data: {
 };
 
 export const $partnershipType = (data: {
-  formPageComplete?: string | null;
   partnerFlag: string;
   partnershipType: string;
   partnershipState: string;
   partnershipTypeDissolved: string;
+  errorVal_partnershipState: string;
   handleChange: ((e: any) => void) | undefined;
 }) => {
   const {
-    formPageComplete,
     partnerFlag,
     partnershipType,
     partnershipState,
     partnershipTypeDissolved,
+    errorVal_partnershipState,
     handleChange,
   } = data;
 
@@ -881,10 +1299,10 @@ export const $partnershipType = (data: {
       {partnershipType &&
         (partnershipType === 'CIV' || partnershipType === 'DOM') &&
         $dissolved({
-          formPageComplete,
           partnerFlag,
           partnershipState,
           partnershipTypeDissolved,
+          errorVal_partnershipState,
           handleChange,
         })}
     </div>
@@ -892,17 +1310,17 @@ export const $partnershipType = (data: {
 };
 
 const $dissolved = (data: {
-  formPageComplete?: string | null;
   partnerFlag: string;
   partnershipState: string;
   partnershipTypeDissolved: string;
+  errorVal_partnershipState: string;
   handleChange: ((e: any) => void) | undefined;
 }) => {
   const {
-    formPageComplete,
     partnerFlag,
     partnershipTypeDissolved,
     partnershipState,
+    errorVal_partnershipState,
     handleChange,
   } = data;
 
@@ -935,194 +1353,28 @@ const $dissolved = (data: {
         disableLabelNoWrap={true}
         maxLength={100}
         softRequired={true}
-        error={
-          formPageComplete &&
-          formPageComplete === '1' &&
-          partnershipState === ''
-            ? `Please enter your 'Patnershipt's State/Country'`
-            : ''
-        }
-      />
-    </div>
-  );
-};
-
-export const bloodRelDesc = (data: {
-  partnerFlag: string;
-  bloodRelationDesc: string;
-  handleBloodRelDescChange: ((e: any) => void) | undefined;
-}) => {
-  const { partnerFlag, bloodRelationDesc, handleBloodRelDescChange } = data;
-
-  return (
-    <div css={NAME_FIELDS_BASIC_CONTAINER_STYLING}>
-      <TextInput
-        label="Blood Relation: If yes, how?"
-        name={`partner${partnerFlag}_bloodRelationDesc`}
-        value={bloodRelationDesc}
-        onChange={handleBloodRelDescChange}
-        disableLabelNoWrap={true}
-        maxLength={100}
+        error={errorVal_partnershipState}
       />
     </div>
   );
 };
 
-export const parentsMarried = (data: {
-  partnerFlag: string;
-  parentsMarriedAtBirth: string;
-  handleChange: ((e: any) => void) | undefined;
-}) => {
-  const { partnerFlag, parentsMarriedAtBirth, handleChange } = data;
-
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <div css={[NAME_FIELDS_BASIC_CONTAINER_STYLING, HEADER_SPACING_STYLING]}>
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <div css={ONE_AND_HALF_MARGINBOTTOM}>
-            <RadioGroup
-              items={BOOL_RADIOGROUP}
-              groupLabel="Were your parents married at the time of your birth?"
-              name={`partner${partnerFlag}_parentsMarriedAtBirth`}
-              checkedValue={parentsMarriedAtBirth}
-              handleItemChange={handleChange}
-              className={`radio-group__label`}
-              hideLabel={false}
-              softRequired={true}
-              toolTip={{
-                icon: '?',
-                msg:
-                  'This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.',
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const parents = (data: {
-  formPageComplete?: string | null;
+export const $additionalParent = (data: {
   partnerFlag: string;
-  parentA_Name: string;
-  parentA_Surname: string;
   parentB_Name: string;
   parentB_Surname: string;
-  additionalParent: string;
-  parentsMarriedAtBirth: string;
+  errorVal_parentB_Name: string;
+  errorVal_parentB_Surname: string;
   handleChange: ((e: any) => void) | undefined;
-  handleAdditionalParentChange: ((e: any) => void) | undefined;
 }) => {
   const {
-    formPageComplete,
     partnerFlag,
-    parentA_Name,
-    parentA_Surname,
     parentB_Name,
     parentB_Surname,
-    additionalParent,
-    parentsMarriedAtBirth,
+    errorVal_parentB_Name,
+    errorVal_parentB_Surname,
     handleChange,
-    handleAdditionalParentChange,
   } = data;
-  return (
-    <div css={SECTION_WRAPPER_STYLING}>
-      <h1 css={[PARTNERFORM_SECTION_HEADING_STYLING]}>
-        Parents
-        <div className="notice">
-          Please enter the full names of your parent(s) as they appear on your
-          birth certificate. It’s important to note that marriage licenses
-          contain details about your parents and are accessible as public
-          records, but they cannot be searched for by the general public.
-          {ToolTip({
-            icon: '?',
-            msg:
-              'This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.',
-          })}
-        </div>
-      </h1>
-
-      <div
-        css={[
-          MARRIAGE_INTENTION_FORM_STYLING,
-          TWO_AND_HALF_MARGINBOTTOM,
-          NAME_FIELDS_BASIC_CONTAINER_STYLING,
-        ]}
-      >
-        <TextInput
-          label="Parent 1 - First Middle Last Name"
-          name={`partner${partnerFlag}_parentA_Name`}
-          value={parentA_Name}
-          onChange={handleChange}
-          disableLabelNoWrap={true}
-          maxLength={38}
-          softRequired={true}
-          error={
-            formPageComplete && formPageComplete === '1' && parentA_Name === ''
-              ? `Please enter your 'Parent 1 - Names'`
-              : ''
-          }
-        />
-
-        <TextInput
-          label="Parent 1 - Family Name/Last Name At the time of their birth or adoption"
-          name={`partner${partnerFlag}_parentA_Surname`}
-          value={parentA_Surname}
-          onChange={handleChange}
-          disableLabelNoWrap={true}
-          maxLength={38}
-          optionalDescription={
-            'This information might be found on your birth certificate.'
-          }
-          softRequired={true}
-          error={
-            formPageComplete &&
-            formPageComplete === '1' &&
-            parentA_Surname === ''
-              ? `Please enter your 'Parent 1 - Family Name at birth or adoption'`
-              : ''
-          }
-        />
-
-        <div css={RADIOGROUP_CONTAINER_STYLING}>
-          <RadioGroup
-            items={BOOL_RADIOGROUP}
-            name={`partner${partnerFlag}_additionalParent`}
-            checkedValue={additionalParent}
-            handleItemChange={handleAdditionalParentChange}
-            groupLabel="Do you have a second parent?"
-            className={`radio-group__label`}
-            softRequired={true}
-            hideLabel={false}
-          />
-        </div>
-
-        {additionalParent === '1' &&
-          $additionalParent({
-            partnerFlag,
-            parentB_Name,
-            parentB_Surname,
-            handleChange,
-          })}
-
-        {parentsMarried({
-          partnerFlag,
-          parentsMarriedAtBirth,
-          handleChange,
-        })}
-      </div>
-    </div>
-  );
-};
-
-export const $additionalParent = (data: {
-  partnerFlag: string;
-  parentB_Name: string;
-  parentB_Surname: string;
-  handleChange: ((e: any) => void) | undefined;
-}) => {
-  const { partnerFlag, parentB_Name, parentB_Surname, handleChange } = data;
   return (
     <>
       <TextInput
@@ -1132,6 +1384,8 @@ export const $additionalParent = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         maxLength={38}
+        softRequired={true}
+        error={errorVal_parentB_Name}
       />
 
       <TextInput
@@ -1144,7 +1398,12 @@ export const $additionalParent = (data: {
         optionalDescription={
           "This should be your parent's last name at the time of their birth or adoption."
         }
+        softRequired={true}
+        error={errorVal_parentB_Surname}
       />
     </>
   );
 };
+
+export const findMarriageNumb = (val: string) =>
+  MARRIAGE_COUNT.find(entry => entry.value === val);
diff --git a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
index ade1a428e..7e8c253bb 100644
--- a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
+++ b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
@@ -1,4 +1,242 @@
 import { COUNTRIES, US_STATES } from '../../../utils/data';
+import { MARRIAGE_COUNT, PARTNERSHIP_TYPE } from '../forms/inputData';
+
+/**
+ * @name retPartnerRequestInformation
+ * @description Destructure Data Obj/Value based on partner (form) page (Flag aka A|B)
+ * @param {string} partnerFlag
+ * @param {object} requestInformation
+ * @returns Object - Destructure object
+ * @example retPartnerRequestInformation('A', { ... MarriageIntentionCertObj })
+ */
+export const retPartnerRequestInformation = (
+  partnerFlag: string,
+  requestInformation: any
+) => {
+  let retObj = {
+    lastName: '',
+    firstName: '',
+    dob: '',
+    age: '',
+    surName: '',
+    useSurname: '',
+    occupation: '',
+    bloodRelation: '',
+    bloodRelationDesc: '',
+    birthCity: '',
+    birthState: '',
+    birthCountry: '',
+    residenceAddress: '',
+    residenceCountry: '',
+    residenceCity: '',
+    residenceZip: '',
+    residenceState: '',
+    parentsMarriedAtBirth: '',
+    parentA_Name: '',
+    parentA_Surname: '',
+    parentB_Name: '',
+    parentB_Surname: '',
+    partnershipType: '',
+    partnershipTypeDissolved: '',
+    partnershipState: '',
+    marriageNumb: '',
+    marriedBefore: '',
+    lastMarriageStatus: '',
+    additionalParent: '',
+  };
+
+  retObj.firstName = requestInformation[`partner${partnerFlag}_firstName`];
+  retObj.lastName = requestInformation[`partner${partnerFlag}_lastName`];
+  retObj.dob = requestInformation[`partner${partnerFlag}_dob`];
+  retObj.age = requestInformation[`partner${partnerFlag}_age`];
+  retObj.surName = requestInformation[`partner${partnerFlag}_surName`];
+  retObj.useSurname = requestInformation[`partner${partnerFlag}_useSurname`];
+  retObj.occupation = requestInformation[`partner${partnerFlag}_occupation`];
+  retObj.bloodRelation =
+    requestInformation[`partner${partnerFlag}_bloodRelation`];
+  retObj.bloodRelationDesc;
+  requestInformation[`partner${partnerFlag}_bloodRelationDesc`];
+  retObj.birthCity = requestInformation[`partner${partnerFlag}_birthCity`];
+  retObj.birthState = requestInformation[`partner${partnerFlag}_birthState`];
+  retObj.birthCountry =
+    requestInformation[`partner${partnerFlag}_birthCountry`];
+  retObj.residenceAddress =
+    requestInformation[`partner${partnerFlag}_residenceAddress`];
+  retObj.residenceCountry =
+    requestInformation[`partner${partnerFlag}_residenceCountry`];
+  retObj.residenceCity =
+    requestInformation[`partner${partnerFlag}_residenceCity`];
+  retObj.residenceZip =
+    requestInformation[`partner${partnerFlag}_residenceZip`];
+  retObj.residenceState =
+    requestInformation[`partner${partnerFlag}_residenceState`];
+  retObj.parentsMarriedAtBirth =
+    requestInformation[`partner${partnerFlag}_parentsMarriedAtBirth`];
+  retObj.parentA_Name =
+    requestInformation[`partner${partnerFlag}_parentA_Name`];
+  retObj.parentA_Surname =
+    requestInformation[`partner${partnerFlag}_parentA_Surname`];
+  retObj.parentB_Name =
+    requestInformation[`partner${partnerFlag}_parentB_Name`];
+  retObj.parentB_Surname =
+    requestInformation[`partner${partnerFlag}_parentB_Surname`];
+  retObj.partnershipType =
+    requestInformation[`partner${partnerFlag}_partnershipType`];
+  retObj.partnershipTypeDissolved =
+    requestInformation[`partner${partnerFlag}_partnershipTypeDissolved`];
+  retObj.partnershipState =
+    requestInformation[`partner${partnerFlag}_partnershipState`];
+  retObj.marriageNumb =
+    requestInformation[`partner${partnerFlag}_marriageNumb`];
+  retObj.marriedBefore =
+    requestInformation[`partner${partnerFlag}_marriedBefore`];
+  retObj.lastMarriageStatus =
+    requestInformation[`partner${partnerFlag}_lastMarriageStatus`];
+  retObj.additionalParent =
+    requestInformation[`partner${partnerFlag}_additionalParent`];
+
+  return retObj;
+};
+
+/**
+ * @name isPartnerFormPageComplete
+ * @param {string} partnerFlag Partner Form Page A | B
+ * @param requestInformation {object} MarriageIntentionCertificateRequest Instance
+ * @returns {boolean} Boolean - true | false
+ */
+export const isPartnerFormPageComplete = (
+  partnerFlag: string,
+  requestInformation: object
+): boolean => {
+  const data = retPartnerRequestInformation(partnerFlag, requestInformation);
+
+  let bloodRelReq = true;
+  let useSurnameReq = true;
+  let additionalParentsReq = true;
+  let marriedBeforeReq = true;
+  let partnership_dissolved = true;
+  let lastMarriageStatusReq = true;
+  let birthStateZip = true;
+  let partnershipStateBool = true;
+  let residenceZipBool = true;
+  let residenceStateBool = true;
+  let additionalParent_Name = true;
+  let additionalParent_Surname = true;
+
+  if (data.residenceCountry === 'USA' && data.residenceState === '') {
+    residenceStateBool = false;
+  }
+
+  if (data.residenceCountry === 'USA' && data.residenceZip === '') {
+    residenceZipBool = false;
+  }
+
+  if (
+    data.partnershipType !== PARTNERSHIP_TYPE[0].value &&
+    data.residenceState &&
+    typeof data.residenceState === 'string' &&
+    data.partnershipState.length < 2
+  ) {
+    partnershipStateBool = false;
+  }
+
+  const bloodRelDescReq =
+    data.bloodRelation && data.bloodRelation == '1' ? true : false;
+
+  if (bloodRelDescReq && data.bloodRelationDesc.length < 1) {
+    bloodRelReq = false;
+  }
+
+  const surNameTextReq =
+    data.useSurname && data.useSurname === '1' ? true : false;
+
+  if ((surNameTextReq && data.surName.length < 1) || data.useSurname == '') {
+    useSurnameReq = false;
+  }
+
+  const addParentsReq =
+    data.additionalParent && data.additionalParent == '1' ? true : false;
+
+  if (
+    (addParentsReq &&
+      (data.parentB_Name.length < 1 || data.parentB_Surname.length < 1)) ||
+    data.additionalParent == ''
+  ) {
+    additionalParentsReq = false;
+  }
+
+  if (data.additionalParent == '1' && data.parentB_Name.length < 1)
+    additionalParent_Name = false;
+
+  if (data.additionalParent == '1' && data.parentB_Surname.length < 1)
+    additionalParent_Surname = false;
+
+  if (data.birthCountry === 'USA') {
+    birthStateZip = data.birthState.length > 0 ? true : false;
+  }
+
+  const marriedBeforeBool = data.marriedBefore === '1' ? true : false;
+
+  if (data.marriedBefore === '') marriedBeforeReq = false;
+  if (marriedBeforeBool && data.marriageNumb === '') marriedBeforeReq = false;
+
+  const getMarriageNumb = (): { label: string; value: string } => {
+    let retOb = MARRIAGE_COUNT.find(entry => entry.value == data.marriageNumb);
+
+    if (!retOb) retOb = { label: '', value: '' };
+
+    return retOb;
+  };
+
+  const marriageNumbBool: {
+    label: string;
+    value: string;
+  } = getMarriageNumb();
+
+  if (marriageNumbBool && marriageNumbBool.value !== '') {
+    if (data.lastMarriageStatus === '') {
+      lastMarriageStatusReq = false;
+    }
+  }
+
+  if (data.partnershipType !== PARTNERSHIP_TYPE[0].value) {
+    if (data.partnershipTypeDissolved === '') {
+      partnership_dissolved = false;
+    }
+  }
+
+  const is_Complete = !!(
+    data.lastName &&
+    data.firstName &&
+    data.dob &&
+    data.age &&
+    data.occupation &&
+    data.bloodRelation &&
+    data.birthCity &&
+    data.birthCountry &&
+    data.residenceAddress &&
+    data.residenceCountry &&
+    data.residenceCity &&
+    data.parentsMarriedAtBirth &&
+    data.partnershipType &&
+    data.parentA_Name &&
+    data.parentA_Surname &&
+    partnership_dissolved &&
+    lastMarriageStatusReq &&
+    partnershipStateBool &&
+    birthStateZip &&
+    bloodRelReq &&
+    additionalParentsReq &&
+    marriedBeforeReq &&
+    useSurnameReq &&
+    residenceZipBool &&
+    residenceStateBool &&
+    additionalParent_Name &&
+    additionalParent_Surname
+  );
+
+  return is_Complete;
+};
 
 /**
  * @name adjustForTimezone
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index 69bdb5d74..69e5f2977 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -27,7 +27,7 @@ import ReviewForms from './forms/reviewForms';
 import ContactInfo from './forms/contactInfo';
 import Receipt from './forms/receipt';
 
-// import { handleFormPageComplete$ } from '../marriageintention/forms/eventHandlers';
+import { isPartnerFormPageComplete } from '../marriageintention/helpers/formUtils';
 
 interface InitialProps {
   currentStep: MarriageIntentionStep;
@@ -61,6 +61,8 @@ interface State {
    */
   currentStep: MarriageIntentionStep;
   completedSteps: Set<number>;
+  allowProceed: boolean;
+  errorElemSrc: object;
 }
 
 /**
@@ -123,17 +125,45 @@ export default class IndexPage extends React.Component<Props, State> {
       return null;
     }
   };
+  // REFs Def
+  partnerA_nameFieldsRef: React.RefObject<HTMLSpanElement>;
+  partnerA_residenceRef: React.RefObject<HTMLSpanElement>;
+  partnerA_marriageRef: React.RefObject<HTMLSpanElement>;
+  partnerA_datePlaceOfBirthRef: React.RefObject<HTMLSpanElement>;
+  partnerA_parentsRef: React.RefObject<HTMLSpanElement>;
+
+  partnerB_nameFieldsRef: React.RefObject<HTMLSpanElement>;
+  partnerB_residenceRef: React.RefObject<HTMLSpanElement>;
+  partnerB_marriageRef: React.RefObject<HTMLSpanElement>;
+  partnerB_datePlaceOfBirthRef: React.RefObject<HTMLSpanElement>;
+  partnerB_parentsRef: React.RefObject<HTMLSpanElement>;
 
   constructor(props: Props) {
     super(props);
 
+    // STATE
     this.state = {
       localMarriageIntentionCertificateRequest: props.marriageIntentionCertificateRequest.clone(),
       globalMarriageIntentionCertificateRequest:
         props.marriageIntentionCertificateRequest,
       currentStep: props.currentStep,
       completedSteps: this.props.completedSteps || new Set([0]),
+      allowProceed: true,
+      errorElemSrc: {},
     };
+
+    // REFs Inits
+    this.partnerA_nameFieldsRef = React.createRef();
+    this.partnerA_residenceRef = React.createRef();
+    this.partnerA_marriageRef = React.createRef();
+    this.partnerA_datePlaceOfBirthRef = React.createRef();
+    this.partnerA_parentsRef = React.createRef();
+
+    this.partnerB_nameFieldsRef = React.createRef();
+    this.partnerB_residenceRef = React.createRef();
+    this.partnerB_marriageRef = React.createRef();
+    this.partnerB_datePlaceOfBirthRef = React.createRef();
+    this.partnerB_parentsRef = React.createRef();
   }
 
   componentDidMount() {
@@ -150,49 +180,6 @@ export default class IndexPage extends React.Component<Props, State> {
     }
   }
 
-  private advanceQuestion = (
-    modifiedRequest: MarriageIntentionCertificateRequest
-    // partnerFlag?: string
-  ) => {
-    const { currentStep, marriageIntentionCertificateRequest } = this.props;
-
-    const {
-      localMarriageIntentionCertificateRequest,
-      completedSteps,
-    } = this.state;
-    const { steps } = localMarriageIntentionCertificateRequest;
-
-    if (marriageIntentionCertificateRequest !== modifiedRequest) {
-      marriageIntentionCertificateRequest.updateFrom(modifiedRequest);
-    }
-
-    // Have to do this after updateFrom because the answers to questions can
-    // affect the steps.
-    const newSteps = marriageIntentionCertificateRequest.steps;
-    const currentIndex = newSteps.indexOf(currentStep);
-
-    if (currentIndex < 0) {
-      throw new Error(`Step ${currentStep} not found in new steps`);
-    }
-
-    this.gaEventActionAndLabel();
-
-    const nextStep = newSteps[currentIndex + 1];
-    this.setState({
-      completedSteps: new Set([...completedSteps, steps.indexOf(nextStep)]),
-    });
-
-    // if (partnerFlag && partnerFlag.length > 0) {
-    //   handleFormPageComplete$({
-    //     partnerFlag,
-    //     val: true,
-    //     certObj: modifiedRequest,
-    //   });
-    // }
-
-    Router.push(`/marriageintention?step=${nextStep}`);
-  };
-
   // Determine correct GA Action and Label for the events to be sent during
   // each step in the questions flow.
   private gaEventActionAndLabel = (): void => {
@@ -255,6 +242,40 @@ export default class IndexPage extends React.Component<Props, State> {
     this.props.marriageIntentionCertificateRequest.clearCertificateRequest();
   };
 
+  private advanceQuestion = (
+    modifiedRequest: MarriageIntentionCertificateRequest
+  ) => {
+    const { currentStep, marriageIntentionCertificateRequest } = this.props;
+
+    const {
+      localMarriageIntentionCertificateRequest,
+      completedSteps,
+    } = this.state;
+    const { steps } = localMarriageIntentionCertificateRequest;
+
+    if (marriageIntentionCertificateRequest !== modifiedRequest) {
+      marriageIntentionCertificateRequest.updateFrom(modifiedRequest);
+    }
+
+    // Have to do this after updateFrom because the answers to questions can
+    // affect the steps.
+    const newSteps = marriageIntentionCertificateRequest.steps;
+    const currentIndex = newSteps.indexOf(currentStep);
+
+    if (currentIndex < 0) {
+      throw new Error(`Step ${currentStep} not found in new steps`);
+    }
+
+    this.gaEventActionAndLabel();
+
+    const nextStep = newSteps[currentIndex + 1];
+    this.setState({
+      completedSteps: new Set([...completedSteps, steps.indexOf(nextStep)]),
+    });
+
+    Router.push(`/marriageintention?step=${nextStep}`);
+  };
+
   private stepBackOneQuestion = (): void => {
     const {
       marriageIntentionCertificateRequest: { steps },
@@ -268,13 +289,76 @@ export default class IndexPage extends React.Component<Props, State> {
     Router.push(`/marriageintention?step=${steps[newIndex]}`);
   };
 
-  private progressNavClick = (i: string | number) => {
+  private formErrors = (data: {
+    action: string;
+    ref?: React.RefObject<HTMLSpanElement> | null;
+    section: string;
+  }) => {
+    const { action, ref, section } = data;
+    if (action === 'add') {
+      this.state.errorElemSrc[section] = ref;
+    } else {
+      delete this.state.errorElemSrc[section];
+    }
+  };
+
+  private progressNavClick = (i: number) => {
     const {
       marriageIntentionCertificateRequest: { steps },
+      currentStep,
     } = this.props;
-    Router.push(`/marriageintention?step=${steps[i]}`);
+    const direction = i < steps.indexOf(currentStep) ? '-' : '+';
+    let partnerFlag = '';
+
+    if (currentStep === 'partnerFormA') partnerFlag = 'A';
+    if (currentStep === 'partnerFormB') partnerFlag = 'B';
+
+    if (partnerFlag.length > 0 && direction === '+') {
+      const isCompleteRet = this.isComplete(
+        partnerFlag,
+        this.state.localMarriageIntentionCertificateRequest
+      );
+      if (
+        isCompleteRet &&
+        Object.entries(this.state.errorElemSrc).length === 0
+      ) {
+        this.setState({
+          errorElemSrc: {},
+        });
+        Router.push(`/marriageintention?step=${steps[i]}`);
+      } else {
+        if (this.state.errorElemSrc['nameFields']) {
+          this.scrollToElem(this.state.errorElemSrc['nameFields']);
+        } else if (this.state.errorElemSrc['datePlaceOfBirth']) {
+          this.scrollToElem(this.state.errorElemSrc['datePlaceOfBirth']);
+        } else if (this.state.errorElemSrc['residence']) {
+          this.scrollToElem(this.state.errorElemSrc['residence']);
+        } else if (this.state.errorElemSrc['marriageBlock']) {
+          this.scrollToElem(this.state.errorElemSrc['marriageBlock']);
+        } else if (this.state.errorElemSrc['parents']) {
+          this.scrollToElem(this.state.errorElemSrc['parents']);
+        }
+      }
+    } else {
+      Router.push(`/marriageintention?step=${steps[i]}`);
+    }
   };
 
+  private scrollToElem = (ref: HTMLSpanElement) => {
+    window.scrollTo({
+      top: ref['current'].offsetTop,
+      behavior: 'smooth',
+    });
+  };
+
+  private isComplete(
+    partnerFlag: string,
+    { requestInformation }: MarriageIntentionCertificateRequest
+  ): boolean {
+    const advance = isPartnerFormPageComplete(partnerFlag, requestInformation);
+    return advance;
+  }
+
   render() {
     const { currentStep } = this.props;
     const {
@@ -283,7 +367,6 @@ export default class IndexPage extends React.Component<Props, State> {
     } = this.state;
     const { steps, labels } = localMarriageIntentionCertificateRequest;
 
-    // let isStepComplete: boolean = false;
     let questionsEl: React.ReactNode = null;
 
     const $defaultUI = (
@@ -339,6 +422,15 @@ export default class IndexPage extends React.Component<Props, State> {
               handleStepBack={this.stepBackOneQuestion}
               partnerLabel={'A'}
               partnerNum={1}
+              formErrors={this.formErrors}
+              refObjs={{
+                nameFieldsRef: this.partnerA_nameFieldsRef,
+                residenceRef: this.partnerA_residenceRef,
+                marriageRef: this.partnerA_marriageRef,
+                datePlaceOfBirthRef: this.partnerA_datePlaceOfBirthRef,
+                parentsRef: this.partnerA_parentsRef,
+              }}
+              errorElemSrc={this.state.errorElemSrc}
             />
 
             {emailContentBlock()}
@@ -359,6 +451,15 @@ export default class IndexPage extends React.Component<Props, State> {
               handleStepBack={this.stepBackOneQuestion}
               partnerLabel={'B'}
               partnerNum={2}
+              formErrors={this.formErrors}
+              refObjs={{
+                nameFieldsRef: this.partnerB_nameFieldsRef,
+                residenceRef: this.partnerB_residenceRef,
+                marriageRef: this.partnerB_marriageRef,
+                datePlaceOfBirthRef: this.partnerB_datePlaceOfBirthRef,
+                parentsRef: this.partnerA_parentsRef,
+              }}
+              errorElemSrc={this.state.errorElemSrc}
             />
 
             {emailContentBlock()}
diff --git a/services-js/registry-certs/client/types.ts b/services-js/registry-certs/client/types.ts
index b80cf145e..5c0c338a5 100644
--- a/services-js/registry-certs/client/types.ts
+++ b/services-js/registry-certs/client/types.ts
@@ -189,7 +189,7 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerA_lastMarriageStatus: string;
   partnerA_marriedBefore: string;
   partnerA_additionalParent: string;
-  partnerA_formPageComplete: string;
+  partnerA_formPageComplete: '' | '1' | null;
 
   partnerB_fullName: string;
   partnerB_firstMiddleName: string;
@@ -227,7 +227,7 @@ export type MarriageIntentionCertificateRequestInformation = {
   partnerB_lastMarriageStatus: string;
   partnerB_marriedBefore: string;
   partnerB_additionalParent: string;
-  partnerB_formPageComplete: string;
+  partnerB_formPageComplete: '' | '1' | null;
 
   email: string;
   emailConfirm: string;

From c62aca2e985cfc448e6b93ed4211f746a12bc74f Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Fri, 19 Apr 2024 20:14:49 -0400
Subject: [PATCH 15/28]  DIG-4059B: Navigation Bar and Next Button behavior is
 aligned

---
 .../src/components/StatusModal.stories.tsx    |  14 ++
 .../src/components/StatusModal.tsx            |  33 ++++-
 services-js/access-boston/src/pages/mfa.tsx   |  10 +-
 .../registry-certs/client/StatusModal.tsx     |  81 +++++++++++
 .../marriageintention/forms/partnerFormA.tsx  |  27 +++-
 .../marriageintention/forms/partnerFormB.tsx  |  21 ++-
 .../client/marriageintention/index.tsx        | 134 ++++++++++++++----
 .../MarriageIntentionCertificateRequest.ts    |   2 -
 services-js/registry-certs/client/types.ts    |   1 -
 9 files changed, 277 insertions(+), 46 deletions(-)
 create mode 100644 services-js/registry-certs/client/StatusModal.tsx

diff --git a/modules-js/react-fleet/src/components/StatusModal.stories.tsx b/modules-js/react-fleet/src/components/StatusModal.stories.tsx
index d5fe55411..20b926466 100644
--- a/modules-js/react-fleet/src/components/StatusModal.stories.tsx
+++ b/modules-js/react-fleet/src/components/StatusModal.stories.tsx
@@ -22,4 +22,18 @@ storiesOf('Notifications|Modals/StatusModal', module)
         Feel free to try again. If this keeps happening, let someone know.
       </p>
     </StatusModal>
+  ))
+  .add('hide top border decoration', () => (
+    <StatusModal
+      message="Something went wrong!"
+      error
+      // onClose={action('close')}
+      hideTopBorderDecoration={true}
+      absoluteCloseBtn={action('close')}
+    >
+      <p className="t--s400">
+        If you edit your information you must click save and continue to save
+        your changes
+      </p>
+    </StatusModal>
   ));
diff --git a/modules-js/react-fleet/src/components/StatusModal.tsx b/modules-js/react-fleet/src/components/StatusModal.tsx
index e88cd63b5..501fb9e6b 100644
--- a/modules-js/react-fleet/src/components/StatusModal.tsx
+++ b/modules-js/react-fleet/src/components/StatusModal.tsx
@@ -10,13 +10,15 @@ import { css, jsx } from '@emotion/core';
 
 interface Props {
   children?: ReactNode | ReactNodeArray;
-  message: string;
+  message?: string;
   /** If true, the message is rendered in red. */
   error?: boolean;
   /** If true, shows a waiting cursor. */
   waiting?: boolean;
   /** If provided, adds a "Close" button that calls this function when clicked. */
   onClose?: (ev: MouseEvent) => void;
+  hideTopBorderDecoration?: boolean;
+  absoluteCloseBtn?: (ev: MouseEvent | TouchEvent) => void;
 }
 
 const MODAL_STYLE = css({
@@ -58,19 +60,40 @@ export default class StatusModal extends React.Component<Props> {
   }
 
   render(): React.ReactNode {
-    const { children, message, error, waiting, onClose } = this.props;
+    const {
+      children,
+      message,
+      error,
+      waiting,
+      onClose,
+      hideTopBorderDecoration,
+      absoluteCloseBtn,
+    } = this.props;
 
     const alertHolder = document.getElementById(StatusModal.ALERT_CONTAINER_ID);
 
+    const topBorderDecorationCss = !hideTopBorderDecoration
+      ? ` br br-t400`
+      : '';
+
     const alertContent = (
       <div className="md" css={waiting && WAITING_MODAL_STYLE}>
-        <div className="md-c br br-t400" css={MODAL_STYLE}>
+        <div className={`md-c${topBorderDecorationCss}`} css={MODAL_STYLE}>
+          {absoluteCloseBtn && (
+            <button className="md-cb" type="button" onClick={onClose} autoFocus>
+              Close
+            </button>
+          )}
           <div className="md-b p-a300">
-            <div className={`t--intro ${error ? 't--err' : ''}`}>{message}</div>
+            {message && (
+              <div className={`t--intro ${error ? 't--err' : ''}`}>
+                {message}
+              </div>
+            )}
 
             {children}
 
-            {onClose && (
+            {onClose && !absoluteCloseBtn && (
               <div className="m-t300 ta-r">
                 <button
                   className="btn btn--sm btn--100"
diff --git a/services-js/access-boston/src/pages/mfa.tsx b/services-js/access-boston/src/pages/mfa.tsx
index 8249802c8..c1e84c392 100644
--- a/services-js/access-boston/src/pages/mfa.tsx
+++ b/services-js/access-boston/src/pages/mfa.tsx
@@ -143,10 +143,12 @@ export default class RegisterMfaPage extends React.Component<Props, State> {
       // Stopping the submission process closes the modal.
       setSubmitting(false);
 
-      this.setState({
-        status: VerificationStatus.NONE,
-        verificationError: e.toString(),
-      });
+      if (e) {
+        this.setState({
+          status: VerificationStatus.NONE,
+          verificationError: e.toString(),
+        });
+      }
     }
   };
 
diff --git a/services-js/registry-certs/client/StatusModal.tsx b/services-js/registry-certs/client/StatusModal.tsx
new file mode 100644
index 000000000..38f9852ff
--- /dev/null
+++ b/services-js/registry-certs/client/StatusModal.tsx
@@ -0,0 +1,81 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/core';
+import { ReactNode, ReactNodeArray } from 'react';
+
+interface Props {
+  children: ReactNode | ReactNodeArray;
+  header?: string;
+  confirmBtnText?: string;
+  error?: boolean;
+  hideTopBorderDecoration?: boolean;
+  closeModalHandler?: (val?: boolean) => {};
+  confirmHandler?: (dest: string) => void | undefined;
+}
+
+export default function StatusModal(props: Props) {
+  const {
+    children,
+    header,
+    confirmBtnText,
+    error,
+    hideTopBorderDecoration,
+    closeModalHandler,
+    confirmHandler,
+  } = props;
+
+  const topBorderDecorationCss = hideTopBorderDecoration ? '' : ` br br-t400`;
+
+  const closeHandler = () => {
+    if (closeModalHandler) closeModalHandler(false);
+  };
+
+  let $closeBtnProps = {
+    className: 'md-cb',
+  };
+  if (closeModalHandler) $closeBtnProps['onClick'] = closeHandler;
+
+  let $confirmBtnProps = {
+    className: 'btn btn--sm btn--100',
+  };
+  if (confirmHandler) $confirmBtnProps['onClick'] = confirmHandler;
+
+  return (
+    <div className="md">
+      <div className={`md-c${topBorderDecorationCss}`} css={MODAL_STYLE}>
+        {closeModalHandler && (
+          <button {...Object.assign({}, $closeBtnProps)}>Close</button>
+        )}
+        <div className="md-b p-a300">
+          {header && (
+            <div className={`t--intro ${error ? 't--err' : ''}`}>{header}</div>
+          )}
+
+          {children}
+
+          {confirmHandler && (
+            <div className="m-t300 ta-r">
+              <button {...Object.assign({}, $confirmBtnProps)}>
+                {confirmBtnText && `${confirmBtnText}`}
+                {!confirmBtnText && `Close`}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MODAL_STYLE = css(`
+  padding-top: 0;
+  max-width: 500px;
+  top: 33%;
+  margin-right: auto;
+  margin-left: auto;
+
+  button {
+    border: 0;
+    cursor: pointer;
+  }
+`);
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index 3a7381185..1e40327d4 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -36,8 +36,8 @@ import { isPartnerFormPageComplete } from '../../marriageintention/helpers/formU
 
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
-  handleProceed: (ev: MouseEvent) => void;
-  handleStepBack: (ev: MouseEvent) => void;
+  handleProceed: (ev: MouseEvent | TouchEvent) => void;
+  handleStepBack: (ev: MouseEvent | TouchEvent) => void;
   formErrors: (data: {
     action: string;
     ref?: React.RefObject<HTMLSpanElement> | null;
@@ -53,6 +53,9 @@ interface Props {
   errorElemSrc: object;
   partnerNum?: number | string;
   partnerLabel: string;
+  disclaimerModalConfirmed: (dest?: string) => void | undefined;
+  toggleDisclaimerModal?: (val?: boolean) => {};
+  backTrackingDisclaimer: boolean;
 }
 
 @observer
@@ -341,6 +344,16 @@ export default class PartnerForm extends Component<Props> {
     this.props.handleProceed(certObj);
   };
 
+  private handleStepBack = (ev: MouseEvent | TouchEvent) => {
+    const { toggleDisclaimerModal, backTrackingDisclaimer } = this.props;
+
+    if (backTrackingDisclaimer === false && toggleDisclaimerModal) {
+      toggleDisclaimerModal(true);
+    } else {
+      this.props.handleStepBack(ev);
+    }
+  };
+
   // RENDER ALL UI
   public render() {
     const {
@@ -385,19 +398,21 @@ export default class PartnerForm extends Component<Props> {
 
     const partner_num = partnerNum ? partnerNum : partnerLabel;
 
-    // console.log(`this.props.refObjs: `, this.props.refObjs, this.props);
-
     return (
       <QuestionComponent
         handleProceed={this.advanceForm.bind(
           this,
           marriageIntentionCertificateRequest
         )}
-        handleStepBack={this.props.handleStepBack}
         allowProceed={PartnerForm.isComplete(
           marriageIntentionCertificateRequest
         )}
-        nextButtonText={'NEXT'}
+        handleStepBack={this.handleStepBack}
+        nextButtonText={
+          partnerA_formPageComplete && partnerA_formPageComplete === '1'
+            ? 'Save & Continue'
+            : 'NEXT'
+        }
       >
         <FieldsetComponent
           legendText={
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index c3c6af418..3e8c91b4d 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -53,6 +53,10 @@ interface Props {
   errorElemSrc: object;
   partnerLabel: string;
   partnerNum?: number | string;
+  showDisclaimer?: boolean;
+  backTrackingDisclaimer?: boolean;
+  disclaimerModalHandler: () => void;
+  toggleDisclaimerModal: (val?: boolean) => {};
 }
 
 @observer
@@ -341,6 +345,15 @@ export default class PartnerForm extends Component<Props> {
     this.props.handleProceed(certObj);
   };
 
+  private handleStepBack = (ev: MouseEvent) => {
+    if (this.props.backTrackingDisclaimer === false) {
+      this.props.toggleDisclaimerModal();
+      // this.props.handleStepBack(ev);
+    } else {
+      this.props.handleStepBack(ev);
+    }
+  };
+
   // RENDER ALL UI
   public render() {
     const {
@@ -391,11 +404,15 @@ export default class PartnerForm extends Component<Props> {
           this,
           marriageIntentionCertificateRequest
         )}
-        handleStepBack={this.props.handleStepBack}
         allowProceed={PartnerForm.isComplete(
           marriageIntentionCertificateRequest
         )}
-        nextButtonText={'NEXT'}
+        handleStepBack={this.handleStepBack}
+        nextButtonText={
+          partnerB_formPageComplete && partnerB_formPageComplete === '1'
+            ? 'Save & Continue'
+            : 'NEXT'
+        }
       >
         <FieldsetComponent
           legendText={
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index 69e5f2977..544e5fd3f 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -20,6 +20,8 @@ import PageWrapper from '../PageWrapper';
 import { INTENTION } from './styling';
 
 import { ContactForm } from '@cityofboston/react-fleet';
+import StatusModal from '../StatusModal';
+
 import Instructions from './forms/instructions';
 import PartnerFormA from './forms/partnerFormA';
 import PartnerFormB from './forms/partnerFormB';
@@ -63,6 +65,9 @@ interface State {
   completedSteps: Set<number>;
   allowProceed: boolean;
   errorElemSrc: object;
+  backTrackingDisclaimer: boolean;
+  showDisclaimer: boolean;
+  contactFormComplete: boolean;
 }
 
 /**
@@ -150,6 +155,9 @@ export default class IndexPage extends React.Component<Props, State> {
       completedSteps: this.props.completedSteps || new Set([0]),
       allowProceed: true,
       errorElemSrc: {},
+      backTrackingDisclaimer: false,
+      showDisclaimer: false,
+      contactFormComplete: false,
     };
 
     // REFs Inits
@@ -302,45 +310,96 @@ export default class IndexPage extends React.Component<Props, State> {
     }
   };
 
+  private toggleDisclaimerModal = (val?: boolean): any => {
+    console.log(
+      `Ran: toggleDisclaimerModal: ${this.state.showDisclaimer}`,
+      this.state.showDisclaimer
+    );
+    this.setState({ showDisclaimer: val ? val : !this.state.showDisclaimer });
+  };
+
+  private disclaimerModalConfirmed = (dest?: string) => {
+    const {
+      marriageIntentionCertificateRequest: { steps },
+      currentStep,
+    } = this.props;
+
+    this.setState({
+      backTrackingDisclaimer: true,
+      showDisclaimer: false,
+    });
+    console.log(`dest?: `, dest);
+
+    const posDest = ['partnerFormA', 'partnerFormB', 'contactInfo'];
+
+    if (steps.indexOf(currentStep) > 0) {
+      console.log(`steps.indexOf(currentStep): `, steps.indexOf(currentStep));
+      if (dest && typeof dest === 'string') {
+        if (posDest.indexOf(dest) > -1) {
+          Router.push(`/marriageintention?step=${dest}`);
+        } else {
+          Router.push(`/marriageintention?step=${steps[currentStep] - 1}`);
+        }
+      } else {
+        Router.push(`/marriageintention?step=${steps[currentStep] - 1}`);
+      }
+    }
+  };
+
   private progressNavClick = (i: number) => {
     const {
       marriageIntentionCertificateRequest: { steps },
       currentStep,
     } = this.props;
+    const { showDisclaimer, backTrackingDisclaimer } = this.state;
     const direction = i < steps.indexOf(currentStep) ? '-' : '+';
     let partnerFlag = '';
 
     if (currentStep === 'partnerFormA') partnerFlag = 'A';
     if (currentStep === 'partnerFormB') partnerFlag = 'B';
 
-    if (partnerFlag.length > 0 && direction === '+') {
-      const isCompleteRet = this.isComplete(
-        partnerFlag,
-        this.state.localMarriageIntentionCertificateRequest
-      );
-      if (
-        isCompleteRet &&
-        Object.entries(this.state.errorElemSrc).length === 0
-      ) {
-        this.setState({
-          errorElemSrc: {},
-        });
-        Router.push(`/marriageintention?step=${steps[i]}`);
-      } else {
-        if (this.state.errorElemSrc['nameFields']) {
-          this.scrollToElem(this.state.errorElemSrc['nameFields']);
-        } else if (this.state.errorElemSrc['datePlaceOfBirth']) {
-          this.scrollToElem(this.state.errorElemSrc['datePlaceOfBirth']);
-        } else if (this.state.errorElemSrc['residence']) {
-          this.scrollToElem(this.state.errorElemSrc['residence']);
-        } else if (this.state.errorElemSrc['marriageBlock']) {
-          this.scrollToElem(this.state.errorElemSrc['marriageBlock']);
-        } else if (this.state.errorElemSrc['parents']) {
-          this.scrollToElem(this.state.errorElemSrc['parents']);
+    console.log(
+      `backTrackingDisclaimer: ${backTrackingDisclaimer} |showDisclaimer: ${showDisclaimer}`
+    );
+
+    const isDisclaimerable =
+      currentStep === 'contactInfo' ||
+      currentStep === 'partnerFormA' ||
+      currentStep === 'partnerFormB'
+        ? true
+        : false;
+
+    if (isDisclaimerable && backTrackingDisclaimer === false) {
+      this.toggleDisclaimerModal(true);
+      // this.toggleDisclaimerModal();
+    } else {
+      if (partnerFlag.length > 0 && direction === '+') {
+        const isCompleteRet = this.isComplete(
+          partnerFlag,
+          this.state.localMarriageIntentionCertificateRequest
+        );
+
+        if (
+          isCompleteRet &&
+          Object.entries(this.state.errorElemSrc).length === 0
+        ) {
+          Router.push(`/marriageintention?step=${steps[i]}`);
+        } else {
+          if (this.state.errorElemSrc['nameFields']) {
+            this.scrollToElem(this.state.errorElemSrc['nameFields']);
+          } else if (this.state.errorElemSrc['datePlaceOfBirth']) {
+            this.scrollToElem(this.state.errorElemSrc['datePlaceOfBirth']);
+          } else if (this.state.errorElemSrc['residence']) {
+            this.scrollToElem(this.state.errorElemSrc['residence']);
+          } else if (this.state.errorElemSrc['marriageBlock']) {
+            this.scrollToElem(this.state.errorElemSrc['marriageBlock']);
+          } else if (this.state.errorElemSrc['parents']) {
+            this.scrollToElem(this.state.errorElemSrc['parents']);
+          }
         }
+      } else {
+        Router.push(`/marriageintention?step=${steps[i]}`);
       }
-    } else {
-      Router.push(`/marriageintention?step=${steps[i]}`);
     }
   };
 
@@ -364,6 +423,7 @@ export default class IndexPage extends React.Component<Props, State> {
     const {
       localMarriageIntentionCertificateRequest,
       completedSteps,
+      backTrackingDisclaimer,
     } = this.state;
     const { steps, labels } = localMarriageIntentionCertificateRequest;
 
@@ -431,6 +491,9 @@ export default class IndexPage extends React.Component<Props, State> {
                 parentsRef: this.partnerA_parentsRef,
               }}
               errorElemSrc={this.state.errorElemSrc}
+              disclaimerModalConfirmed={this.disclaimerModalConfirmed}
+              toggleDisclaimerModal={this.toggleDisclaimerModal}
+              backTrackingDisclaimer={backTrackingDisclaimer}
             />
 
             {emailContentBlock()}
@@ -460,6 +523,10 @@ export default class IndexPage extends React.Component<Props, State> {
                 parentsRef: this.partnerA_parentsRef,
               }}
               errorElemSrc={this.state.errorElemSrc}
+              backTrackingDisclaimer={this.state.backTrackingDisclaimer}
+              showDisclaimer={this.state.showDisclaimer}
+              disclaimerModalHandler={this.disclaimerModalConfirmed}
+              toggleDisclaimerModal={this.toggleDisclaimerModal}
             />
 
             {emailContentBlock()}
@@ -520,6 +587,21 @@ export default class IndexPage extends React.Component<Props, State> {
           </Head>
 
           {questionsEl}
+
+          {this.state.showDisclaimer && (
+            <StatusModal
+              header={`Save & Continue`}
+              hideTopBorderDecoration={true}
+              closeModalHandler={this.toggleDisclaimerModal}
+              confirmHandler={this.disclaimerModalConfirmed}
+              confirmBtnText={`Confirm`}
+            >
+              <p className="t--s500">
+                If you edit your information you must click the `Save and
+                Continue` button save your changes
+              </p>
+            </StatusModal>
+          )}
         </div>
       </PageWrapper>
     );
diff --git a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
index 3d4d4a1c5..2c3ac32a5 100644
--- a/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
+++ b/services-js/registry-certs/client/store/MarriageIntentionCertificateRequest.ts
@@ -273,7 +273,6 @@ export default class MarriageIntentionCertificateRequest {
       appointmentDate: this.requestInformation.appointmentDate
         ? this.requestInformation.appointmentDate.toISOString()
         : null,
-      // appointmentTime: this.requestInformation.appointmentTime,
     };
 
     return {
@@ -395,7 +394,6 @@ export default class MarriageIntentionCertificateRequest {
       appointmentDate: obj.requestInformation.appointmentDate
         ? obj.requestInformation.appointmentDate.toISOString()
         : null,
-      // appointmentTime: obj.requestInformation.appointmentTime,
     };
   }
 
diff --git a/services-js/registry-certs/client/types.ts b/services-js/registry-certs/client/types.ts
index 5c0c338a5..ca671940f 100644
--- a/services-js/registry-certs/client/types.ts
+++ b/services-js/registry-certs/client/types.ts
@@ -234,7 +234,6 @@ export type MarriageIntentionCertificateRequestInformation = {
   dayPhone: string;
   dayPhoneUnformattedStr: string;
   appointmentDate: Date | null;
-  // appointmentTime: string;
 };
 
 export type MarriageCertificateRequestInformation = {

From f8f1bcf84dc61ecff5c4d3df66dc239e37b2fa39 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Mon, 22 Apr 2024 18:24:00 -0400
Subject: [PATCH 16/28] DIG-4059B: Navigation Bar and Next Button behavior is
 aligned wip#2

---
 .../src/__snapshots__/Storyshots.test.ts.snap |  40 +++++
 .../__snapshots__/Storyshots.test.ts.snap     | 156 +++++++++---------
 .../registry-certs/client/StatusModal.tsx     |   2 +-
 .../forms/FormPages.stories.tsx               |  11 ++
 .../marriageintention/forms/contactInfo.tsx   |  16 +-
 .../marriageintention/forms/partnerFormA.tsx  |   3 +-
 .../marriageintention/forms/partnerFormB.tsx  |  19 +--
 .../marriageintention/forms/partnerView.tsx   |   5 +-
 .../marriageintention/forms/reviewForms.tsx   |  22 ++-
 .../forms/reviewUI/components.tsx             |  10 +-
 .../forms/reviewUI/contact.tsx                |   4 +
 .../client/marriageintention/index.tsx        |  27 +--
 12 files changed, 205 insertions(+), 110 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index d52d20415..0b16ba283 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -5831,6 +5831,46 @@ exports[`Storyshots Notifications|Modals/StatusModal error with close 1`] = `
 </div>
 `;
 
+exports[`Storyshots Notifications|Modals/StatusModal hide top border decoration 1`] = `
+.emotion-0 {
+  padding-top: 0;
+  max-width: 500px;
+  top: 15%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+<div
+  className="md"
+>
+  <div
+    className="md-c emotion-0"
+  >
+    <button
+      autoFocus={true}
+      className="md-cb"
+      type="button"
+    >
+      Close
+    </button>
+    <div
+      className="md-b p-a300"
+    >
+      <div
+        className="t--intro t--err"
+      >
+        Something went wrong!
+      </div>
+      <p
+        className="t--s400"
+      >
+        If you edit your information you must click save and continue to save your changes
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots ProgressBar default 1`] = `
 .emotion-0 progress {
   margin: 1rem 0 0.25rem;
diff --git a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
index b7949a8eb..fa3cc05b2 100644
--- a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -82,7 +82,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -123,7 +123,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -175,7 +175,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -232,7 +232,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -273,7 +273,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -329,7 +329,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -385,7 +385,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -438,7 +438,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -481,7 +481,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -533,7 +533,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -586,7 +586,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -645,7 +645,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -685,7 +685,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -1148,7 +1148,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm txt-f--err "
+              className="txt-f txt-f--sm txt-f--err "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -1189,7 +1189,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -1241,7 +1241,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm txt-f--err "
+            className="txt-f txt-f--sm txt-f--err "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -1298,7 +1298,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -1339,7 +1339,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -1395,7 +1395,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -1451,7 +1451,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -1504,7 +1504,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -1547,7 +1547,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -1599,7 +1599,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -1652,7 +1652,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -1711,7 +1711,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -1751,7 +1751,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -2214,7 +2214,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -2255,7 +2255,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -2307,7 +2307,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -2364,7 +2364,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -2405,7 +2405,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -2461,7 +2461,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -2517,7 +2517,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -2570,7 +2570,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -2613,7 +2613,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -2665,7 +2665,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -2718,7 +2718,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -2777,7 +2777,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -2817,7 +2817,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -3315,7 +3315,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -3356,7 +3356,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -3408,7 +3408,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -3465,7 +3465,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -3506,7 +3506,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -3562,7 +3562,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -3618,7 +3618,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -3671,7 +3671,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -3714,7 +3714,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -3766,7 +3766,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -3819,7 +3819,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -3878,7 +3878,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -3918,7 +3918,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -4422,7 +4422,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-firstName"
               maxLength={25}
               name="firstName"
@@ -4463,7 +4463,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-middleName"
               maxLength={50}
               name="middleName"
@@ -4515,7 +4515,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-lastName"
             maxLength={50}
             name="lastName"
@@ -4572,7 +4572,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-streetAddress"
             maxLength={50}
             name="streetAddress"
@@ -4613,7 +4613,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-unit"
             maxLength={50}
             name="unit"
@@ -4669,7 +4669,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           </label>
           <input
             aria-label=""
-            className="txt-f  txt-f--sm  "
+            className="txt-f txt-f--sm  "
             id="ApplicationForm-city"
             maxLength={50}
             name="city"
@@ -4725,7 +4725,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-state"
               maxLength={50}
               name="state"
@@ -4778,7 +4778,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             </label>
             <input
               aria-label=""
-              className="txt-f  txt-f--sm  "
+              className="txt-f txt-f--sm  "
               id="ApplicationForm-zip"
               maxLength={5}
               name="zip"
@@ -4821,7 +4821,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-phone"
           maxLength={50}
           name="phone"
@@ -4873,7 +4873,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-email"
           maxLength={50}
           name="email"
@@ -4926,7 +4926,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-confirmEmail"
           maxLength={50}
           name="confirmEmail"
@@ -4985,7 +4985,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-degreeAttained"
           maxLength={100}
           name="degreeAttained"
@@ -5025,7 +5025,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
         </label>
         <input
           aria-label=""
-          className="txt-f  txt-f--sm  "
+          className="txt-f txt-f--sm  "
           id="ApplicationForm-educationalInstitution"
           maxLength={100}
           name="educationalInstitution"
@@ -5665,7 +5665,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  txt-f--sm  "
+                        className="txt-f txt-f--sm  "
                         id="ApplicationForm-firstName"
                         maxLength={25}
                         name="firstName"
@@ -5706,7 +5706,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  txt-f--sm  "
+                        className="txt-f txt-f--sm  "
                         id="ApplicationForm-middleName"
                         maxLength={50}
                         name="middleName"
@@ -5758,7 +5758,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  txt-f--sm  "
+                      className="txt-f txt-f--sm  "
                       id="ApplicationForm-lastName"
                       maxLength={50}
                       name="lastName"
@@ -5815,7 +5815,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  txt-f--sm  "
+                      className="txt-f txt-f--sm  "
                       id="ApplicationForm-streetAddress"
                       maxLength={50}
                       name="streetAddress"
@@ -5856,7 +5856,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  txt-f--sm  "
+                      className="txt-f txt-f--sm  "
                       id="ApplicationForm-unit"
                       maxLength={50}
                       name="unit"
@@ -5912,7 +5912,7 @@ Array [
                     </label>
                     <input
                       aria-label=""
-                      className="txt-f  txt-f--sm  "
+                      className="txt-f txt-f--sm  "
                       id="ApplicationForm-city"
                       maxLength={50}
                       name="city"
@@ -5968,7 +5968,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  txt-f--sm  "
+                        className="txt-f txt-f--sm  "
                         id="ApplicationForm-state"
                         maxLength={50}
                         name="state"
@@ -6021,7 +6021,7 @@ Array [
                       </label>
                       <input
                         aria-label=""
-                        className="txt-f  txt-f--sm  "
+                        className="txt-f txt-f--sm  "
                         id="ApplicationForm-zip"
                         maxLength={5}
                         name="zip"
@@ -6064,7 +6064,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  txt-f--sm  "
+                    className="txt-f txt-f--sm  "
                     id="ApplicationForm-phone"
                     maxLength={50}
                     name="phone"
@@ -6116,7 +6116,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  txt-f--sm  "
+                    className="txt-f txt-f--sm  "
                     id="ApplicationForm-email"
                     maxLength={50}
                     name="email"
@@ -6169,7 +6169,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  txt-f--sm  "
+                    className="txt-f txt-f--sm  "
                     id="ApplicationForm-confirmEmail"
                     maxLength={50}
                     name="confirmEmail"
@@ -6228,7 +6228,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  txt-f--sm  "
+                    className="txt-f txt-f--sm  "
                     id="ApplicationForm-degreeAttained"
                     maxLength={100}
                     name="degreeAttained"
@@ -6268,7 +6268,7 @@ Array [
                   </label>
                   <input
                     aria-label=""
-                    className="txt-f  txt-f--sm  "
+                    className="txt-f txt-f--sm  "
                     id="ApplicationForm-educationalInstitution"
                     maxLength={100}
                     name="educationalInstitution"
diff --git a/services-js/registry-certs/client/StatusModal.tsx b/services-js/registry-certs/client/StatusModal.tsx
index 38f9852ff..cfc5bdcda 100644
--- a/services-js/registry-certs/client/StatusModal.tsx
+++ b/services-js/registry-certs/client/StatusModal.tsx
@@ -9,7 +9,7 @@ interface Props {
   confirmBtnText?: string;
   error?: boolean;
   hideTopBorderDecoration?: boolean;
-  closeModalHandler?: (val?: boolean) => {};
+  closeModalHandler?: (val: boolean) => void;
   confirmHandler?: (dest: string) => void | undefined;
 }
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
index e6077ebda..fd51f0d27 100644
--- a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -328,6 +328,9 @@ storiesOf('Marriage Intention/Form Pages', module)
   ))
   .add('Step 5. Review/Person Info View', () => {
     const marriageIntentionCertificateRequest = makeMarriageIntentionCertificateRequest();
+    const bckMethod = (val: boolean): any => {
+      (() => console.log(`val: ${val}`))();
+    };
 
     return (
       <PartnerView
@@ -364,10 +367,16 @@ storiesOf('Marriage Intention/Form Pages', module)
         bloodRelationDesc={`Third Cousin's Removed`}
         partnershipState={`Boston, USA`}
         stepStr={`partnerFormA`}
+        backTrackingDisclaimer={false}
+        toggleDisclaimerModal={bckMethod}
       />
     );
   })
   .add('Step 5. Review - Contact [Section]', () => {
+    const bckMethod = (val: boolean): any => {
+      (() => console.log(`val: ${val}`))();
+    };
+
     return (
       <ContactUX
         appointmentDateTime={formatDate(new Date(`1982-09-23T00:00:00.000Z`))}
@@ -375,6 +384,8 @@ storiesOf('Marriage Intention/Form Pages', module)
           email: 'phillip.kelly@boston.gov',
           dayPhone: '6170001111',
         }}
+        backTrackingDisclaimer={true}
+        toggleDisclaimerModal={bckMethod}
       />
     );
   })
diff --git a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
index cef9987e3..223fae852 100644
--- a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
@@ -33,7 +33,9 @@ import {
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
   handleProceed: (ev: MouseEvent) => void;
-  handleStepBack: (ev: MouseEvent) => void;
+  handleStepBack: (ev: MouseEvent | TouchEvent) => void;
+  toggleDisclaimerModal: (val: boolean) => void;
+  backTrackingDisclaimer: boolean;
 }
 
 @observer
@@ -130,6 +132,16 @@ export default class ContactInfo extends Component<Props> {
     );
   };
 
+  private handleStepBack = (ev: MouseEvent | TouchEvent) => {
+    const { toggleDisclaimerModal, backTrackingDisclaimer } = this.props;
+
+    if (backTrackingDisclaimer === false && toggleDisclaimerModal) {
+      toggleDisclaimerModal(true);
+    } else {
+      this.props.handleStepBack(ev);
+    }
+  };
+
   public render() {
     const { marriageIntentionCertificateRequest } = this.props;
     const {
@@ -146,7 +158,7 @@ export default class ContactInfo extends Component<Props> {
     return (
       <QuestionComponent
         handleProceed={this.props.handleProceed}
-        handleStepBack={this.props.handleStepBack}
+        handleStepBack={this.handleStepBack}
         allowProceed={ContactInfo.isComplete(
           marriageIntentionCertificateRequest
         )}
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index 1e40327d4..de43bd6ca 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -53,8 +53,7 @@ interface Props {
   errorElemSrc: object;
   partnerNum?: number | string;
   partnerLabel: string;
-  disclaimerModalConfirmed: (dest?: string) => void | undefined;
-  toggleDisclaimerModal?: (val?: boolean) => {};
+  toggleDisclaimerModal: (val: boolean) => void;
   backTrackingDisclaimer: boolean;
 }
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 3e8c91b4d..793e4d4d6 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -36,8 +36,8 @@ import { isPartnerFormPageComplete } from '../../marriageintention/helpers/formU
 
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
-  handleProceed: (ev: MouseEvent) => void;
-  handleStepBack: (ev: MouseEvent) => void;
+  handleProceed: (ev: MouseEvent | TouchEvent) => void;
+  handleStepBack: (ev: MouseEvent | TouchEvent) => void;
   formErrors: (data: {
     action: string;
     ref?: React.RefObject<HTMLSpanElement> | null;
@@ -53,10 +53,8 @@ interface Props {
   errorElemSrc: object;
   partnerLabel: string;
   partnerNum?: number | string;
-  showDisclaimer?: boolean;
-  backTrackingDisclaimer?: boolean;
-  disclaimerModalHandler: () => void;
-  toggleDisclaimerModal: (val?: boolean) => {};
+  backTrackingDisclaimer: boolean;
+  toggleDisclaimerModal: (val: boolean) => void;
 }
 
 @observer
@@ -345,10 +343,11 @@ export default class PartnerForm extends Component<Props> {
     this.props.handleProceed(certObj);
   };
 
-  private handleStepBack = (ev: MouseEvent) => {
-    if (this.props.backTrackingDisclaimer === false) {
-      this.props.toggleDisclaimerModal();
-      // this.props.handleStepBack(ev);
+  private handleStepBack = (ev: MouseEvent | TouchEvent) => {
+    const { toggleDisclaimerModal, backTrackingDisclaimer } = this.props;
+
+    if (backTrackingDisclaimer === false && toggleDisclaimerModal) {
+      toggleDisclaimerModal(true);
     } else {
       this.props.handleStepBack(ev);
     }
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
index 756d39346..e2229d8d4 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
@@ -26,7 +26,6 @@ interface Props {
   dob: string;
   age: string;
   occupation: string;
-  // sex: string;
   address: string;
   birthCity: string;
   birthState: string;
@@ -43,6 +42,8 @@ interface Props {
   suffix: string;
   partnershipState: string;
   stepStr: string;
+  toggleDisclaimerModal: (val: boolean) => void;
+  backTrackingDisclaimer: boolean;
 }
 
 @observer
@@ -98,6 +99,8 @@ export default class PartnerView extends Component<Props> {
           title: `Person ${this.props.partnerLabel}`,
           btnStr: `Edit This Page`,
           routeStep: `${stepStr}`,
+          backTrackingDisclaimer: this.props.backTrackingDisclaimer,
+          toggleDisclaimerModal: this.props.toggleDisclaimerModal,
         })}
 
         <div css={REVIEW_FORM_STYLING}>
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
index 3ff87cfb8..279f869ab 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewForms.tsx
@@ -27,8 +27,10 @@ import HeaderUX from './reviewUI/header';
 
 interface Props {
   handleProceed: (ev: MouseEvent) => void;
-  handleStepBack: (ev: MouseEvent) => void;
+  handleStepBack: (ev: MouseEvent | TouchEvent) => void;
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
+  toggleDisclaimerModal: (val: boolean) => void;
+  backTrackingDisclaimer: boolean;
 }
 
 @observer
@@ -42,6 +44,16 @@ export default class ReviewForms extends Component<Props> {
     };
   }
 
+  private handleStepBack = (ev: MouseEvent | TouchEvent) => {
+    const { toggleDisclaimerModal, backTrackingDisclaimer } = this.props;
+
+    if (backTrackingDisclaimer === false && toggleDisclaimerModal) {
+      toggleDisclaimerModal(true);
+    } else {
+      this.props.handleStepBack(ev);
+    }
+  };
+
   public render() {
     const {
       requestInformation,
@@ -70,7 +82,7 @@ export default class ReviewForms extends Component<Props> {
     return (
       <QuestionComponent
         handleProceed={this.props.handleProceed}
-        handleStepBack={this.props.handleStepBack}
+        handleStepBack={this.handleStepBack}
         allowProceed={true}
         nextButtonText={'Submit'}
       >
@@ -135,6 +147,8 @@ export default class ReviewForms extends Component<Props> {
             `}
             partnershipState={requestInformation.partnerA_partnershipState}
             stepStr={`partnerFormA`}
+            toggleDisclaimerModal={this.props.toggleDisclaimerModal}
+            backTrackingDisclaimer={this.props.backTrackingDisclaimer}
           />
 
           {/* PARTY B */}
@@ -189,6 +203,8 @@ export default class ReviewForms extends Component<Props> {
             `}
             partnershipState={requestInformation.partnerB_partnershipState}
             stepStr={`partnerFormB`}
+            toggleDisclaimerModal={this.props.toggleDisclaimerModal}
+            backTrackingDisclaimer={this.props.backTrackingDisclaimer}
           />
 
           <ContactUX
@@ -197,6 +213,8 @@ export default class ReviewForms extends Component<Props> {
               email: requestInformation.email,
               dayPhone: requestInformation.dayPhone,
             }}
+            toggleDisclaimerModal={this.props.toggleDisclaimerModal}
+            backTrackingDisclaimer={this.props.backTrackingDisclaimer}
           />
         </div>
       </QuestionComponent>
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx
index f252dfe2f..88a52c772 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/components.tsx
@@ -17,10 +17,18 @@ export const $ReviewControlHeader = (params: {
   title: string;
   btnStr: string;
   routeStep: string;
+  toggleDisclaimerModal: (val: boolean) => void;
+  backTrackingDisclaimer: boolean;
 }) => {
   const { title, btnStr, routeStep } = params;
   const stepBack = () => {
-    Router.push(`/marriageintention?step=${routeStep}`);
+    const { toggleDisclaimerModal, backTrackingDisclaimer } = params;
+
+    if (backTrackingDisclaimer === false && toggleDisclaimerModal) {
+      toggleDisclaimerModal(true);
+    } else {
+      Router.push(`/marriageintention?step=${routeStep}`);
+    }
   };
 
   return (
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
index 5130f3701..85c4623a2 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/contact.tsx
@@ -14,6 +14,8 @@ interface Props {
     email: string;
     dayPhone: string;
   };
+  toggleDisclaimerModal: (val: boolean) => void;
+  backTrackingDisclaimer: boolean;
 }
 
 @observer
@@ -31,6 +33,8 @@ export default class ContactUX extends Component<Props> {
           title: `Contact Information`,
           btnStr: `Edit This Page`,
           routeStep: `contactInfo`,
+          backTrackingDisclaimer: this.props.backTrackingDisclaimer,
+          toggleDisclaimerModal: this.props.toggleDisclaimerModal,
         })}
 
         <div css={REVIEW_FORM_STYLING}>
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index 544e5fd3f..7f1f10d24 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -310,12 +310,8 @@ export default class IndexPage extends React.Component<Props, State> {
     }
   };
 
-  private toggleDisclaimerModal = (val?: boolean): any => {
-    console.log(
-      `Ran: toggleDisclaimerModal: ${this.state.showDisclaimer}`,
-      this.state.showDisclaimer
-    );
-    this.setState({ showDisclaimer: val ? val : !this.state.showDisclaimer });
+  private toggleDisclaimerModal = (val: boolean): void => {
+    this.setState({ showDisclaimer: val });
   };
 
   private disclaimerModalConfirmed = (dest?: string) => {
@@ -330,10 +326,14 @@ export default class IndexPage extends React.Component<Props, State> {
     });
     console.log(`dest?: `, dest);
 
-    const posDest = ['partnerFormA', 'partnerFormB', 'contactInfo'];
+    const posDest = [
+      'partnerFormA',
+      'partnerFormB',
+      'contactInfo',
+      'reviewForms',
+    ];
 
     if (steps.indexOf(currentStep) > 0) {
-      console.log(`steps.indexOf(currentStep): `, steps.indexOf(currentStep));
       if (dest && typeof dest === 'string') {
         if (posDest.indexOf(dest) > -1) {
           Router.push(`/marriageintention?step=${dest}`);
@@ -365,13 +365,13 @@ export default class IndexPage extends React.Component<Props, State> {
     const isDisclaimerable =
       currentStep === 'contactInfo' ||
       currentStep === 'partnerFormA' ||
-      currentStep === 'partnerFormB'
+      currentStep === 'partnerFormB' ||
+      currentStep === 'reviewForms'
         ? true
         : false;
 
     if (isDisclaimerable && backTrackingDisclaimer === false) {
       this.toggleDisclaimerModal(true);
-      // this.toggleDisclaimerModal();
     } else {
       if (partnerFlag.length > 0 && direction === '+') {
         const isCompleteRet = this.isComplete(
@@ -462,6 +462,8 @@ export default class IndexPage extends React.Component<Props, State> {
                 localMarriageIntentionCertificateRequest
               )}
               handleStepBack={this.stepBackOneQuestion}
+              toggleDisclaimerModal={this.toggleDisclaimerModal}
+              backTrackingDisclaimer={backTrackingDisclaimer}
             />
 
             {emailContentBlock()}
@@ -491,7 +493,6 @@ export default class IndexPage extends React.Component<Props, State> {
                 parentsRef: this.partnerA_parentsRef,
               }}
               errorElemSrc={this.state.errorElemSrc}
-              disclaimerModalConfirmed={this.disclaimerModalConfirmed}
               toggleDisclaimerModal={this.toggleDisclaimerModal}
               backTrackingDisclaimer={backTrackingDisclaimer}
             />
@@ -524,8 +525,6 @@ export default class IndexPage extends React.Component<Props, State> {
               }}
               errorElemSrc={this.state.errorElemSrc}
               backTrackingDisclaimer={this.state.backTrackingDisclaimer}
-              showDisclaimer={this.state.showDisclaimer}
-              disclaimerModalHandler={this.disclaimerModalConfirmed}
               toggleDisclaimerModal={this.toggleDisclaimerModal}
             />
 
@@ -545,6 +544,8 @@ export default class IndexPage extends React.Component<Props, State> {
                 localMarriageIntentionCertificateRequest
               )}
               handleStepBack={this.stepBackOneQuestion}
+              toggleDisclaimerModal={this.toggleDisclaimerModal}
+              backTrackingDisclaimer={backTrackingDisclaimer}
             />
 
             {emailContentBlock()}

From 6ba08ba02b5fda82e957af5adc1dd9958ece3aca Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 23 Apr 2024 18:32:57 -0400
Subject: [PATCH 17/28] DIG-4059B: Navigation Bar and Next Button behavior is
 aligned wip#3

---
 .../__snapshots__/Storyshots.test.ts.snap     |  3 ++
 .../marriageintention/forms/instructions.tsx  |  5 +++
 .../helpers/postConfirmationEmail.ts          |  8 ++---
 .../client/marriageintention/index.tsx        | 33 ++++++++++---------
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 262409451..ed4543685 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -64066,6 +64066,9 @@ Array [
                       </li>
                     </ul>
                   </div>
+                  <div>
+                    * If you edit your information you must click save and continue to save your changes
+                  </div>
                 </div>
               </div>
               <div
diff --git a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
index f8f0a6ad0..969dd00b4 100644
--- a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
@@ -69,6 +69,11 @@ export default class Instructions extends Component<Props> {
             <li>A birth certificate</li>
           </ul>
         </div>
+
+        <div>
+          * If you edit your information you must click save and continue to
+          save your changes
+        </div>
       </div>
     );
   };
diff --git a/services-js/registry-certs/client/marriageintention/helpers/postConfirmationEmail.ts b/services-js/registry-certs/client/marriageintention/helpers/postConfirmationEmail.ts
index 2c9bc33d4..d52c1bd04 100644
--- a/services-js/registry-certs/client/marriageintention/helpers/postConfirmationEmail.ts
+++ b/services-js/registry-certs/client/marriageintention/helpers/postConfirmationEmail.ts
@@ -9,8 +9,6 @@ async function PostConfirmationEmail(data: {
   fullName: string;
 }) {
   const { email, from, subject, message, fullName } = data;
-  // eslint-disable-next-line no-console
-  // console.log('PostConfirmationEmail > data: ', data);
 
   try {
     let dataObj = qs.stringify({
@@ -33,16 +31,16 @@ async function PostConfirmationEmail(data: {
     return await axios(config)
       .then(response => {
         // eslint-disable-next-line no-console
-        // console.log(JSON.stringify(response.data));
+        // console.error(JSON.stringify(response.data));
         return response.data;
       })
       .catch(error => {
         // eslint-disable-next-line no-console
-        console.log(error);
+        console.error(error);
       });
   } catch (e) {
     // eslint-disable-next-line no-console
-    console.log('RESPONSE 200 >', e);
+    console.error('RESPONSE 200 >', e);
     return e;
   }
 }
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index 7f1f10d24..defa748d1 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -268,10 +268,13 @@ export default class IndexPage extends React.Component<Props, State> {
     // Have to do this after updateFrom because the answers to questions can
     // affect the steps.
     const newSteps = marriageIntentionCertificateRequest.steps;
-    const currentIndex = newSteps.indexOf(currentStep);
+    let currentIndex = newSteps.indexOf(currentStep);
 
     if (currentIndex < 0) {
+      console.error(`Step ${currentStep} not found in new steps`);
+      console.error(`currentIndex: ${currentIndex}`);
       throw new Error(`Step ${currentStep} not found in new steps`);
+      // currentIndex = 0;
     }
 
     this.gaEventActionAndLabel();
@@ -324,7 +327,6 @@ export default class IndexPage extends React.Component<Props, State> {
       backTrackingDisclaimer: true,
       showDisclaimer: false,
     });
-    console.log(`dest?: `, dest);
 
     const posDest = [
       'partnerFormA',
@@ -333,16 +335,19 @@ export default class IndexPage extends React.Component<Props, State> {
       'reviewForms',
     ];
 
-    if (steps.indexOf(currentStep) > 0) {
-      if (dest && typeof dest === 'string') {
-        if (posDest.indexOf(dest) > -1) {
-          Router.push(`/marriageintention?step=${dest}`);
-        } else {
-          Router.push(`/marriageintention?step=${steps[currentStep] - 1}`);
-        }
-      } else {
-        Router.push(`/marriageintention?step=${steps[currentStep] - 1}`);
+    if (
+      steps.indexOf(currentStep) > 0 &&
+      steps.indexOf(currentStep) <= steps.length
+    ) {
+      let destStep = `${steps[steps.indexOf(currentStep) - 1]}`;
+
+      if (dest && typeof dest === 'string' && posDest.indexOf(dest) > -1) {
+        destStep = `${dest}`;
       }
+
+      Router.push(`/marriageintention?step=${destStep}`);
+    } else {
+      Router.push(`/marriageintention?step=${steps[0]}`);
     }
   };
 
@@ -351,17 +356,13 @@ export default class IndexPage extends React.Component<Props, State> {
       marriageIntentionCertificateRequest: { steps },
       currentStep,
     } = this.props;
-    const { showDisclaimer, backTrackingDisclaimer } = this.state;
+    const { backTrackingDisclaimer } = this.state;
     const direction = i < steps.indexOf(currentStep) ? '-' : '+';
     let partnerFlag = '';
 
     if (currentStep === 'partnerFormA') partnerFlag = 'A';
     if (currentStep === 'partnerFormB') partnerFlag = 'B';
 
-    console.log(
-      `backTrackingDisclaimer: ${backTrackingDisclaimer} |showDisclaimer: ${showDisclaimer}`
-    );
-
     const isDisclaimerable =
       currentStep === 'contactInfo' ||
       currentStep === 'partnerFormA' ||

From 26a15f0b7cd8c494869c78ef017962b481059889 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Thu, 2 May 2024 16:54:24 -0400
Subject: [PATCH 18/28] DIG-4375: UX updates for Marriage Intention form

---
 .../react-fleet/.storybook/preview-head.html  |     4 +-
 .../src/__snapshots__/Storyshots.test.ts.snap |     7 +
 .../src/components/ProgressNav.tsx            |     1 +
 .../react-fleet/src/utilities/constants.ts    |     4 +-
 .../.storybook/preview-head.html              |     4 +-
 .../.storybook/preview-head.html              |     4 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 26620 ++++++++--------
 .../common/question-components/styling.tsx    |     6 +
 .../forms/FormPages.stories.tsx               |   100 +-
 .../marriageintention/forms/instructions.tsx  |     9 +-
 .../forms/reviewUI/reviewStying.tsx           |    12 +-
 .../marriageintention/forms/styling.tsx       |    17 +-
 .../client/marriageintention/index.tsx        |     2 +-
 13 files changed, 13539 insertions(+), 13251 deletions(-)

diff --git a/modules-js/react-fleet/.storybook/preview-head.html b/modules-js/react-fleet/.storybook/preview-head.html
index 0874e3cba..eb9fd5339 100644
--- a/modules-js/react-fleet/.storybook/preview-head.html
+++ b/modules-js/react-fleet/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <!--[if !IE]><!-->
-<!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
-<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
+<link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+<!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 0b16ba283..868c54b13 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -6162,6 +6162,7 @@ exports[`Storyshots ProgressNav Step 1: Getting Started (default) 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -6398,6 +6399,7 @@ exports[`Storyshots ProgressNav Step 2: Person 1 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -6634,6 +6636,7 @@ exports[`Storyshots ProgressNav Step 3: Person 2 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -6870,6 +6873,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info - Nav one step back 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -7106,6 +7110,7 @@ exports[`Storyshots ProgressNav Step 4: Contact Info 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -7342,6 +7347,7 @@ exports[`Storyshots ProgressNav Step 5: Review 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -7578,6 +7584,7 @@ exports[`Storyshots ProgressNav Step 6: Submit 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
diff --git a/modules-js/react-fleet/src/components/ProgressNav.tsx b/modules-js/react-fleet/src/components/ProgressNav.tsx
index 2bc58e690..3f461e84e 100644
--- a/modules-js/react-fleet/src/components/ProgressNav.tsx
+++ b/modules-js/react-fleet/src/components/ProgressNav.tsx
@@ -162,6 +162,7 @@ const PROGRESSBAR_STYLE = css`
         background: ${WHITE};
         width: 2%;
         font-size: 0.85em;
+        vertical-align: middle;
 
         &:last-child {
           grid-column-start: 2;
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index 953986205..22e0a7679 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -1,6 +1,6 @@
-// export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
+export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
+// export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
 // export const PUBLIC_CSS_URL = 'http://localhost:3030/css/public.css';
-export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
 export const WHITE = '#fff';
 export const BLACK = '#000';
 export const YELLOW = '#fcb61a';
diff --git a/modules-js/storybook-common/.storybook/preview-head.html b/modules-js/storybook-common/.storybook/preview-head.html
index 15c3c8046..a45e3e82c 100644
--- a/modules-js/storybook-common/.storybook/preview-head.html
+++ b/modules-js/storybook-common/.storybook/preview-head.html
@@ -1,7 +1,7 @@
 <!--[if !IE]><!-->
-  <!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
+  <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+  <!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="https://cob-patterns-staging.herokuapp.com/css/public.css" /> -->
-<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
diff --git a/services-js/registry-certs/.storybook/preview-head.html b/services-js/registry-certs/.storybook/preview-head.html
index 2f5207070..b66c8b037 100644
--- a/services-js/registry-certs/.storybook/preview-head.html
+++ b/services-js/registry-certs/.storybook/preview-head.html
@@ -3,8 +3,8 @@
   That way Emotion can override the default styles. This matches the behavior in
   prod, where this tag is written by _document.tsx.
 -->
-<!-- <link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" /> -->
-<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
+<link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" />
+<!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
 <!-- <link href="http://localhost:3030/css/public.css" type="text/css" rel="stylesheet" /> -->
 
 <script src="https://js.stripe.com/v3/"></script>
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index ed4543685..589c0aa20 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -63408,1204 +63408,471 @@ marriage@boston.gov.
 </pre>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 1. Instructions 1`] = `
-Array [
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>,
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />,
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth Date & Place, w/Country(CAN) 1`] = `
+.emotion-3 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
 
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />,
-  .emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.emotion-3 legend {
+  padding-left: 0;
+  font-size: 120%;
 }
 
-.emotion-0 {
-  color: #d22d23;
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
 }
 
-.emotion-5 fieldset + fieldset {
-  margin-top: 2rem;
+.emotion-1 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-5 fieldset + fieldset {
-    margin-top: 4rem;
-  }
+.emotion-1 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
 
-  .emotion-5 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
+.emotion-1 input {
+  -moz-appearance: textfield;
 }
 
-.emotion-6 {
-  text-align: center;
+.emotion-1 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-6 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
+.emotion-1 input::-ms-clear {
+  display: none;
+}
 
-  .emotion-6 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
+.emotion-1 label {
+  margin-top: 0.5rem;
+}
 
-  .emotion-6 > div.ta-r > button {
-    margin-left: auto;
-  }
+.emotion-1.disabled {
+  opacity: 0.4;
+}
 
-  .emotion-6 .lnk {
-    padding-left: 0;
-  }
+.emotion-1.disabled * {
+  cursor: not-allowed;
 }
 
-.emotion-2 {
-  padding-right: 0;
+.css-1aiow01 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
+.emotion-4 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-4 {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.emotion-3 {
-  display: grid;
-  margin: auto;
-  margin-top: 0.75rem;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
+.emotion-4 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-3 .progressbar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
+.emotion-4 > div {
+  text-align: left;
 }
 
-.emotion-3 .progressbar .nav {
-  display: table;
-  table-layout: fixed;
-  text-align: center;
-  line-height: normal;
-  font-style: normal;
-  font-weight: bold;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  color: '#58585B';
+@media screen and (min-width:768px) {
+  .emotion-4 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
 }
 
-.emotion-3 .progressbar .nav a {
-  display: table-cell;
-  border-width: 1px;
-  border-color: black;
-  border-style: solid;
-  border-left-width: 0;
-  padding: 0.85em 0.5em;
-  color: black;
-  background: #fff;
-  width: 2%;
-  font-size: 0.85em;
+.emotion-4 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-3 .progressbar .nav a:last-child {
-  grid-column-start: 2;
+.emotion-4 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-.emotion-3 .progressbar .nav a:first-child {
-  border-left-width: 1px;
+.emotion-4 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed.current {
-  cursor: pointer;
-  color: #fff;
-  background: #1871bd;
+.emotion-4 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted {
-  background: #C8C8C8;
+.emotion-4 .sel-c {
+  display: block;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused.current {
-  color: #000;
-  cursor: pointer;
-  background: #f2f2f2;
+.emotion-6 {
+  margin-bottom: 3em;
+  background: none;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  color: #000;
-  cursor: pointer;
-  background: #b0d9ff;
+.emotion-6 label {
+  margin-top: 0em;
 }
 
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover,
-.emotion-3 .progressbar .nav a.completed.focused.done.current {
-  color: #000;
-  cursor: default;
-  background: #f2f2f2;
+.emotion-6 .spacingTop {
+  margin-top: 1.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed.current {
-  color: #000;
-  background: #f2f2f2;
+.emotion-6 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
 }
 
-.emotion-3 .progressbar .progress-text {
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  font-style: italic;
-  font-size: 1rem;
-  margin-top: 0.5rem;
+.emotion-6 label.inputHeading .t--req {
+  margin-left: 0.5rem;
 }
 
-.emotion-3 .progressbar .progress-text .mobile {
-  display: none;
+.emotion-6 .t--opt {
+  color: #58585b !important;
 }
 
-@media screen and (max-width:540px) {
-  .emotion-3 {
-    max-width: 25.875em;
+@media screen and (min-width:768px) {
+  .emotion-6 {
+    margin-left: auto;
+    margin-right: auto;
   }
+}
 
-  .emotion-3 .progressbar .nav a {
-    overflow: hidden;
-    min-width: 10px;
-    padding: 0.5em 0;
-    text-indent: -500px;
-    line-height: 0;
-  }
+.emotion-6 .ra-l {
+  font-size: 0.9375em;
+}
 
-  .emotion-3 .progressbar .progress-text .mobile {
-    display: inline-block;
-  }
+.emotion-6 > div {
+  text-align: left;
 }
 
-@media (min-width:541px) and (max-width:1024px) {
-  .emotion-3 .progressbar .nav a {
-    padding: 0.85em 0;
-    font-size: 0.55rem;
+@media screen and (min-width:768px) {
+  .emotion-6 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 }
 
-.emotion-7 {
-  padding: 0px;
+.emotion-6 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-4 h1 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
-  text-transform: uppercase;
+.emotion-6 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
-  font-size: 2rem;
-  font-style: normal;
-  color: #091f2f;
+  font-size: 1rem;
 }
 
-.emotion-4 h2 {
-  padding-bottom: 0.25rem;
-  margin-bottom: 0;
+.emotion-6 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-6 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-0 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
   text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
   border-bottom: 4px solid #091f2f;
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1.5rem;
-  font-style: normal;
-  color: #091f2f;
+  margin-bottom: 1em;
 }
 
-.emotion-4 .getting-started {
-  font-size: 1rem;
-  margin-bottom: 1.5rem;
+.emotion-0 h1 {
+  border-bottom: 4px solid #091f2f;
 }
 
-.emotion-4 .getting-started .emphasis {
-  font-style: bold;
-  font-weight: 700;
+.emotion-0 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
 }
 
-.emotion-4 .getting-started ul {
-  margin-bottom: 1rem;
+.emotion-0 .notice .tool-tip__wrapper {
+  display: inline-block;
 }
 
-.emotion-4 .getting-started ul li {
-  list-style: initial;
-  margin: 0.25rem 0 0.25rem 1.75rem;
+.emotion-2 {
+  margin-bottom: 2.25em;
+}
+
+.css-vfjwkx .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-wvkemw .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ahsdhq .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1nb9jwk .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-12yp9t2 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ttcwo2 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-99cy70 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
 <div
-    className="mn--full-ie"
+  className="emotion-6"
+>
+  <h1
+    className="emotion-0"
+  >
+    Date and Place of Birth
+  </h1>
+  <fieldset
+    className="emotion-3"
   >
     <div
-      className="mn mn--full "
+      className="emotion-2"
     >
-      <input
-        aria-hidden="true"
-        className="s-tr"
-        id="s-tr"
-        type="checkbox"
-      />
-      <header
-        className="h"
-        dangerouslySetInnerHTML={
+      <legend
+        style={
           Object {
-            "__html": "
-  <label for=\\"brg-tr\\" class=\\"brg-b\\">
-    <div class=\\"brg\\">
-      <span class=\\"brg-c\\">
-        <span class=\\"brg-c-i\\"></span>
-      </span>
-      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
-    </div>
-  </label>
-
-  <div class=\\"lo lo--abs\\">
-    <div class=\\"lo-l\\">
-      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
-        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
-      </a>
-      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
-    </div>
-  </div>
-  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
-  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
-</a>
-
-<nav class=\\"nv-h\\">
-  <ul class=\\"nv-h-l\\">
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
-    <li class=\\"tr nv-h-l-i\\">
-      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
-      <ul class=\\"tr-dd\\">
-        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
-      </ul>
-    </li>
-    <li class=\\"nv-h-l-i\\">
-      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
-        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
-      </label>
-    </li>
-  </ul>
-</nav>
-
-<div class=\\"h-s\\">
-  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
-    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
-    <div class=\\"sf-i\\">
-      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
-      <button class=\\"sf-i-b\\">Search</button>
-    </div>
-  </form>
-</div>
-  ",
+            "display": "none",
+            "width": "100%",
           }
         }
-        role="banner"
-      />
+      >
+        Person A Date of Birth
+      </legend>
       <div
-        className="p-t300"
+        className=" emotion-1"
       >
-        <nav
-          aria-label="Breadcrumbs"
-          className="brc p-a300 emotion-1"
-        >
-          <ul
-            className="brc-l"
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-month"
           >
-            <li
-              className="brc-l-i"
+            Month
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
+                }
+              }
             >
-              <a
-                href="https://www.boston.gov/"
-              >
-                Home
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/departments"
-              >
-                Departments
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-month"
+            max="12"
+            maxLength={2}
+            min="1"
+            name="month"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value="9"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-day"
+          >
+            Day
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
                 }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
+              }
             >
-              <a
-                href="https://www.boston.gov/departments/registry"
-              >
-                Registry: Birth, death, and marriage and marriage intention
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-day"
+            max="31"
+            maxLength={2}
+            min="1"
+            name="day"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="DD"
+            type="number"
+            value="1"
+          />
+        </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="dob-year"
+          >
+            Year
+            <span
+              aria-hidden="true"
+              className="t--req"
+              style={
+                Object {
+                  "marginLeft": "0.35em",
                 }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
+              }
             >
-              <a
-                aria-current="page"
-                className="emotion-0"
-                href="/marriageintention"
-              >
-                Marriage Intention
-              </a>
-            </li>
-          </ul>
-        </nav>
+              Required
+            </span>
+          </label>
+          <input
+            className="txt-f"
+            id="dob-year"
+            max={2024}
+            maxLength={4}
+            min="1000"
+            name="year"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value="2003"
+          />
+        </div>
       </div>
+      
+    </div>
+  </fieldset>
+  <div
+    className="emotion-4"
+  >
+    <div>
+      <label
+        className="txt-l "
+        htmlFor="select-1817836307"
+        style={
+          Object {
+            "display": "flex",
+          }
+        }
+      >
+        <span
+          style={
+            Object {
+              "display": "flex",
+              "marginRight": "0.5em",
+              "whiteSpace": "nowrap",
+            }
+          }
+        >
+          Birthplace Country
+        </span>
+        <span
+          className="t--req"
+          style={
+            Object {
+              "display": "flex",
+            }
+          }
+        >
+          Required
+        </span>
+      </label>
       <div
-        className="a11y--content-start"
-        id="content-start"
-      />
-      <main
-        className="b-ff"
+        className="sel-c  "
       >
-        <div
-          aria-live="polite"
-          className="b-c"
+        <select
+          aria-label=""
+          className="sel-f  "
+          id="select-1817836307"
+          name="partnerA_birthCountry"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value="CAN"
         >
-          <h1
-            className="sh-title emotion-2"
+          <option />
+          <option
+            value="USA"
           >
-            Marriage Intention Application
-          </h1>
-          <div
-            className="emotion-3"
+            United States of America
+          </option>
+          <option
+            value="VIR"
           >
-            <div
-              className="progressbar"
-            >
-              <div
-                className="nav"
-              >
-                <a
-                  aria-label="Getting Started"
-                  className="completed focused current"
-                  onClick={[Function]}
-                  title="Getting Started"
-                >
-                  Getting Started
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 1"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Person 1"
-                >
-                  Person 1
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 2"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Person 2"
-                >
-                  Person 2
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Contact Info"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Contact Info"
-                >
-                  Contact Info
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Review"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Review"
-                >
-                  Review
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Submit"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Submit"
-                >
-                  Submit
-                  <span
-                    className="arrow"
-                  />
-                </a>
-              </div>
-              <div
-                className="progress-text"
-              >
-                <span>
-                  Step 1 of 6
-                </span>
-                <span
-                  className="mobile"
-                >
-                  : 
-                   
-                  Getting Started
-                </span>
-              </div>
-            </div>
-          </div>
-          <section
-            className="m-t500"
+            United States Virgin Islands
+          </option>
+          <option
+            value="AFG"
           >
-            <div
-              className="b-c b-c--nbp emotion-7"
-            >
-              <div
-                className="emotion-5"
-              >
-                <div
-                  className="emotion-4"
-                >
-                  <h1>
-                    Before You Get Started
-                  </h1>
-                  <div
-                    className="getting-started"
-                  >
-                    <p>
-                      <span
-                        className="emphasis"
-                      >
-                        The information you provide in this application will help us complete the marriage intention form, which is a legal document that is important for the marriage license.
-                      </span>
-                       
-                      During your appointment, we will review and finalize the information you share here and make sure everything's set before it is printed onto your marriage intention form.
-                    </p>
-                    <p>
-                      It should take about 
-                      <span
-                        className="emphasis"
-                      >
-                        15 minutes
-                      </span>
-                       
-                      to finish this application if you have all the information below. We recommend that you and your partner fill this out together.
-                    </p>
-                  </div>
-                  <h2>
-                    What We Need From You and Your Partner
-                  </h2>
-                  <div
-                    className="getting-started"
-                  >
-                    <ul>
-                      <li>
-                        Legal names and last names you'll use after marriage
-                      </li>
-                      <li>
-                        Birthdates and birthplaces
-                      </li>
-                      <li>
-                        Residential addresses
-                      </li>
-                      <li>
-                        If you've been married before, how many times and the status of your last marriage
-                      </li>
-                      <li>
-                        If you've been in a civil union or domestic partnership before, its location and status
-                      </li>
-                      <li>
-                        Parents' names (including their family names) and whether they were married when you were born
-                      </li>
-                    </ul>
-                  </div>
-                  <h2>
-                    Documents That Might Be Helpful
-                  </h2>
-                  <div
-                    className="getting-started"
-                  >
-                    <ul>
-                      <li>
-                        A government-issued ID
-                      </li>
-                      <li>
-                        A birth certificate
-                      </li>
-                    </ul>
-                  </div>
-                  <div>
-                    * If you edit your information you must click save and continue to save your changes
-                  </div>
-                </div>
-              </div>
-              <div
-                className="g g--mr emotion-6"
-              >
-                <div
-                  className="t--info g--6 m-b500"
-                />
-                <div
-                  className="g--6 ta-r m-b500"
-                >
-                  <button
-                    className="btn btn--b-sm"
-                    disabled={false}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    START
-                  </button>
-                </div>
-              </div>
-              <div
-                className="m-v700"
-              >
-                Questions? Email the Registry Department at
-                 
-                <a
-                  href="mailto:marriage@boston.gov"
-                  onClick={[Function]}
-                >
-                  marriage@boston.gov
-                </a>
-                .
-              </div>
-            </div>
-          </section>
-        </div>
-      </main>
-    </div>
-  </div>,
-  <footer
-    className="ft"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-<div class=\\"ft-c ft-ite\\">
-  <ul class=\\"ft-ll ft-ite-links\\">
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
-        BOS:311 - Report an issue
-      </a>
-    </li>
-
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
-    </li>
-  </ul>
-
-  <ul class=\\"ft-ll ft-ite-311\\">
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
-        <span class=\\"ft-ll-311\\">BOS:311</span>
-        <span class=\\"tablet--hidden\\"> - </span>
-        Report an issue
-      </a>
-    </li>
-  </ul>
-</div>
-",
-      }
-    }
-    style={
-      Object {
-        "position": "relative",
-        "zIndex": 2,
-      }
-    }
-  />,
-]
-`;
-
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date & Place, w/Country(CAN) 1`] = `
-.emotion-3 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-3 legend {
-  padding-left: 0;
-  font-size: 120%;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-}
-
-.emotion-1 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
-
-.emotion-1 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-}
-
-.emotion-1 input {
-  -moz-appearance: textfield;
-}
-
-.emotion-1 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-.emotion-1 input::-ms-clear {
-  display: none;
-}
-
-.emotion-1 label {
-  margin-top: 0.5rem;
-}
-
-.emotion-1.disabled {
-  opacity: 0.4;
-}
-
-.emotion-1.disabled * {
-  cursor: not-allowed;
-}
-
-.css-1d92czb .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-4 {
-  margin-bottom: 2em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-4 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-4 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-4 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-4 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-4 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-4 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-4 .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-4 .sel-c {
-  display: block;
-}
-
-.emotion-6 {
-  margin-bottom: 3em;
-  background: none;
-}
-
-.emotion-6 label {
-  margin-top: 0em;
-}
-
-.emotion-6 .spacingTop {
-  margin-top: 1.5em;
-}
-
-.emotion-6 label.inputHeading {
-  font-size: 0.875em;
-  text-transform: uppercase;
-}
-
-.emotion-6 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-6 .t--opt {
-  color: #58585b !important;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-6 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-6 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-6 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-6 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-6 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-6 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-6 .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-0 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.125rem;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  margin-top: 0.5em;
-  margin-bottom: 1.25em;
-  border-bottom: 4px solid #091f2f;
-  margin-bottom: 1em;
-}
-
-.emotion-0 h1 {
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-0 .notice {
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375rem;
-  font-style: italic;
-  font-weight: normal;
-  line-height: 1.2rem;
-  text-transform: none;
-  padding-top: 0.5em;
-  margin-top: 0.25em;
-  border-top: 4px solid #091f2f;
-}
-
-.emotion-0 .notice .tool-tip__wrapper {
-  display: inline-block;
-}
-
-.emotion-2 {
-  margin-bottom: 2.25em;
-}
-
-.css-lbsctu .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-3y8lfr .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-sifr7p .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-zx7u86 .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-17tc7bx .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-<div
-  className="emotion-6"
->
-  <h1
-    className="emotion-0"
-  >
-    Date and Place of Birth
-  </h1>
-  <fieldset
-    className="emotion-3"
-  >
-    <div
-      className="emotion-2"
-    >
-      <legend
-        style={
-          Object {
-            "display": "none",
-            "width": "100%",
-          }
-        }
-      >
-        Person A Date of Birth
-      </legend>
-      <div
-        className=" emotion-1"
-      >
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="dob-month"
-          >
-            Month
-            <span
-              aria-hidden="true"
-              className="t--req"
-              style={
-                Object {
-                  "marginLeft": "0.35em",
-                }
-              }
-            >
-              Required
-            </span>
-          </label>
-          <input
-            className="txt-f"
-            id="dob-month"
-            max="12"
-            maxLength={2}
-            min="1"
-            name="month"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="MM"
-            type="number"
-            value="9"
-          />
-        </div>
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="dob-day"
-          >
-            Day
-            <span
-              aria-hidden="true"
-              className="t--req"
-              style={
-                Object {
-                  "marginLeft": "0.35em",
-                }
-              }
-            >
-              Required
-            </span>
-          </label>
-          <input
-            className="txt-f"
-            id="dob-day"
-            max="31"
-            maxLength={2}
-            min="1"
-            name="day"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="DD"
-            type="number"
-            value="1"
-          />
-        </div>
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="dob-year"
-          >
-            Year
-            <span
-              aria-hidden="true"
-              className="t--req"
-              style={
-                Object {
-                  "marginLeft": "0.35em",
-                }
-              }
-            >
-              Required
-            </span>
-          </label>
-          <input
-            className="txt-f"
-            id="dob-year"
-            max={2024}
-            maxLength={4}
-            min="1000"
-            name="year"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="YYYY"
-            type="number"
-            value="2003"
-          />
-        </div>
-      </div>
-      
-    </div>
-  </fieldset>
-  <div
-    className="emotion-4"
-  >
-    <div>
-      <label
-        className="txt-l "
-        htmlFor="select-1817836307"
-        style={
-          Object {
-            "display": "flex",
-          }
-        }
-      >
-        <span
-          style={
-            Object {
-              "display": "flex",
-              "marginRight": "0.5em",
-              "whiteSpace": "nowrap",
-            }
-          }
-        >
-          Birthplace Country
-        </span>
-        <span
-          className="t--req"
-          style={
-            Object {
-              "display": "flex",
-            }
-          }
-        >
-          Required
-        </span>
-      </label>
-      <div
-        className="sel-c  "
-      >
-        <select
-          aria-label=""
-          className="sel-f  "
-          id="select-1817836307"
-          name="partnerA_birthCountry"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value="CAN"
-        >
-          <option />
-          <option
-            value="USA"
-          >
-            United States of America
-          </option>
-          <option
-            value="VIR"
-          >
-            United States Virgin Islands
-          </option>
-          <option
-            value="AFG"
-          >
-            Afghanistan
-          </option>
-          <option
-            value="ALA"
+            Afghanistan
+          </option>
+          <option
+            value="ALA"
           >
             Åland Islands
           </option>
@@ -65853,7 +65120,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date & Place, w/Country(USA) 1`] = `
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth Date & Place, w/Country(USA) 1`] = `
 .emotion-3 {
   border: none;
   padding: 0;
@@ -65914,7 +65181,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
   cursor: not-allowed;
 }
 
-.css-1d92czb .emotion-7:after {
+.css-1aiow01 .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -65930,6 +65197,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
   }
 }
 
+.emotion-4 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-4 > div {
   text-align: left;
 }
@@ -66005,6 +65276,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
   }
 }
 
+.emotion-8 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-8 > div {
   text-align: left;
 }
@@ -66080,27 +65355,37 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
   margin-bottom: 2.25em;
 }
 
-.css-lbsctu .emotion-7:after {
+.css-vfjwkx .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-wvkemw .emotion-7:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ahsdhq .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-3y8lfr .emotion-7:after {
+.css-1nb9jwk .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-sifr7p .emotion-7:after {
+.css-12yp9t2 .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-zx7u86 .emotion-7:after {
+.css-1ttcwo2 .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-17tc7bx .emotion-7:after {
+.css-99cy70 .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -67893,7 +67178,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date & Place, wo/Country 1`] = `
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth Date & Place, wo/Country 1`] = `
 .emotion-3 {
   border: none;
   padding: 0;
@@ -67965,6 +67250,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
   }
 }
 
+.emotion-4 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-4 > div {
   text-align: left;
 }
@@ -68040,6 +67329,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
   }
 }
 
+.emotion-5 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-5 > div {
   text-align: left;
 }
@@ -69501,7 +68794,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Birth Date
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, Default 1`] = `
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marriage, Default 1`] = `
 .emotion-0 {
   color: #091f2f;
   font-weight: 700;
@@ -69670,6 +68963,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, D
   }
 }
 
+.emotion-16 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-16 > div {
   text-align: left;
 }
@@ -69746,6 +69043,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, D
   }
 }
 
+.emotion-12 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-12 > div {
   text-align: left;
 }
@@ -69791,6 +69092,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, D
   }
 }
 
+.emotion-8 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-8 > div {
   text-align: left;
 }
@@ -70368,7 +69673,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Marriage, D
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fields, no surname 1`] = `
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming Fields, no surname 1`] = `
 .emotion-8 {
   margin-bottom: 3em;
   background: none;
@@ -70403,6 +69708,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   }
 }
 
+.emotion-8 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-8 > div {
   text-align: left;
 }
@@ -70587,6 +69896,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   }
 }
 
+.emotion-6 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-6 > div {
   text-align: left;
 }
@@ -70629,27 +69942,37 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   display: block;
 }
 
-.css-1btkjiq .emotion-1:after {
+.css-1jy3mvz .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-lbsctu .emotion-1:after {
+.css-vfjwkx .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-3y8lfr .emotion-1:after {
+.css-wvkemw .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-sifr7p .emotion-1:after {
+.css-1ahsdhq .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-zx7u86 .emotion-1:after {
+.css-1nb9jwk .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-12yp9t2 .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ttcwo2 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -71049,7 +70372,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fields, w/surname 1`] = `
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming Fields, w/surname 1`] = `
 .emotion-11 {
   margin-bottom: 3em;
   background: none;
@@ -71084,6 +70407,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   }
 }
 
+.emotion-11 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-11 > div {
   text-align: left;
 }
@@ -71268,6 +70595,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   }
 }
 
+.emotion-9 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-9 > div {
   text-align: left;
 }
@@ -71310,27 +70641,37 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   display: block;
 }
 
-.css-1btkjiq .emotion-1:after {
+.css-1jy3mvz .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-vfjwkx .emotion-1:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-wvkemw .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-lbsctu .emotion-1:after {
+.css-1ahsdhq .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-3y8lfr .emotion-1:after {
+.css-1nb9jwk .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-sifr7p .emotion-1:after {
+.css-12yp9t2 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-zx7u86 .emotion-1:after {
+.css-1ttcwo2 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -71342,6 +70683,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
   }
 }
 
+.emotion-7 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-7 > div {
   text-align: left;
 }
@@ -71850,8 +71195,8 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Naming Fiel
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende, City Hall 1`] = `
-.css-1d92czb .emotion-4:after {
+exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Residende, City Hall 1`] = `
+.css-1aiow01 .emotion-4:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -71960,6 +71305,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
   }
 }
 
+.emotion-2 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-2 > div {
   text-align: left;
 }
@@ -72002,7 +71351,7 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
   display: block;
 }
 
-.css-1btkjiq .emotion-4:after {
+.css-1jy3mvz .emotion-4:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -72044,6 +71393,10 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
   }
 }
 
+.emotion-6 .ra-l {
+  font-size: 0.9375em;
+}
+
 .emotion-6 > div {
   text-align: left;
 }
@@ -72082,22 +71435,32 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
   opacity: 0;
 }
 
-.css-3y8lfr .emotion-4:after {
+.css-wvkemw .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ahsdhq .emotion-4:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1nb9jwk .emotion-4:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-sifr7p .emotion-4:after {
+.css-12yp9t2 .emotion-4:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-zx7u86 .emotion-4:after {
+.css-1ttcwo2 .emotion-4:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-17tc7bx .emotion-4:after {
+.css-99cy70 .emotion-4:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -73893,10040 +73256,1384 @@ exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 - Residende,
 </div>
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 2. Person 1 1`] = `
-Array [
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>,
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />,
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />,
-  .emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
+exports[`Storyshots Marriage Intention/Form Components Step 5. Review - Contact [Section] 1`] = `
 .emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-48 fieldset + fieldset {
-  margin-top: 2rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 1em 0;
+  color: #fff;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-48 fieldset + fieldset {
-    margin-top: 4rem;
-  }
-
-  .emotion-48 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
+.emotion-0 .wrapper-title {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
-.emotion-47 {
-  margin: 0;
-  padding: 0;
-  border: none;
+.emotion-0 .wrapper-title h1,
+.emotion-0 .wrapper-title h2 {
+  color: #091f2f;
+  font-size: 1.5625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  line-height: 1.875em;
 }
 
-.emotion-47 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
+.emotion-0 .wrapper-title h2 {
+  font-size: 1.125rem;
 }
 
-.emotion-47 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
+.emotion-0 .wrapper-btn .btn {
   color: #091f2f;
+  background: #fff;
+  border: 2px solid #091f2f;
 }
 
-.emotion-47 .desc {
-  margin: 0.5rem 0 0.75rem;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375em;
-  font-weight: 100;
-  color: #58585b;
-  line-height: 1.2em;
-}
-
-.emotion-50 {
-  text-align: center;
+.emotion-0 .wrapper-btn .btn:hover {
+  color: #fff;
+  background: #1871bd;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-50 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-50 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-50 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-50 .lnk {
-    padding-left: 0;
+@media screen and (max-width:480px) {
+  .emotion-0 .wrapper-title h1 {
+    line-height: 1.25em;
   }
 }
 
-.emotion-49 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
-.emotion-17 {
-  border: none;
-  padding: 0;
-  margin: 0;
+.emotion-1 .section-wrapper {
+  font-size: 0.9375rem;
+  font-family: Montserrat,Arial,sans-serif;
+  margin-bottom: 2em;
 }
 
-.emotion-17 legend {
-  padding-left: 0;
-  font-size: 120%;
+.emotion-1 .section-wrapper h2 {
+  color: #091f2f;
+  font-size: 1.125rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 0.5em;
 }
 
-.emotion-15 {
+.emotion-1 .section-wrapper .field-value-pair {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-}
-
-.emotion-15 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
-
-.emotion-15 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-}
-
-.emotion-15 input {
-  -moz-appearance: textfield;
-}
-
-.emotion-15 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-.emotion-15 input::-ms-clear {
-  display: none;
-}
-
-.emotion-15 label {
-  margin-top: 0.5rem;
-}
-
-.emotion-15.disabled {
-  opacity: 0.4;
-}
-
-.emotion-15.disabled * {
-  cursor: not-allowed;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
-  }
+  margin-bottom: 1em;
 }
 
-.emotion-3 {
-  display: grid;
-  margin: auto;
-  margin-top: 0.75rem;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
+.emotion-1 .section-wrapper .field-value-pair label {
+  font-weight: normal;
 }
 
-.emotion-3 .progressbar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
+.emotion-1 .section-wrapper .field-value-pair .field {
+  display: inline-block;
+  width: 60%;
+  color: #58585b;
+  font-size: 0.9375rem;
+  text-transform: uppercase;
 }
 
-.emotion-3 .progressbar .nav {
-  display: table;
-  table-layout: fixed;
-  text-align: center;
-  line-height: normal;
-  font-style: normal;
-  font-weight: bold;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  color: '#58585B';
+.emotion-1 .section-wrapper .field-value-pair .value {
+  display: inline-block;
+  width: 40%;
+  font-weight: normal;
 }
 
-.emotion-3 .progressbar .nav a {
-  display: table-cell;
-  border-width: 1px;
-  border-color: black;
-  border-style: solid;
-  border-left-width: 0;
-  padding: 0.85em 0.5em;
-  color: black;
-  background: #fff;
-  width: 2%;
-  font-size: 0.85em;
-}
-
-.emotion-3 .progressbar .nav a:last-child {
-  grid-column-start: 2;
-}
-
-.emotion-3 .progressbar .nav a:first-child {
-  border-left-width: 1px;
-}
+<div>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="wrapper-title"
+    >
+      <h1>
+        Contact Information
+      </h1>
+    </div>
+    <div
+      className="wrapper-btn"
+    >
+      <button
+        className="btn btn--b-sm"
+        onClick={[Function]}
+        type="button"
+      >
+        Edit This Page
+      </button>
+    </div>
+  </div>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Personal Information
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Email
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          phillip.kelly@boston.gov
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Phone #
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          (617) 000-1111
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Appointment Date
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Sep 23, 1982
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
-.emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed.current {
-  cursor: pointer;
+exports[`Storyshots Marriage Intention/Form Components Step 5. Review/Person Info View 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 1em 0;
   color: #fff;
-  background: #1871bd;
-}
-
-.emotion-3 .progressbar .nav a.uncompleted {
-  background: #C8C8C8;
-}
-
-.emotion-3 .progressbar .nav a.completed.focused.current {
-  color: #000;
-  cursor: pointer;
-  background: #f2f2f2;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  color: #000;
-  cursor: pointer;
-  background: #b0d9ff;
-}
-
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover,
-.emotion-3 .progressbar .nav a.completed.focused.done.current {
-  color: #000;
-  cursor: default;
-  background: #f2f2f2;
+.emotion-0 .wrapper-title {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
-.emotion-3 .progressbar .nav a.completed.current {
-  color: #000;
-  background: #f2f2f2;
+.emotion-0 .wrapper-title h1,
+.emotion-0 .wrapper-title h2 {
+  color: #091f2f;
+  font-size: 1.5625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  line-height: 1.875em;
 }
 
-.emotion-3 .progressbar .progress-text {
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  font-style: italic;
-  font-size: 1rem;
-  margin-top: 0.5rem;
+.emotion-0 .wrapper-title h2 {
+  font-size: 1.125rem;
 }
 
-.emotion-3 .progressbar .progress-text .mobile {
-  display: none;
+.emotion-0 .wrapper-btn .btn {
+  color: #091f2f;
+  background: #fff;
+  border: 2px solid #091f2f;
 }
 
-@media screen and (max-width:540px) {
-  .emotion-3 {
-    max-width: 25.875em;
-  }
-
-  .emotion-3 .progressbar .nav a {
-    overflow: hidden;
-    min-width: 10px;
-    padding: 0.5em 0;
-    text-indent: -500px;
-    line-height: 0;
-  }
-
-  .emotion-3 .progressbar .progress-text .mobile {
-    display: inline-block;
-  }
+.emotion-0 .wrapper-btn .btn:hover {
+  color: #fff;
+  background: #1871bd;
 }
 
-@media (min-width:541px) and (max-width:1024px) {
-  .emotion-3 .progressbar .nav a {
-    padding: 0.85em 0;
-    font-size: 0.55rem;
+@media screen and (max-width:480px) {
+  .emotion-0 .wrapper-title h1 {
+    line-height: 1.25em;
   }
 }
 
-.emotion-51 {
-  padding: 0px;
+.emotion-1 .section-wrapper {
+  font-size: 0.9375rem;
+  font-family: Montserrat,Arial,sans-serif;
+  margin-bottom: 2em;
 }
 
-.emotion-4 {
+.emotion-1 .section-wrapper h2 {
   color: #091f2f;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: Montserrat,Arial,sans-serif;
+  font-size: 1.125rem;
+  font-weight: bold;
   text-transform: uppercase;
-  padding-bottom: 0.25em;
-}
-
-.emotion-4 h2 {
-  margin-bottom: 3.9375rem;
-}
-
-.emotion-13 {
-  margin-bottom: 3em;
-  background: none;
-  margin-bottom: 1.5em;
+  margin-bottom: 0.5em;
 }
 
-.emotion-13 label {
-  margin-top: 0em;
+.emotion-1 .section-wrapper .field-value-pair {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 1em;
 }
 
-.emotion-13 .spacingTop {
-  margin-top: 1.5em;
+.emotion-1 .section-wrapper .field-value-pair label {
+  font-weight: normal;
 }
 
-.emotion-13 label.inputHeading {
-  font-size: 0.875em;
+.emotion-1 .section-wrapper .field-value-pair .field {
+  display: inline-block;
+  width: 60%;
+  color: #58585b;
+  font-size: 0.9375rem;
   text-transform: uppercase;
 }
 
-.emotion-13 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-13 .t--opt {
-  color: #58585b !important;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-13 {
-    margin-left: auto;
-    margin-right: auto;
-  }
+.emotion-1 .section-wrapper .field-value-pair .value {
+  display: inline-block;
+  width: 40%;
+  font-weight: normal;
 }
 
-.emotion-13 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-13 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-13 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-13 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-13 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-13 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-5 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.125rem;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  margin-top: 0.5em;
-  margin-bottom: 1.25em;
-}
-
-.emotion-5 h1 {
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-5 .notice {
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375rem;
-  font-style: italic;
-  font-weight: normal;
-  line-height: 1.2rem;
-  text-transform: none;
-  padding-top: 0.5em;
-  margin-top: 0.25em;
-  border-top: 4px solid #091f2f;
-}
-
-.emotion-5 .notice .tool-tip__wrapper {
-  display: inline-block;
-}
-
-.emotion-9 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-bottom: 1em;
-}
-
-.emotion-9 > label {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-left: 0;
-  margin-bottom: 1em;
-}
-
-.emotion-9 .radio-group__label label .ra-l {
-  font-size: 0.8125rem;
-}
-
-.emotion-9 .radio-group__label .txt-l {
-  font-size: 0.875em;
-  margin-bottom: 0.75em;
-  margin-top: 0;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-9 .cb {
-    margin: 0;
-    margin-left: 0;
-    margin-bottom: 1em;
-  }
-
-  .emotion-9 .cb:not(:first-of-type) {
-    margin-left: 0;
-  }
-}
-
-.emotion-8 {
-  margin-bottom: 1.5em;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
-}
-
-.emotion-7 .icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
-}
-
-.emotion-7 .icon::before {
-  content: '?';
-}
-
-.emotion-7 .tt--info {
-  text-transform: lowercase;
-  padding-left: 3.5px;
-}
-
-.emotion-7 .tt--info::before {
-  content: 'i';
-}
-
-.emotion-7 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
-  padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-weight: 300;
-  font-style: italic;
-  text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
-}
-
-.emotion-7 .icon:hover + .msg {
-  visibility: visible;
-}
-
-.emotion-11 {
-  margin-bottom: 2em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-11 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-11 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-11 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-11 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-11 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-11 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-11 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-11 .sel-c {
-  display: block;
-}
-
-.emotion-19 {
-  margin-bottom: 3em;
-  background: none;
-}
-
-.emotion-19 label {
-  margin-top: 0em;
-}
-
-.emotion-19 .spacingTop {
-  margin-top: 1.5em;
-}
-
-.emotion-19 label.inputHeading {
-  font-size: 0.875em;
-  text-transform: uppercase;
-}
-
-.emotion-19 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-19 .t--opt {
-  color: #58585b !important;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-19 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-19 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-19 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-19 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-19 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-19 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-19 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-14 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.125rem;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  margin-top: 0.5em;
-  margin-bottom: 1.25em;
-  border-bottom: 4px solid #091f2f;
-  margin-bottom: 1em;
-}
-
-.emotion-14 h1 {
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-14 .notice {
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375rem;
-  font-style: italic;
-  font-weight: normal;
-  line-height: 1.2rem;
-  text-transform: none;
-  padding-top: 0.5em;
-  margin-top: 0.25em;
-  border-top: 4px solid #091f2f;
-}
-
-.emotion-14 .notice .tool-tip__wrapper {
-  display: inline-block;
-}
-
-.emotion-16 {
-  margin-bottom: 2.25em;
-}
-
-.emotion-24 {
-  margin-bottom: 3em;
-  background: none;
-}
-
-.emotion-24 label {
-  margin-top: 0em;
-}
-
-.emotion-24 .spacingTop {
-  margin-top: 1.5em;
-}
-
-.emotion-24 label.inputHeading {
-  font-size: 0.875em;
-  text-transform: uppercase;
-}
-
-.emotion-24 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-24 .t--opt {
-  color: #58585b !important;
-}
-
-.emotion-23 {
-  margin-bottom: 2.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-23 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-23 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-23 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-23 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-23 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-23 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-23 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-33 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-33 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-33 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-33 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-33 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-33 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-33 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-33 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-36 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
-}
-
-.emotion-36 .icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
-}
-
-.emotion-36 .icon::before {
-  content: '?';
-}
-
-.emotion-36 .tt--info {
-  text-transform: lowercase;
-  padding-left: 3.5px;
-}
-
-.emotion-36 .tt--info::before {
-  content: 'i';
-}
-
-.emotion-36 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
-  padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-weight: 300;
-  font-style: italic;
-  text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
-}
-
-.emotion-36 .icon:hover + .msg {
-  visibility: visible;
-}
-
-.emotion-45 {
-  margin-bottom: 2.5em;
-}
-
-.emotion-45 h2 {
-  font-size: 1.5rem;
-}
-
-.emotion-45 h4 {
-  font-size: 1.25rem;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-45 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-45 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-45 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-45 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-45 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-45 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-45 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-43 {
-  margin-top: 1em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-43 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-43 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-43 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-43 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-43 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-43 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-43 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-<div
-    className="mn--full-ie"
-  >
-    <div
-      className="mn mn--full "
-    >
-      <input
-        aria-hidden="true"
-        className="s-tr"
-        id="s-tr"
-        type="checkbox"
-      />
-      <header
-        className="h"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "
-  <label for=\\"brg-tr\\" class=\\"brg-b\\">
-    <div class=\\"brg\\">
-      <span class=\\"brg-c\\">
-        <span class=\\"brg-c-i\\"></span>
-      </span>
-      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
-    </div>
-  </label>
-
-  <div class=\\"lo lo--abs\\">
-    <div class=\\"lo-l\\">
-      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
-        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
-      </a>
-      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
-    </div>
-  </div>
-  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
-  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
-</a>
-
-<nav class=\\"nv-h\\">
-  <ul class=\\"nv-h-l\\">
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
-    <li class=\\"tr nv-h-l-i\\">
-      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
-      <ul class=\\"tr-dd\\">
-        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
-      </ul>
-    </li>
-    <li class=\\"nv-h-l-i\\">
-      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
-        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
-      </label>
-    </li>
-  </ul>
-</nav>
-
-<div class=\\"h-s\\">
-  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
-    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
-    <div class=\\"sf-i\\">
-      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
-      <button class=\\"sf-i-b\\">Search</button>
-    </div>
-  </form>
-</div>
-  ",
-          }
-        }
-        role="banner"
-      />
-      <div
-        className="p-t300"
-      >
-        <nav
-          aria-label="Breadcrumbs"
-          className="brc p-a300 emotion-1"
-        >
-          <ul
-            className="brc-l"
-          >
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/"
-              >
-                Home
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/departments"
-              >
-                Departments
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/departments/registry"
-              >
-                Registry: Birth, death, and marriage and marriage intention
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                aria-current="page"
-                className="emotion-0"
-                href="/marriageintention"
-              >
-                Marriage Intention
-              </a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-      <div
-        className="a11y--content-start"
-        id="content-start"
-      />
-      <main
-        className="b-ff"
-      >
-        <div
-          aria-live="polite"
-          className="b-c"
-        >
-          <h1
-            className="sh-title emotion-2"
-          >
-            Marriage Intention Application
-          </h1>
-          <div
-            className="emotion-3"
-          >
-            <div
-              className="progressbar"
-            >
-              <div
-                className="nav"
-              >
-                <a
-                  aria-label="Getting Started"
-                  className="completed"
-                  onClick={[Function]}
-                  title="Getting Started"
-                >
-                  Getting Started
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 1"
-                  className="completed focused current"
-                  onClick={[Function]}
-                  title="Person 1"
-                >
-                  Person 1
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 2"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Person 2"
-                >
-                  Person 2
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Contact Info"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Contact Info"
-                >
-                  Contact Info
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Review"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Review"
-                >
-                  Review
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Submit"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Submit"
-                >
-                  Submit
-                  <span
-                    className="arrow"
-                  />
-                </a>
-              </div>
-              <div
-                className="progress-text"
-              >
-                <span>
-                  Step 2 of 6
-                </span>
-                <span
-                  className="mobile"
-                >
-                  : 
-                   
-                  Person 1
-                </span>
-              </div>
-            </div>
-          </div>
-          <section
-            className="m-t500"
-          >
-            <div
-              className="b-c b-c--nbp emotion-51"
-            >
-              <div
-                className="emotion-48"
-              >
-                <fieldset
-                  className=" emotion-47"
-                >
-                  <legend>
-                    <h2
-                      className="emotion-4"
-                    >
-                      Person 
-                      1
-                    </h2>
-                  </legend>
-                  <div
-                    className="emotion-13"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Personal Information
-                      <div
-                        className="notice"
-                      >
-                        Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
-                      </div>
-                    </h1>
-                    <span />
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2048906072"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          First Name
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="t--req"
-                          style={
-                            Object {
-                              "display": "flex",
-                              "flexGrow": 1,
-                            }
-                          }
-                        >
-                          Required
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-2048906072"
-                        maxLength={100}
-                        name="partnerA_firstName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2852212527"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Middle Name
-                        </span>
-                      </label>
-                      <label
-                        className="notice emotion-6"
-                      >
-                        Please enter your middle name if you have one. You cannot list a new middle name.
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-2852212527"
-                        maxLength={50}
-                        name="partnerA_middleName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-1103291528"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Last Name
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="t--req"
-                          style={
-                            Object {
-                              "display": "flex",
-                              "flexGrow": 1,
-                            }
-                          }
-                        >
-                          Required
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-1103291528"
-                        maxLength={100}
-                        name="partnerA_lastName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-8"
-                      >
-                        <div
-                          aria-labelledby="partnerA_useSurname-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerA_useSurname-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Would you like to change your last name?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
-                            >
-                              <div
-                                className="icon"
-                              />
-                              <div
-                                className="msg"
-                              >
-                                Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
-                              </div>
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_useSurname"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_useSurname"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-11"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="select-2202529938"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                                "whiteSpace": "nowrap",
-                              }
-                            }
-                          >
-                            Suffix
-                          </span>
-                          <span
-                            className="t--req t--opt"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Optional
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-6"
-                        >
-                          Please select your suffix if you have one.
-                        </label>
-                        <div
-                          className="sel-c  "
-                        >
-                          <select
-                            aria-label=""
-                            className="sel-f  "
-                            id="select-2202529938"
-                            name="partnerA_suffix"
-                            onChange={[Function]}
-                            value=""
-                          >
-                            <option />
-                            <option
-                              value="I"
-                            >
-                              I
-                            </option>
-                            <option
-                              value="II"
-                            >
-                              II
-                            </option>
-                            <option
-                              value="III"
-                            >
-                              III
-                            </option>
-                            <option
-                              value="IV"
-                            >
-                              IV
-                            </option>
-                            <option
-                              value="V"
-                            >
-                              V
-                            </option>
-                            <option
-                              value="VI"
-                            >
-                              VI
-                            </option>
-                            <option
-                              value="Jr."
-                            >
-                              Jr.
-                            </option>
-                            <option
-                              value="Sr."
-                            >
-                              Sr.
-                            </option>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2786084594"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Occupation
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="t--req"
-                          style={
-                            Object {
-                              "display": "flex",
-                              "flexGrow": 1,
-                            }
-                          }
-                        >
-                          Required
-                          <span
-                            className="tool-tip__wrapper emotion-7"
-                          >
-                            <div
-                              className="icon"
-                            />
-                            <div
-                              className="msg"
-                            >
-                              This information is collected as required by the Massachusetts State Marriage Intention Form.
-                            </div>
-                          </span>
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-2786084594"
-                        maxLength={100}
-                        name="partnerA_occupation"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-19"
-                  >
-                    <h1
-                      className="emotion-14"
-                    >
-                      Date and Place of Birth
-                    </h1>
-                    <span />
-                    <fieldset
-                      className="emotion-17"
-                    >
-                      <div
-                        className="emotion-16"
-                      >
-                        <legend
-                          style={
-                            Object {
-                              "display": "none",
-                              "width": "100%",
-                            }
-                          }
-                        >
-                          Person A Date of Birth
-                        </legend>
-                        <div
-                          className=" emotion-15"
-                        >
-                          <div>
-                            <label
-                              className="txt-l"
-                              htmlFor="dob-month"
-                            >
-                              Month
-                              <span
-                                aria-hidden="true"
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "marginLeft": "0.35em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                            </label>
-                            <input
-                              className="txt-f"
-                              id="dob-month"
-                              max="12"
-                              maxLength={2}
-                              min="1"
-                              name="month"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              placeholder="MM"
-                              type="number"
-                              value=""
-                            />
-                          </div>
-                          <div>
-                            <label
-                              className="txt-l"
-                              htmlFor="dob-day"
-                            >
-                              Day
-                              <span
-                                aria-hidden="true"
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "marginLeft": "0.35em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                            </label>
-                            <input
-                              className="txt-f"
-                              id="dob-day"
-                              max="31"
-                              maxLength={2}
-                              min="1"
-                              name="day"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              placeholder="DD"
-                              type="number"
-                              value=""
-                            />
-                          </div>
-                          <div>
-                            <label
-                              className="txt-l"
-                              htmlFor="dob-year"
-                            >
-                              Year
-                              <span
-                                aria-hidden="true"
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "marginLeft": "0.35em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                            </label>
-                            <input
-                              className="txt-f"
-                              id="dob-year"
-                              max={2024}
-                              maxLength={4}
-                              min="1000"
-                              name="year"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              placeholder="YYYY"
-                              type="number"
-                              value=""
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </fieldset>
-                    <div
-                      className="emotion-11"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="select-1817836307"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                                "whiteSpace": "nowrap",
-                              }
-                            }
-                          >
-                            Birthplace Country
-                          </span>
-                          <span
-                            className="t--req"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Required
-                          </span>
-                        </label>
-                        <div
-                          className="sel-c  "
-                        >
-                          <select
-                            aria-label=""
-                            className="sel-f  "
-                            id="select-1817836307"
-                            name="partnerA_birthCountry"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            value=""
-                          >
-                            <option />
-                            <option
-                              value="USA"
-                            >
-                              United States of America
-                            </option>
-                            <option
-                              value="VIR"
-                            >
-                              United States Virgin Islands
-                            </option>
-                            <option
-                              value="AFG"
-                            >
-                              Afghanistan
-                            </option>
-                            <option
-                              value="ALA"
-                            >
-                              Åland Islands
-                            </option>
-                            <option
-                              value="ALB"
-                            >
-                              Albania
-                            </option>
-                            <option
-                              value="DZA"
-                            >
-                              Algeria
-                            </option>
-                            <option
-                              value="ASM"
-                            >
-                              American Samoa
-                            </option>
-                            <option
-                              value="AND"
-                            >
-                              Andorra
-                            </option>
-                            <option
-                              value="AGO"
-                            >
-                              Angola
-                            </option>
-                            <option
-                              value="AIA"
-                            >
-                              Anguilla
-                            </option>
-                            <option
-                              value="ATG"
-                            >
-                              Antigua and Barbuda
-                            </option>
-                            <option
-                              value="ARG"
-                            >
-                              Argentina
-                            </option>
-                            <option
-                              value="ARM"
-                            >
-                              Armenia
-                            </option>
-                            <option
-                              value="ABW"
-                            >
-                              Aruba
-                            </option>
-                            <option
-                              value="AUS"
-                            >
-                              Australia
-                            </option>
-                            <option
-                              value="AUT"
-                            >
-                              Austria
-                            </option>
-                            <option
-                              value="AZE"
-                            >
-                              Azerbaijan
-                            </option>
-                            <option
-                              value="BHS"
-                            >
-                              Bahamas
-                            </option>
-                            <option
-                              value="BHR"
-                            >
-                              Bahrain
-                            </option>
-                            <option
-                              value="BGD"
-                            >
-                              Bangladesh
-                            </option>
-                            <option
-                              value="BRB"
-                            >
-                              Barbados
-                            </option>
-                            <option
-                              value="BLR"
-                            >
-                              Belarus
-                            </option>
-                            <option
-                              value="BEL"
-                            >
-                              Belgium
-                            </option>
-                            <option
-                              value="BLZ"
-                            >
-                              Belize
-                            </option>
-                            <option
-                              value="BEN"
-                            >
-                              Benin
-                            </option>
-                            <option
-                              value="BMU"
-                            >
-                              Bermuda
-                            </option>
-                            <option
-                              value="BTN"
-                            >
-                              Bhutan
-                            </option>
-                            <option
-                              value="BOL"
-                            >
-                              Bolivia (Plurinational State of)
-                            </option>
-                            <option
-                              value="BES"
-                            >
-                              Bonaire, Saint Eustatius and Saba
-                            </option>
-                            <option
-                              value="BIH"
-                            >
-                              Bosnia and Herzegovina
-                            </option>
-                            <option
-                              value="BWA"
-                            >
-                              Botswana
-                            </option>
-                            <option
-                              value="BRA"
-                            >
-                              Brazil
-                            </option>
-                            <option
-                              value="VGB"
-                            >
-                              British Virgin Islands
-                            </option>
-                            <option
-                              value="BRN"
-                            >
-                              Brunei Darussalam
-                            </option>
-                            <option
-                              value="BGR"
-                            >
-                              Bulgaria
-                            </option>
-                            <option
-                              value="BFA"
-                            >
-                              Burkina Faso
-                            </option>
-                            <option
-                              value="BDI"
-                            >
-                              Burundi
-                            </option>
-                            <option
-                              value="CPV"
-                            >
-                              Cabo Verde
-                            </option>
-                            <option
-                              value="KHM"
-                            >
-                              Cambodia
-                            </option>
-                            <option
-                              value="CMR"
-                            >
-                              Cameroon
-                            </option>
-                            <option
-                              value="CAN"
-                            >
-                              Canada
-                            </option>
-                            <option
-                              value="CYM"
-                            >
-                              Cayman Islands
-                            </option>
-                            <option
-                              value="CAF"
-                            >
-                              Central African Republic
-                            </option>
-                            <option
-                              value="TCD"
-                            >
-                              Chad
-                            </option>
-                            <option
-                              value="CHL"
-                            >
-                              Chile
-                            </option>
-                            <option
-                              value="CHN"
-                            >
-                              China
-                            </option>
-                            <option
-                              value="HKG"
-                            >
-                              China, Hong Kong Special Administrative Region
-                            </option>
-                            <option
-                              value="MAC"
-                            >
-                              China, Macao Special Administrative Region
-                            </option>
-                            <option
-                              value="COL"
-                            >
-                              Colombia
-                            </option>
-                            <option
-                              value="COM"
-                            >
-                              Comoros
-                            </option>
-                            <option
-                              value="COG"
-                            >
-                              Congo
-                            </option>
-                            <option
-                              value="COK"
-                            >
-                              Cook Islands
-                            </option>
-                            <option
-                              value="CRI"
-                            >
-                              Costa Rica
-                            </option>
-                            <option
-                              value="CIV"
-                            >
-                              Côte d'Ivoire
-                            </option>
-                            <option
-                              value="HRV"
-                            >
-                              Croatia
-                            </option>
-                            <option
-                              value="CUB"
-                            >
-                              Cuba
-                            </option>
-                            <option
-                              value="CUW"
-                            >
-                              Curaçao
-                            </option>
-                            <option
-                              value="CYP"
-                            >
-                              Cyprus
-                            </option>
-                            <option
-                              value="CZE"
-                            >
-                              Czech Republic
-                            </option>
-                            <option
-                              value="PRK"
-                            >
-                              Democratic People's Republic of Korea
-                            </option>
-                            <option
-                              value="COD"
-                            >
-                              Democratic Republic of the Congo
-                            </option>
-                            <option
-                              value="DNK"
-                            >
-                              Denmark
-                            </option>
-                            <option
-                              value="DJI"
-                            >
-                              Djibouti
-                            </option>
-                            <option
-                              value="DMA"
-                            >
-                              Dominica
-                            </option>
-                            <option
-                              value="DOM"
-                            >
-                              Dominican Republic
-                            </option>
-                            <option
-                              value="ECU"
-                            >
-                              Ecuador
-                            </option>
-                            <option
-                              value="EGY"
-                            >
-                              Egypt
-                            </option>
-                            <option
-                              value="SLV"
-                            >
-                              El Salvador
-                            </option>
-                            <option
-                              value="GNQ"
-                            >
-                              Equatorial Guinea
-                            </option>
-                            <option
-                              value="ERI"
-                            >
-                              Eritrea
-                            </option>
-                            <option
-                              value="EST"
-                            >
-                              Estonia
-                            </option>
-                            <option
-                              value="ETH"
-                            >
-                              Ethiopia
-                            </option>
-                            <option
-                              value="FRO"
-                            >
-                              Faeroe Islands
-                            </option>
-                            <option
-                              value="FLK"
-                            >
-                              Falkland Islands (Malvinas)
-                            </option>
-                            <option
-                              value="FJI"
-                            >
-                              Fiji
-                            </option>
-                            <option
-                              value="FIN"
-                            >
-                              Finland
-                            </option>
-                            <option
-                              value="FRA"
-                            >
-                              France
-                            </option>
-                            <option
-                              value="GUF"
-                            >
-                              French Guiana
-                            </option>
-                            <option
-                              value="PYF"
-                            >
-                              French Polynesia
-                            </option>
-                            <option
-                              value="GAB"
-                            >
-                              Gabon
-                            </option>
-                            <option
-                              value="GMB"
-                            >
-                              Gambia
-                            </option>
-                            <option
-                              value="GEO"
-                            >
-                              Georgia
-                            </option>
-                            <option
-                              value="DEU"
-                            >
-                              Germany
-                            </option>
-                            <option
-                              value="GHA"
-                            >
-                              Ghana
-                            </option>
-                            <option
-                              value="GIB"
-                            >
-                              Gibraltar
-                            </option>
-                            <option
-                              value="GRC"
-                            >
-                              Greece
-                            </option>
-                            <option
-                              value="GRL"
-                            >
-                              Greenland
-                            </option>
-                            <option
-                              value="GRD"
-                            >
-                              Grenada
-                            </option>
-                            <option
-                              value="GLP"
-                            >
-                              Guadeloupe
-                            </option>
-                            <option
-                              value="GUM"
-                            >
-                              Guam
-                            </option>
-                            <option
-                              value="GTM"
-                            >
-                              Guatemala
-                            </option>
-                            <option
-                              value="GGY"
-                            >
-                              Guernsey
-                            </option>
-                            <option
-                              value="GIN"
-                            >
-                              Guinea
-                            </option>
-                            <option
-                              value="GNB"
-                            >
-                              Guinea-Bissau
-                            </option>
-                            <option
-                              value="GUY"
-                            >
-                              Guyana
-                            </option>
-                            <option
-                              value="HTI"
-                            >
-                              Haiti
-                            </option>
-                            <option
-                              value="VAT"
-                            >
-                              Holy See
-                            </option>
-                            <option
-                              value="HND"
-                            >
-                              Honduras
-                            </option>
-                            <option
-                              value="HUN"
-                            >
-                              Hungary
-                            </option>
-                            <option
-                              value="ISL"
-                            >
-                              Iceland
-                            </option>
-                            <option
-                              value="IND"
-                            >
-                              India
-                            </option>
-                            <option
-                              value="IDN"
-                            >
-                              Indonesia
-                            </option>
-                            <option
-                              value="IRN"
-                            >
-                              Iran (Islamic Republic of)
-                            </option>
-                            <option
-                              value="IRQ"
-                            >
-                              Iraq
-                            </option>
-                            <option
-                              value="IRL"
-                            >
-                              Ireland
-                            </option>
-                            <option
-                              value="IMN"
-                            >
-                              Isle of Man
-                            </option>
-                            <option
-                              value="ISR"
-                            >
-                              Israel
-                            </option>
-                            <option
-                              value="ITA"
-                            >
-                              Italy
-                            </option>
-                            <option
-                              value="JAM"
-                            >
-                              Jamaica
-                            </option>
-                            <option
-                              value="JPN"
-                            >
-                              Japan
-                            </option>
-                            <option
-                              value="JEY"
-                            >
-                              Jersey
-                            </option>
-                            <option
-                              value="JOR"
-                            >
-                              Jordan
-                            </option>
-                            <option
-                              value="KAZ"
-                            >
-                              Kazakhstan
-                            </option>
-                            <option
-                              value="KEN"
-                            >
-                              Kenya
-                            </option>
-                            <option
-                              value="KIR"
-                            >
-                              Kiribati
-                            </option>
-                            <option
-                              value="KWT"
-                            >
-                              Kuwait
-                            </option>
-                            <option
-                              value="KGZ"
-                            >
-                              Kyrgyzstan
-                            </option>
-                            <option
-                              value="LAO"
-                            >
-                              Lao People's Democratic Republic
-                            </option>
-                            <option
-                              value="LVA"
-                            >
-                              Latvia
-                            </option>
-                            <option
-                              value="LBN"
-                            >
-                              Lebanon
-                            </option>
-                            <option
-                              value="LSO"
-                            >
-                              Lesotho
-                            </option>
-                            <option
-                              value="LBR"
-                            >
-                              Liberia
-                            </option>
-                            <option
-                              value="LBY"
-                            >
-                              Libya
-                            </option>
-                            <option
-                              value="LIE"
-                            >
-                              Liechtenstein
-                            </option>
-                            <option
-                              value="LTU"
-                            >
-                              Lithuania
-                            </option>
-                            <option
-                              value="LUX"
-                            >
-                              Luxembourg
-                            </option>
-                            <option
-                              value="MDG"
-                            >
-                              Madagascar
-                            </option>
-                            <option
-                              value="MWI"
-                            >
-                              Malawi
-                            </option>
-                            <option
-                              value="MYS"
-                            >
-                              Malaysia
-                            </option>
-                            <option
-                              value="MDV"
-                            >
-                              Maldives
-                            </option>
-                            <option
-                              value="MLI"
-                            >
-                              Mali
-                            </option>
-                            <option
-                              value="MLT"
-                            >
-                              Malta
-                            </option>
-                            <option
-                              value="MHL"
-                            >
-                              Marshall Islands
-                            </option>
-                            <option
-                              value="MTQ"
-                            >
-                              Martinique
-                            </option>
-                            <option
-                              value="MRT"
-                            >
-                              Mauritania
-                            </option>
-                            <option
-                              value="MUS"
-                            >
-                              Mauritius
-                            </option>
-                            <option
-                              value="MYT"
-                            >
-                              Mayotte
-                            </option>
-                            <option
-                              value="MEX"
-                            >
-                              Mexico
-                            </option>
-                            <option
-                              value="FSM"
-                            >
-                              Micronesia (Federated States of)
-                            </option>
-                            <option
-                              value="MCO"
-                            >
-                              Monaco
-                            </option>
-                            <option
-                              value="MNG"
-                            >
-                              Mongolia
-                            </option>
-                            <option
-                              value="MNE"
-                            >
-                              Montenegro
-                            </option>
-                            <option
-                              value="MSR"
-                            >
-                              Montserrat
-                            </option>
-                            <option
-                              value="MAR"
-                            >
-                              Morocco
-                            </option>
-                            <option
-                              value="MOZ"
-                            >
-                              Mozambique
-                            </option>
-                            <option
-                              value="MMR"
-                            >
-                              Myanmar
-                            </option>
-                            <option
-                              value="NAM"
-                            >
-                              Namibia
-                            </option>
-                            <option
-                              value="NRU"
-                            >
-                              Nauru
-                            </option>
-                            <option
-                              value="NPL"
-                            >
-                              Nepal
-                            </option>
-                            <option
-                              value="NLD"
-                            >
-                              Netherlands
-                            </option>
-                            <option
-                              value="NCL"
-                            >
-                              New Caledonia
-                            </option>
-                            <option
-                              value="NZL"
-                            >
-                              New Zealand
-                            </option>
-                            <option
-                              value="NIC"
-                            >
-                              Nicaragua
-                            </option>
-                            <option
-                              value="NER"
-                            >
-                              Niger
-                            </option>
-                            <option
-                              value="NGA"
-                            >
-                              Nigeria
-                            </option>
-                            <option
-                              value="NIU"
-                            >
-                              Niue
-                            </option>
-                            <option
-                              value="NFK"
-                            >
-                              Norfolk Island
-                            </option>
-                            <option
-                              value="MNP"
-                            >
-                              Northern Mariana Islands
-                            </option>
-                            <option
-                              value="NOR"
-                            >
-                              Norway
-                            </option>
-                            <option
-                              value="OMN"
-                            >
-                              Oman
-                            </option>
-                            <option
-                              value="PAK"
-                            >
-                              Pakistan
-                            </option>
-                            <option
-                              value="PLW"
-                            >
-                              Palau
-                            </option>
-                            <option
-                              value="PAN"
-                            >
-                              Panama
-                            </option>
-                            <option
-                              value="PNG"
-                            >
-                              Papua New Guinea
-                            </option>
-                            <option
-                              value="PRY"
-                            >
-                              Paraguay
-                            </option>
-                            <option
-                              value="PER"
-                            >
-                              Peru
-                            </option>
-                            <option
-                              value="PHL"
-                            >
-                              Philippines
-                            </option>
-                            <option
-                              value="PCN"
-                            >
-                              Pitcairn
-                            </option>
-                            <option
-                              value="POL"
-                            >
-                              Poland
-                            </option>
-                            <option
-                              value="PRT"
-                            >
-                              Portugal
-                            </option>
-                            <option
-                              value="PRI"
-                            >
-                              Puerto Rico
-                            </option>
-                            <option
-                              value="QAT"
-                            >
-                              Qatar
-                            </option>
-                            <option
-                              value="KOR"
-                            >
-                              Republic of Korea
-                            </option>
-                            <option
-                              value="MDA"
-                            >
-                              Republic of Moldova
-                            </option>
-                            <option
-                              value="REU"
-                            >
-                              Réunion
-                            </option>
-                            <option
-                              value="ROU"
-                            >
-                              Romania
-                            </option>
-                            <option
-                              value="RUS"
-                            >
-                              Russian Federation
-                            </option>
-                            <option
-                              value="RWA"
-                            >
-                              Rwanda
-                            </option>
-                            <option
-                              value="BLM"
-                            >
-                              Saint-Barthélemy
-                            </option>
-                            <option
-                              value="SHN"
-                            >
-                              Saint Helena
-                            </option>
-                            <option
-                              value="KNA"
-                            >
-                              Saint Kitts and Nevis
-                            </option>
-                            <option
-                              value="LCA"
-                            >
-                              Saint Lucia
-                            </option>
-                            <option
-                              value="MAF"
-                            >
-                              Saint-Martin (French part)
-                            </option>
-                            <option
-                              value="SPM"
-                            >
-                              Saint Pierre and Miquelon
-                            </option>
-                            <option
-                              value="VCT"
-                            >
-                              Saint Vincent and the Grenadines
-                            </option>
-                            <option
-                              value="WSM"
-                            >
-                              Samoa
-                            </option>
-                            <option
-                              value="SMR"
-                            >
-                              San Marino
-                            </option>
-                            <option
-                              value="STP"
-                            >
-                              Sao Tome and Principe
-                            </option>
-                            <option
-                              value="SAU"
-                            >
-                              Saudi Arabia
-                            </option>
-                            <option
-                              value="SEN"
-                            >
-                              Senegal
-                            </option>
-                            <option
-                              value="SRB"
-                            >
-                              Serbia
-                            </option>
-                            <option
-                              value="SYC"
-                            >
-                              Seychelles
-                            </option>
-                            <option
-                              value="SLE"
-                            >
-                              Sierra Leone
-                            </option>
-                            <option
-                              value="SGP"
-                            >
-                              Singapore
-                            </option>
-                            <option
-                              value="SXM"
-                            >
-                              Sint Maarten (Dutch part)
-                            </option>
-                            <option
-                              value="SVK"
-                            >
-                              Slovakia
-                            </option>
-                            <option
-                              value="SVN"
-                            >
-                              Slovenia
-                            </option>
-                            <option
-                              value="SLB"
-                            >
-                              Solomon Islands
-                            </option>
-                            <option
-                              value="SOM"
-                            >
-                              Somalia
-                            </option>
-                            <option
-                              value="ZAF"
-                            >
-                              South Africa
-                            </option>
-                            <option
-                              value="SSD"
-                            >
-                              South Sudan
-                            </option>
-                            <option
-                              value="ESP"
-                            >
-                              Spain
-                            </option>
-                            <option
-                              value="LKA"
-                            >
-                              Sri Lanka
-                            </option>
-                            <option
-                              value="PSE"
-                            >
-                              State of Palestine
-                            </option>
-                            <option
-                              value="SDN"
-                            >
-                              Sudan
-                            </option>
-                            <option
-                              value="SUR"
-                            >
-                              Suriname
-                            </option>
-                            <option
-                              value="SJM"
-                            >
-                              Svalbard and Jan Mayen Islands
-                            </option>
-                            <option
-                              value="SWZ"
-                            >
-                              Swaziland
-                            </option>
-                            <option
-                              value="SWE"
-                            >
-                              Sweden
-                            </option>
-                            <option
-                              value="CHE"
-                            >
-                              Switzerland
-                            </option>
-                            <option
-                              value="SYR"
-                            >
-                              Syrian Arab Republic
-                            </option>
-                            <option
-                              value="TWAN"
-                            >
-                              Taiwan
-                            </option>
-                            <option
-                              value="TJK"
-                            >
-                              Tajikistan
-                            </option>
-                            <option
-                              value="THA"
-                            >
-                              Thailand
-                            </option>
-                            <option
-                              value="MKD"
-                            >
-                              The former Yugoslav Republic of Macedonia
-                            </option>
-                            <option
-                              value="TLS"
-                            >
-                              Timor-Leste
-                            </option>
-                            <option
-                              value="TGO"
-                            >
-                              Togo
-                            </option>
-                            <option
-                              value="TKL"
-                            >
-                              Tokelau
-                            </option>
-                            <option
-                              value="TON"
-                            >
-                              Tonga
-                            </option>
-                            <option
-                              value="TTO"
-                            >
-                              Trinidad and Tobago
-                            </option>
-                            <option
-                              value="TUN"
-                            >
-                              Tunisia
-                            </option>
-                            <option
-                              value="TUR"
-                            >
-                              Turkey
-                            </option>
-                            <option
-                              value="TKM"
-                            >
-                              Turkmenistan
-                            </option>
-                            <option
-                              value="TCA"
-                            >
-                              Turks and Caicos Islands
-                            </option>
-                            <option
-                              value="TUV"
-                            >
-                              Tuvalu
-                            </option>
-                            <option
-                              value="UGA"
-                            >
-                              Uganda
-                            </option>
-                            <option
-                              value="UKR"
-                            >
-                              Ukraine
-                            </option>
-                            <option
-                              value="ARE"
-                            >
-                              United Arab Emirates
-                            </option>
-                            <option
-                              value="GBR"
-                            >
-                              United Kingdom of Great Britain and Northern Ireland
-                            </option>
-                            <option
-                              value="TZA"
-                            >
-                              United Republic of Tanzania
-                            </option>
-                            <option
-                              value="URY"
-                            >
-                              Uruguay
-                            </option>
-                            <option
-                              value="UZB"
-                            >
-                              Uzbekistan
-                            </option>
-                            <option
-                              value="VUT"
-                            >
-                              Vanuatu
-                            </option>
-                            <option
-                              value="VEN"
-                            >
-                              Venezuela (Bolivarian Republic of)
-                            </option>
-                            <option
-                              value="VNM"
-                            >
-                              Vietnam
-                            </option>
-                            <option
-                              value="WLF"
-                            >
-                              Wallis and Futuna Islands
-                            </option>
-                            <option
-                              value="ESH"
-                            >
-                              Western Sahara
-                            </option>
-                            <option
-                              value="YEM"
-                            >
-                              Yemen
-                            </option>
-                            <option
-                              value="ZMB"
-                            >
-                              Zambia
-                            </option>
-                            <option
-                              value="ZWE"
-                            >
-                              Zimbabwe
-                            </option>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                    
-                  </div>
-                  <div
-                    className="emotion-24"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Residence
-                      <div
-                        className="notice"
-                      >
-                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
-                      </div>
-                    </h1>
-                    <div
-                      className="emotion-23"
-                    >
-                      <div
-                        className="emotion-11"
-                      >
-                        <span />
-                        <div>
-                          <label
-                            className="txt-l "
-                            htmlFor="select-3475791712"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            <span
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "marginRight": "0.5em",
-                                }
-                              }
-                            >
-                              Country of Residence
-                            </span>
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                }
-                              }
-                            >
-                              Required
-                              <span
-                                className="tool-tip__wrapper emotion-7"
-                              >
-                                <div
-                                  className="icon"
-                                />
-                                <div
-                                  className="msg"
-                                >
-                                  If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
-                                </div>
-                              </span>
-                            </span>
-                          </label>
-                          <div
-                            className="sel-c  "
-                          >
-                            <select
-                              aria-label=""
-                              className="sel-f  "
-                              id="select-3475791712"
-                              name="partnerA_residenceCountry"
-                              onChange={[Function]}
-                              value=""
-                            >
-                              <option />
-                              <option
-                                value="USA"
-                              >
-                                United States of America
-                              </option>
-                              <option
-                                value="VIR"
-                              >
-                                United States Virgin Islands
-                              </option>
-                              <option
-                                value="AFG"
-                              >
-                                Afghanistan
-                              </option>
-                              <option
-                                value="ALA"
-                              >
-                                Åland Islands
-                              </option>
-                              <option
-                                value="ALB"
-                              >
-                                Albania
-                              </option>
-                              <option
-                                value="DZA"
-                              >
-                                Algeria
-                              </option>
-                              <option
-                                value="ASM"
-                              >
-                                American Samoa
-                              </option>
-                              <option
-                                value="AND"
-                              >
-                                Andorra
-                              </option>
-                              <option
-                                value="AGO"
-                              >
-                                Angola
-                              </option>
-                              <option
-                                value="AIA"
-                              >
-                                Anguilla
-                              </option>
-                              <option
-                                value="ATG"
-                              >
-                                Antigua and Barbuda
-                              </option>
-                              <option
-                                value="ARG"
-                              >
-                                Argentina
-                              </option>
-                              <option
-                                value="ARM"
-                              >
-                                Armenia
-                              </option>
-                              <option
-                                value="ABW"
-                              >
-                                Aruba
-                              </option>
-                              <option
-                                value="AUS"
-                              >
-                                Australia
-                              </option>
-                              <option
-                                value="AUT"
-                              >
-                                Austria
-                              </option>
-                              <option
-                                value="AZE"
-                              >
-                                Azerbaijan
-                              </option>
-                              <option
-                                value="BHS"
-                              >
-                                Bahamas
-                              </option>
-                              <option
-                                value="BHR"
-                              >
-                                Bahrain
-                              </option>
-                              <option
-                                value="BGD"
-                              >
-                                Bangladesh
-                              </option>
-                              <option
-                                value="BRB"
-                              >
-                                Barbados
-                              </option>
-                              <option
-                                value="BLR"
-                              >
-                                Belarus
-                              </option>
-                              <option
-                                value="BEL"
-                              >
-                                Belgium
-                              </option>
-                              <option
-                                value="BLZ"
-                              >
-                                Belize
-                              </option>
-                              <option
-                                value="BEN"
-                              >
-                                Benin
-                              </option>
-                              <option
-                                value="BMU"
-                              >
-                                Bermuda
-                              </option>
-                              <option
-                                value="BTN"
-                              >
-                                Bhutan
-                              </option>
-                              <option
-                                value="BOL"
-                              >
-                                Bolivia (Plurinational State of)
-                              </option>
-                              <option
-                                value="BES"
-                              >
-                                Bonaire, Saint Eustatius and Saba
-                              </option>
-                              <option
-                                value="BIH"
-                              >
-                                Bosnia and Herzegovina
-                              </option>
-                              <option
-                                value="BWA"
-                              >
-                                Botswana
-                              </option>
-                              <option
-                                value="BRA"
-                              >
-                                Brazil
-                              </option>
-                              <option
-                                value="VGB"
-                              >
-                                British Virgin Islands
-                              </option>
-                              <option
-                                value="BRN"
-                              >
-                                Brunei Darussalam
-                              </option>
-                              <option
-                                value="BGR"
-                              >
-                                Bulgaria
-                              </option>
-                              <option
-                                value="BFA"
-                              >
-                                Burkina Faso
-                              </option>
-                              <option
-                                value="BDI"
-                              >
-                                Burundi
-                              </option>
-                              <option
-                                value="CPV"
-                              >
-                                Cabo Verde
-                              </option>
-                              <option
-                                value="KHM"
-                              >
-                                Cambodia
-                              </option>
-                              <option
-                                value="CMR"
-                              >
-                                Cameroon
-                              </option>
-                              <option
-                                value="CAN"
-                              >
-                                Canada
-                              </option>
-                              <option
-                                value="CYM"
-                              >
-                                Cayman Islands
-                              </option>
-                              <option
-                                value="CAF"
-                              >
-                                Central African Republic
-                              </option>
-                              <option
-                                value="TCD"
-                              >
-                                Chad
-                              </option>
-                              <option
-                                value="CHL"
-                              >
-                                Chile
-                              </option>
-                              <option
-                                value="CHN"
-                              >
-                                China
-                              </option>
-                              <option
-                                value="HKG"
-                              >
-                                China, Hong Kong Special Administrative Region
-                              </option>
-                              <option
-                                value="MAC"
-                              >
-                                China, Macao Special Administrative Region
-                              </option>
-                              <option
-                                value="COL"
-                              >
-                                Colombia
-                              </option>
-                              <option
-                                value="COM"
-                              >
-                                Comoros
-                              </option>
-                              <option
-                                value="COG"
-                              >
-                                Congo
-                              </option>
-                              <option
-                                value="COK"
-                              >
-                                Cook Islands
-                              </option>
-                              <option
-                                value="CRI"
-                              >
-                                Costa Rica
-                              </option>
-                              <option
-                                value="CIV"
-                              >
-                                Côte d'Ivoire
-                              </option>
-                              <option
-                                value="HRV"
-                              >
-                                Croatia
-                              </option>
-                              <option
-                                value="CUB"
-                              >
-                                Cuba
-                              </option>
-                              <option
-                                value="CUW"
-                              >
-                                Curaçao
-                              </option>
-                              <option
-                                value="CYP"
-                              >
-                                Cyprus
-                              </option>
-                              <option
-                                value="CZE"
-                              >
-                                Czech Republic
-                              </option>
-                              <option
-                                value="PRK"
-                              >
-                                Democratic People's Republic of Korea
-                              </option>
-                              <option
-                                value="COD"
-                              >
-                                Democratic Republic of the Congo
-                              </option>
-                              <option
-                                value="DNK"
-                              >
-                                Denmark
-                              </option>
-                              <option
-                                value="DJI"
-                              >
-                                Djibouti
-                              </option>
-                              <option
-                                value="DMA"
-                              >
-                                Dominica
-                              </option>
-                              <option
-                                value="DOM"
-                              >
-                                Dominican Republic
-                              </option>
-                              <option
-                                value="ECU"
-                              >
-                                Ecuador
-                              </option>
-                              <option
-                                value="EGY"
-                              >
-                                Egypt
-                              </option>
-                              <option
-                                value="SLV"
-                              >
-                                El Salvador
-                              </option>
-                              <option
-                                value="GNQ"
-                              >
-                                Equatorial Guinea
-                              </option>
-                              <option
-                                value="ERI"
-                              >
-                                Eritrea
-                              </option>
-                              <option
-                                value="EST"
-                              >
-                                Estonia
-                              </option>
-                              <option
-                                value="ETH"
-                              >
-                                Ethiopia
-                              </option>
-                              <option
-                                value="FRO"
-                              >
-                                Faeroe Islands
-                              </option>
-                              <option
-                                value="FLK"
-                              >
-                                Falkland Islands (Malvinas)
-                              </option>
-                              <option
-                                value="FJI"
-                              >
-                                Fiji
-                              </option>
-                              <option
-                                value="FIN"
-                              >
-                                Finland
-                              </option>
-                              <option
-                                value="FRA"
-                              >
-                                France
-                              </option>
-                              <option
-                                value="GUF"
-                              >
-                                French Guiana
-                              </option>
-                              <option
-                                value="PYF"
-                              >
-                                French Polynesia
-                              </option>
-                              <option
-                                value="GAB"
-                              >
-                                Gabon
-                              </option>
-                              <option
-                                value="GMB"
-                              >
-                                Gambia
-                              </option>
-                              <option
-                                value="GEO"
-                              >
-                                Georgia
-                              </option>
-                              <option
-                                value="DEU"
-                              >
-                                Germany
-                              </option>
-                              <option
-                                value="GHA"
-                              >
-                                Ghana
-                              </option>
-                              <option
-                                value="GIB"
-                              >
-                                Gibraltar
-                              </option>
-                              <option
-                                value="GRC"
-                              >
-                                Greece
-                              </option>
-                              <option
-                                value="GRL"
-                              >
-                                Greenland
-                              </option>
-                              <option
-                                value="GRD"
-                              >
-                                Grenada
-                              </option>
-                              <option
-                                value="GLP"
-                              >
-                                Guadeloupe
-                              </option>
-                              <option
-                                value="GUM"
-                              >
-                                Guam
-                              </option>
-                              <option
-                                value="GTM"
-                              >
-                                Guatemala
-                              </option>
-                              <option
-                                value="GGY"
-                              >
-                                Guernsey
-                              </option>
-                              <option
-                                value="GIN"
-                              >
-                                Guinea
-                              </option>
-                              <option
-                                value="GNB"
-                              >
-                                Guinea-Bissau
-                              </option>
-                              <option
-                                value="GUY"
-                              >
-                                Guyana
-                              </option>
-                              <option
-                                value="HTI"
-                              >
-                                Haiti
-                              </option>
-                              <option
-                                value="VAT"
-                              >
-                                Holy See
-                              </option>
-                              <option
-                                value="HND"
-                              >
-                                Honduras
-                              </option>
-                              <option
-                                value="HUN"
-                              >
-                                Hungary
-                              </option>
-                              <option
-                                value="ISL"
-                              >
-                                Iceland
-                              </option>
-                              <option
-                                value="IND"
-                              >
-                                India
-                              </option>
-                              <option
-                                value="IDN"
-                              >
-                                Indonesia
-                              </option>
-                              <option
-                                value="IRN"
-                              >
-                                Iran (Islamic Republic of)
-                              </option>
-                              <option
-                                value="IRQ"
-                              >
-                                Iraq
-                              </option>
-                              <option
-                                value="IRL"
-                              >
-                                Ireland
-                              </option>
-                              <option
-                                value="IMN"
-                              >
-                                Isle of Man
-                              </option>
-                              <option
-                                value="ISR"
-                              >
-                                Israel
-                              </option>
-                              <option
-                                value="ITA"
-                              >
-                                Italy
-                              </option>
-                              <option
-                                value="JAM"
-                              >
-                                Jamaica
-                              </option>
-                              <option
-                                value="JPN"
-                              >
-                                Japan
-                              </option>
-                              <option
-                                value="JEY"
-                              >
-                                Jersey
-                              </option>
-                              <option
-                                value="JOR"
-                              >
-                                Jordan
-                              </option>
-                              <option
-                                value="KAZ"
-                              >
-                                Kazakhstan
-                              </option>
-                              <option
-                                value="KEN"
-                              >
-                                Kenya
-                              </option>
-                              <option
-                                value="KIR"
-                              >
-                                Kiribati
-                              </option>
-                              <option
-                                value="KWT"
-                              >
-                                Kuwait
-                              </option>
-                              <option
-                                value="KGZ"
-                              >
-                                Kyrgyzstan
-                              </option>
-                              <option
-                                value="LAO"
-                              >
-                                Lao People's Democratic Republic
-                              </option>
-                              <option
-                                value="LVA"
-                              >
-                                Latvia
-                              </option>
-                              <option
-                                value="LBN"
-                              >
-                                Lebanon
-                              </option>
-                              <option
-                                value="LSO"
-                              >
-                                Lesotho
-                              </option>
-                              <option
-                                value="LBR"
-                              >
-                                Liberia
-                              </option>
-                              <option
-                                value="LBY"
-                              >
-                                Libya
-                              </option>
-                              <option
-                                value="LIE"
-                              >
-                                Liechtenstein
-                              </option>
-                              <option
-                                value="LTU"
-                              >
-                                Lithuania
-                              </option>
-                              <option
-                                value="LUX"
-                              >
-                                Luxembourg
-                              </option>
-                              <option
-                                value="MDG"
-                              >
-                                Madagascar
-                              </option>
-                              <option
-                                value="MWI"
-                              >
-                                Malawi
-                              </option>
-                              <option
-                                value="MYS"
-                              >
-                                Malaysia
-                              </option>
-                              <option
-                                value="MDV"
-                              >
-                                Maldives
-                              </option>
-                              <option
-                                value="MLI"
-                              >
-                                Mali
-                              </option>
-                              <option
-                                value="MLT"
-                              >
-                                Malta
-                              </option>
-                              <option
-                                value="MHL"
-                              >
-                                Marshall Islands
-                              </option>
-                              <option
-                                value="MTQ"
-                              >
-                                Martinique
-                              </option>
-                              <option
-                                value="MRT"
-                              >
-                                Mauritania
-                              </option>
-                              <option
-                                value="MUS"
-                              >
-                                Mauritius
-                              </option>
-                              <option
-                                value="MYT"
-                              >
-                                Mayotte
-                              </option>
-                              <option
-                                value="MEX"
-                              >
-                                Mexico
-                              </option>
-                              <option
-                                value="FSM"
-                              >
-                                Micronesia (Federated States of)
-                              </option>
-                              <option
-                                value="MCO"
-                              >
-                                Monaco
-                              </option>
-                              <option
-                                value="MNG"
-                              >
-                                Mongolia
-                              </option>
-                              <option
-                                value="MNE"
-                              >
-                                Montenegro
-                              </option>
-                              <option
-                                value="MSR"
-                              >
-                                Montserrat
-                              </option>
-                              <option
-                                value="MAR"
-                              >
-                                Morocco
-                              </option>
-                              <option
-                                value="MOZ"
-                              >
-                                Mozambique
-                              </option>
-                              <option
-                                value="MMR"
-                              >
-                                Myanmar
-                              </option>
-                              <option
-                                value="NAM"
-                              >
-                                Namibia
-                              </option>
-                              <option
-                                value="NRU"
-                              >
-                                Nauru
-                              </option>
-                              <option
-                                value="NPL"
-                              >
-                                Nepal
-                              </option>
-                              <option
-                                value="NLD"
-                              >
-                                Netherlands
-                              </option>
-                              <option
-                                value="NCL"
-                              >
-                                New Caledonia
-                              </option>
-                              <option
-                                value="NZL"
-                              >
-                                New Zealand
-                              </option>
-                              <option
-                                value="NIC"
-                              >
-                                Nicaragua
-                              </option>
-                              <option
-                                value="NER"
-                              >
-                                Niger
-                              </option>
-                              <option
-                                value="NGA"
-                              >
-                                Nigeria
-                              </option>
-                              <option
-                                value="NIU"
-                              >
-                                Niue
-                              </option>
-                              <option
-                                value="NFK"
-                              >
-                                Norfolk Island
-                              </option>
-                              <option
-                                value="MNP"
-                              >
-                                Northern Mariana Islands
-                              </option>
-                              <option
-                                value="NOR"
-                              >
-                                Norway
-                              </option>
-                              <option
-                                value="OMN"
-                              >
-                                Oman
-                              </option>
-                              <option
-                                value="PAK"
-                              >
-                                Pakistan
-                              </option>
-                              <option
-                                value="PLW"
-                              >
-                                Palau
-                              </option>
-                              <option
-                                value="PAN"
-                              >
-                                Panama
-                              </option>
-                              <option
-                                value="PNG"
-                              >
-                                Papua New Guinea
-                              </option>
-                              <option
-                                value="PRY"
-                              >
-                                Paraguay
-                              </option>
-                              <option
-                                value="PER"
-                              >
-                                Peru
-                              </option>
-                              <option
-                                value="PHL"
-                              >
-                                Philippines
-                              </option>
-                              <option
-                                value="PCN"
-                              >
-                                Pitcairn
-                              </option>
-                              <option
-                                value="POL"
-                              >
-                                Poland
-                              </option>
-                              <option
-                                value="PRT"
-                              >
-                                Portugal
-                              </option>
-                              <option
-                                value="PRI"
-                              >
-                                Puerto Rico
-                              </option>
-                              <option
-                                value="QAT"
-                              >
-                                Qatar
-                              </option>
-                              <option
-                                value="KOR"
-                              >
-                                Republic of Korea
-                              </option>
-                              <option
-                                value="MDA"
-                              >
-                                Republic of Moldova
-                              </option>
-                              <option
-                                value="REU"
-                              >
-                                Réunion
-                              </option>
-                              <option
-                                value="ROU"
-                              >
-                                Romania
-                              </option>
-                              <option
-                                value="RUS"
-                              >
-                                Russian Federation
-                              </option>
-                              <option
-                                value="RWA"
-                              >
-                                Rwanda
-                              </option>
-                              <option
-                                value="BLM"
-                              >
-                                Saint-Barthélemy
-                              </option>
-                              <option
-                                value="SHN"
-                              >
-                                Saint Helena
-                              </option>
-                              <option
-                                value="KNA"
-                              >
-                                Saint Kitts and Nevis
-                              </option>
-                              <option
-                                value="LCA"
-                              >
-                                Saint Lucia
-                              </option>
-                              <option
-                                value="MAF"
-                              >
-                                Saint-Martin (French part)
-                              </option>
-                              <option
-                                value="SPM"
-                              >
-                                Saint Pierre and Miquelon
-                              </option>
-                              <option
-                                value="VCT"
-                              >
-                                Saint Vincent and the Grenadines
-                              </option>
-                              <option
-                                value="WSM"
-                              >
-                                Samoa
-                              </option>
-                              <option
-                                value="SMR"
-                              >
-                                San Marino
-                              </option>
-                              <option
-                                value="STP"
-                              >
-                                Sao Tome and Principe
-                              </option>
-                              <option
-                                value="SAU"
-                              >
-                                Saudi Arabia
-                              </option>
-                              <option
-                                value="SEN"
-                              >
-                                Senegal
-                              </option>
-                              <option
-                                value="SRB"
-                              >
-                                Serbia
-                              </option>
-                              <option
-                                value="SYC"
-                              >
-                                Seychelles
-                              </option>
-                              <option
-                                value="SLE"
-                              >
-                                Sierra Leone
-                              </option>
-                              <option
-                                value="SGP"
-                              >
-                                Singapore
-                              </option>
-                              <option
-                                value="SXM"
-                              >
-                                Sint Maarten (Dutch part)
-                              </option>
-                              <option
-                                value="SVK"
-                              >
-                                Slovakia
-                              </option>
-                              <option
-                                value="SVN"
-                              >
-                                Slovenia
-                              </option>
-                              <option
-                                value="SLB"
-                              >
-                                Solomon Islands
-                              </option>
-                              <option
-                                value="SOM"
-                              >
-                                Somalia
-                              </option>
-                              <option
-                                value="ZAF"
-                              >
-                                South Africa
-                              </option>
-                              <option
-                                value="SSD"
-                              >
-                                South Sudan
-                              </option>
-                              <option
-                                value="ESP"
-                              >
-                                Spain
-                              </option>
-                              <option
-                                value="LKA"
-                              >
-                                Sri Lanka
-                              </option>
-                              <option
-                                value="PSE"
-                              >
-                                State of Palestine
-                              </option>
-                              <option
-                                value="SDN"
-                              >
-                                Sudan
-                              </option>
-                              <option
-                                value="SUR"
-                              >
-                                Suriname
-                              </option>
-                              <option
-                                value="SJM"
-                              >
-                                Svalbard and Jan Mayen Islands
-                              </option>
-                              <option
-                                value="SWZ"
-                              >
-                                Swaziland
-                              </option>
-                              <option
-                                value="SWE"
-                              >
-                                Sweden
-                              </option>
-                              <option
-                                value="CHE"
-                              >
-                                Switzerland
-                              </option>
-                              <option
-                                value="SYR"
-                              >
-                                Syrian Arab Republic
-                              </option>
-                              <option
-                                value="TWAN"
-                              >
-                                Taiwan
-                              </option>
-                              <option
-                                value="TJK"
-                              >
-                                Tajikistan
-                              </option>
-                              <option
-                                value="THA"
-                              >
-                                Thailand
-                              </option>
-                              <option
-                                value="MKD"
-                              >
-                                The former Yugoslav Republic of Macedonia
-                              </option>
-                              <option
-                                value="TLS"
-                              >
-                                Timor-Leste
-                              </option>
-                              <option
-                                value="TGO"
-                              >
-                                Togo
-                              </option>
-                              <option
-                                value="TKL"
-                              >
-                                Tokelau
-                              </option>
-                              <option
-                                value="TON"
-                              >
-                                Tonga
-                              </option>
-                              <option
-                                value="TTO"
-                              >
-                                Trinidad and Tobago
-                              </option>
-                              <option
-                                value="TUN"
-                              >
-                                Tunisia
-                              </option>
-                              <option
-                                value="TUR"
-                              >
-                                Turkey
-                              </option>
-                              <option
-                                value="TKM"
-                              >
-                                Turkmenistan
-                              </option>
-                              <option
-                                value="TCA"
-                              >
-                                Turks and Caicos Islands
-                              </option>
-                              <option
-                                value="TUV"
-                              >
-                                Tuvalu
-                              </option>
-                              <option
-                                value="UGA"
-                              >
-                                Uganda
-                              </option>
-                              <option
-                                value="UKR"
-                              >
-                                Ukraine
-                              </option>
-                              <option
-                                value="ARE"
-                              >
-                                United Arab Emirates
-                              </option>
-                              <option
-                                value="GBR"
-                              >
-                                United Kingdom of Great Britain and Northern Ireland
-                              </option>
-                              <option
-                                value="TZA"
-                              >
-                                United Republic of Tanzania
-                              </option>
-                              <option
-                                value="URY"
-                              >
-                                Uruguay
-                              </option>
-                              <option
-                                value="UZB"
-                              >
-                                Uzbekistan
-                              </option>
-                              <option
-                                value="VUT"
-                              >
-                                Vanuatu
-                              </option>
-                              <option
-                                value="VEN"
-                              >
-                                Venezuela (Bolivarian Republic of)
-                              </option>
-                              <option
-                                value="VNM"
-                              >
-                                Vietnam
-                              </option>
-                              <option
-                                value="WLF"
-                              >
-                                Wallis and Futuna Islands
-                              </option>
-                              <option
-                                value="ESH"
-                              >
-                                Western Sahara
-                              </option>
-                              <option
-                                value="YEM"
-                              >
-                                Yemen
-                              </option>
-                              <option
-                                value="ZMB"
-                              >
-                                Zambia
-                              </option>
-                              <option
-                                value="ZWE"
-                              >
-                                Zimbabwe
-                              </option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                      
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-19"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Marriage
-                      <div
-                        className="notice"
-                      />
-                    </h1>
-                    <span />
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-8"
-                      >
-                        <div
-                          aria-labelledby="partnerA_bloodRelation-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerA_bloodRelation-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Are you related by blood or marriage to your future spouse?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
-                            >
-                              <div
-                                className="icon"
-                              />
-                              <div
-                                className="msg"
-                              >
-                                This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
-                              </div>
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_bloodRelation"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_bloodRelation"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-8"
-                      >
-                        <div
-                          aria-labelledby="partnerA_marriedBefore-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerA_marriedBefore-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Have you ever been married before?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_marriedBefore"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_marriedBefore"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div
-                      className="emotion-24"
-                    >
-                      <div
-                        className="emotion-33"
-                      >
-                        <div
-                          className="emotion-9"
-                        >
-                          <div
-                            aria-labelledby="partnerA_partnershipType-groupLabel"
-                            className="radio-group__label"
-                            role="group"
-                          >
-                            <div
-                              className="txt-l"
-                              id="partnerA_partnershipType-groupLabel"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                }
-                              }
-                            >
-                              Were you ever a member of a civil union or domestic partnership?
-                              <span
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "display": "flex",
-                                    "paddingLeft": "0.25em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                              <span
-                                className="tool-tip__wrapper emotion-7"
-                              >
-                                <div
-                                  className="icon"
-                                />
-                                <div
-                                  className="msg"
-                                >
-                                  This information is collected as required by the Massachusetts State Marriage Intention Form.
-                                </div>
-                              </span>
-                            </div>
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerA_partnershipType"
-                                onChange={[Function]}
-                                type="radio"
-                                value="CIV"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes, a civil union
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerA_partnershipType"
-                                onChange={[Function]}
-                                type="radio"
-                                value="DOM"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes, a domestic partnership
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerA_partnershipType"
-                                onChange={[Function]}
-                                type="radio"
-                                value="N/A"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                No
-                              </span>
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                      
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-24"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Parents
-                      <div
-                        className="notice"
-                      >
-                        Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
-                        <span
-                          className="tool-tip__wrapper emotion-36"
-                        >
-                          <div
-                            className="icon"
-                          />
-                          <div
-                            className="msg"
-                          >
-                            This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
-                          </div>
-                        </span>
-                      </div>
-                    </h1>
-                    <span />
-                    <div
-                      className="emotion-45"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-507056287"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Parent 1 - First Middle Last Name
-                          </span>
-                          <span
-                            aria-hidden="true"
-                            className="t--req"
-                            style={
-                              Object {
-                                "display": "flex",
-                                "flexGrow": 1,
-                              }
-                            }
-                          >
-                            Required
-                          </span>
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f   "
-                          id="input-507056287"
-                          maxLength={38}
-                          name="partnerA_parentA_Name"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-4196106810"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Parent 1 - Family Name/Last Name At the time of their birth or adoption
-                          </span>
-                          <span
-                            aria-hidden="true"
-                            className="t--req"
-                            style={
-                              Object {
-                                "display": "flex",
-                                "flexGrow": 1,
-                              }
-                            }
-                          >
-                            Required
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-6"
-                        >
-                          This information might be found on your birth certificate.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f   "
-                          id="input-4196106810"
-                          maxLength={38}
-                          name="partnerA_parentA_Surname"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div
-                        className="emotion-9"
-                      >
-                        <div
-                          aria-labelledby="partnerA_additionalParent-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerA_additionalParent-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Do you have a second parent?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_additionalParent"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerA_additionalParent"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        className="emotion-24"
-                      >
-                        <div
-                          className="emotion-43"
-                        >
-                          <div
-                            className="emotion-9"
-                          >
-                            <div
-                              className="emotion-8"
-                            >
-                              <div
-                                aria-labelledby="partnerA_parentsMarriedAtBirth-groupLabel"
-                                className="radio-group__label"
-                                role="group"
-                              >
-                                <div
-                                  className="txt-l"
-                                  id="partnerA_parentsMarriedAtBirth-groupLabel"
-                                  style={
-                                    Object {
-                                      "display": "flex",
-                                    }
-                                  }
-                                >
-                                  Were your parents married at the time of your birth?
-                                  <span
-                                    className="t--req"
-                                    style={
-                                      Object {
-                                        "display": "flex",
-                                        "paddingLeft": "0.25em",
-                                      }
-                                    }
-                                  >
-                                    Required
-                                  </span>
-                                  <span
-                                    className="tool-tip__wrapper emotion-7"
-                                  >
-                                    <div
-                                      className="icon"
-                                    />
-                                    <div
-                                      className="msg"
-                                    >
-                                      This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
-                                    </div>
-                                  </span>
-                                </div>
-                                <label
-                                  className="ra  "
-                                >
-                                  <input
-                                    className="ra-f"
-                                    name="partnerA_parentsMarriedAtBirth"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value="1"
-                                  />
-                                  <span
-                                    className="ra-l"
-                                  >
-                                    Yes
-                                  </span>
-                                </label>
-                                <label
-                                  className="ra  "
-                                >
-                                  <input
-                                    className="ra-f"
-                                    name="partnerA_parentsMarriedAtBirth"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value="0"
-                                  />
-                                  <span
-                                    className="ra-l"
-                                  >
-                                    No
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </fieldset>
-              </div>
-              <div
-                className="g g--mr emotion-50"
-              >
-                <div
-                  className="t--info g--6 m-b500"
-                >
-                  <button
-                    className="lnk emotion-49"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    <span
-                      style={
-                        Object {
-                          "fontStyle": "italic",
-                          "whiteSpace": "nowrap",
-                        }
-                      }
-                    >
-                      <span
-                        aria-hidden="true"
-                        style={
-                          Object {
-                            "fontStyle": "normal",
-                          }
-                        }
-                      >
-                        ←
-                      </span>
-                       
-                      Back
-                    </span>
-                  </button>
-                </div>
-                <div
-                  className="g--6 ta-r m-b500"
-                >
-                  <button
-                    className="btn btn--b-sm"
-                    disabled={true}
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    NEXT
-                  </button>
-                </div>
-              </div>
-              <div
-                className="m-v700"
-              >
-                Questions? Email the Registry Department at
-                 
-                <a
-                  href="mailto:marriage@boston.gov"
-                  onClick={[Function]}
-                >
-                  marriage@boston.gov
-                </a>
-                .
-              </div>
-            </div>
-          </section>
-        </div>
-      </main>
-    </div>
-  </div>,
-  <footer
-    className="ft"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-<div class=\\"ft-c ft-ite\\">
-  <ul class=\\"ft-ll ft-ite-links\\">
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
-        BOS:311 - Report an issue
-      </a>
-    </li>
-
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
-    </li>
-  </ul>
-
-  <ul class=\\"ft-ll ft-ite-311\\">
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
-        <span class=\\"ft-ll-311\\">BOS:311</span>
-        <span class=\\"tablet--hidden\\"> - </span>
-        Report an issue
-      </a>
-    </li>
-  </ul>
-</div>
-",
-      }
-    }
-    style={
-      Object {
-        "position": "relative",
-        "zIndex": 2,
-      }
-    }
-  />,
-]
-`;
-
-exports[`Storyshots Marriage Intention/Form Pages Step 3. Person 2 1`] = `
-Array [
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>,
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />,
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
-
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />,
-  .emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.emotion-0 {
-  color: #d22d23;
-}
-
-.emotion-48 fieldset + fieldset {
-  margin-top: 2rem;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-48 fieldset + fieldset {
-    margin-top: 4rem;
-  }
-
-  .emotion-48 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-47 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
-.emotion-47 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
-}
-
-.emotion-47 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
-  font-weight: 700;
-  color: #091f2f;
-}
-
-.emotion-47 .desc {
-  margin: 0.5rem 0 0.75rem;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375em;
-  font-weight: 100;
-  color: #58585b;
-  line-height: 1.2em;
-}
-
-.emotion-50 {
-  text-align: center;
-}
-
-@media screen and (min-width:480px) {
-  .emotion-50 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
-
-  .emotion-50 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
-
-  .emotion-50 > div.ta-r > button {
-    margin-left: auto;
-  }
-
-  .emotion-50 .lnk {
-    padding-left: 0;
-  }
-}
-
-.emotion-49 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
-}
-
-.emotion-17 {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-17 legend {
-  padding-left: 0;
-  font-size: 120%;
-}
-
-.emotion-15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
-}
-
-.emotion-15 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
-
-.emotion-15 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-}
-
-.emotion-15 input {
-  -moz-appearance: textfield;
-}
-
-.emotion-15 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-.emotion-15 input::-ms-clear {
-  display: none;
-}
-
-.emotion-15 label {
-  margin-top: 0.5rem;
-}
-
-.emotion-15.disabled {
-  opacity: 0.4;
-}
-
-.emotion-15.disabled * {
-  cursor: not-allowed;
-}
-
-.emotion-2 {
-  padding-right: 0;
-}
-
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
-  }
-}
-
-.emotion-3 {
-  display: grid;
-  margin: auto;
-  margin-top: 0.75rem;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
-}
-
-.emotion-3 .progressbar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-}
-
-.emotion-3 .progressbar .nav {
-  display: table;
-  table-layout: fixed;
-  text-align: center;
-  line-height: normal;
-  font-style: normal;
-  font-weight: bold;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  color: '#58585B';
-}
-
-.emotion-3 .progressbar .nav a {
-  display: table-cell;
-  border-width: 1px;
-  border-color: black;
-  border-style: solid;
-  border-left-width: 0;
-  padding: 0.85em 0.5em;
-  color: black;
-  background: #fff;
-  width: 2%;
-  font-size: 0.85em;
-}
-
-.emotion-3 .progressbar .nav a:last-child {
-  grid-column-start: 2;
-}
-
-.emotion-3 .progressbar .nav a:first-child {
-  border-left-width: 1px;
-}
-
-.emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed.current {
-  cursor: pointer;
-  color: #fff;
-  background: #1871bd;
-}
-
-.emotion-3 .progressbar .nav a.uncompleted {
-  background: #C8C8C8;
-}
-
-.emotion-3 .progressbar .nav a.completed.focused.current {
-  color: #000;
-  cursor: pointer;
-  background: #f2f2f2;
-}
-
-.emotion-3 .progressbar .nav a.completed.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  color: #000;
-  cursor: pointer;
-  background: #b0d9ff;
-}
-
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover,
-.emotion-3 .progressbar .nav a.completed.focused.done.current {
-  color: #000;
-  cursor: default;
-  background: #f2f2f2;
-}
-
-.emotion-3 .progressbar .nav a.completed.current {
-  color: #000;
-  background: #f2f2f2;
-}
-
-.emotion-3 .progressbar .progress-text {
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  font-style: italic;
-  font-size: 1rem;
-  margin-top: 0.5rem;
-}
-
-.emotion-3 .progressbar .progress-text .mobile {
-  display: none;
-}
-
-@media screen and (max-width:540px) {
-  .emotion-3 {
-    max-width: 25.875em;
-  }
-
-  .emotion-3 .progressbar .nav a {
-    overflow: hidden;
-    min-width: 10px;
-    padding: 0.5em 0;
-    text-indent: -500px;
-    line-height: 0;
-  }
-
-  .emotion-3 .progressbar .progress-text .mobile {
-    display: inline-block;
-  }
-}
-
-@media (min-width:541px) and (max-width:1024px) {
-  .emotion-3 .progressbar .nav a {
-    padding: 0.85em 0;
-    font-size: 0.55rem;
-  }
-}
-
-.emotion-51 {
-  padding: 0px;
-}
-
-.emotion-4 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  padding-bottom: 0.25em;
-}
-
-.emotion-4 h2 {
-  margin-bottom: 3.9375rem;
-}
-
-.emotion-13 {
-  margin-bottom: 3em;
-  background: none;
-  margin-bottom: 1.5em;
-}
-
-.emotion-13 label {
-  margin-top: 0em;
-}
-
-.emotion-13 .spacingTop {
-  margin-top: 1.5em;
-}
-
-.emotion-13 label.inputHeading {
-  font-size: 0.875em;
-  text-transform: uppercase;
-}
-
-.emotion-13 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-13 .t--opt {
-  color: #58585b !important;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-13 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-13 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-13 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-13 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-13 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-13 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-13 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-5 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.125rem;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  margin-top: 0.5em;
-  margin-bottom: 1.25em;
-}
-
-.emotion-5 h1 {
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-5 .notice {
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375rem;
-  font-style: italic;
-  font-weight: normal;
-  line-height: 1.2rem;
-  text-transform: none;
-  padding-top: 0.5em;
-  margin-top: 0.25em;
-  border-top: 4px solid #091f2f;
-}
-
-.emotion-5 .notice .tool-tip__wrapper {
-  display: inline-block;
-}
-
-.emotion-9 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-bottom: 1em;
-}
-
-.emotion-9 > label {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  margin-left: 0;
-  margin-bottom: 1em;
-}
-
-.emotion-9 .radio-group__label label .ra-l {
-  font-size: 0.8125rem;
-}
-
-.emotion-9 .radio-group__label .txt-l {
-  font-size: 0.875em;
-  margin-bottom: 0.75em;
-  margin-top: 0;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-9 .cb {
-    margin: 0;
-    margin-left: 0;
-    margin-bottom: 1em;
-  }
-
-  .emotion-9 .cb:not(:first-of-type) {
-    margin-left: 0;
-  }
-}
-
-.emotion-8 {
-  margin-bottom: 1.5em;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
-}
-
-.emotion-7 .icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
-}
-
-.emotion-7 .icon::before {
-  content: '?';
-}
-
-.emotion-7 .tt--info {
-  text-transform: lowercase;
-  padding-left: 3.5px;
-}
-
-.emotion-7 .tt--info::before {
-  content: 'i';
-}
-
-.emotion-7 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
-  padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-weight: 300;
-  font-style: italic;
-  text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
-}
-
-.emotion-7 .icon:hover + .msg {
-  visibility: visible;
-}
-
-.emotion-11 {
-  margin-bottom: 2em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-11 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-11 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-11 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-11 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-11 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-11 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-11 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-11 .sel-c {
-  display: block;
-}
-
-.emotion-19 {
-  margin-bottom: 3em;
-  background: none;
-}
-
-.emotion-19 label {
-  margin-top: 0em;
-}
-
-.emotion-19 .spacingTop {
-  margin-top: 1.5em;
-}
-
-.emotion-19 label.inputHeading {
-  font-size: 0.875em;
-  text-transform: uppercase;
-}
-
-.emotion-19 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-19 .t--opt {
-  color: #58585b !important;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-19 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-19 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-19 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-19 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-19 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-19 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-19 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-14 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.125rem;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  margin-top: 0.5em;
-  margin-bottom: 1.25em;
-  border-bottom: 4px solid #091f2f;
-  margin-bottom: 1em;
-}
-
-.emotion-14 h1 {
-  border-bottom: 4px solid #091f2f;
-}
-
-.emotion-14 .notice {
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375rem;
-  font-style: italic;
-  font-weight: normal;
-  line-height: 1.2rem;
-  text-transform: none;
-  padding-top: 0.5em;
-  margin-top: 0.25em;
-  border-top: 4px solid #091f2f;
-}
-
-.emotion-14 .notice .tool-tip__wrapper {
-  display: inline-block;
-}
-
-.emotion-16 {
-  margin-bottom: 2.25em;
-}
-
-.emotion-24 {
-  margin-bottom: 3em;
-  background: none;
-}
-
-.emotion-24 label {
-  margin-top: 0em;
-}
-
-.emotion-24 .spacingTop {
-  margin-top: 1.5em;
-}
-
-.emotion-24 label.inputHeading {
-  font-size: 0.875em;
-  text-transform: uppercase;
-}
-
-.emotion-24 label.inputHeading .t--req {
-  margin-left: 0.5rem;
-}
-
-.emotion-24 .t--opt {
-  color: #58585b !important;
-}
-
-.emotion-23 {
-  margin-bottom: 2.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-23 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-23 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-23 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-23 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-23 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-23 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-23 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-33 {
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-33 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-33 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-33 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-33 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-33 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-33 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-33 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-36 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
-}
-
-.emotion-36 .icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
-}
-
-.emotion-36 .icon::before {
-  content: '?';
-}
-
-.emotion-36 .tt--info {
-  text-transform: lowercase;
-  padding-left: 3.5px;
-}
-
-.emotion-36 .tt--info::before {
-  content: 'i';
-}
-
-.emotion-36 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
-  padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-weight: 300;
-  font-style: italic;
-  text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
-}
-
-.emotion-36 .icon:hover + .msg {
-  visibility: visible;
-}
-
-.emotion-45 {
-  margin-bottom: 2.5em;
-}
-
-.emotion-45 h2 {
-  font-size: 1.5rem;
-}
-
-.emotion-45 h4 {
-  font-size: 1.25rem;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-45 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-45 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-45 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-45 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-45 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-45 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-45 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.emotion-43 {
-  margin-top: 1em;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-43 {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.emotion-43 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-43 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-.emotion-43 > .RADIOGROUP label {
-  display: block;
-}
-
-.emotion-43 h3 {
-  font-family: Montserrat,Arial,sans-serif !important;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.emotion-43 .notice {
-  font-size: 0.8125em;
-  clear: both;
-  min-height: 1px;
-  overflow: hidden;
-  display: block;
-  margin: 0.25em 0 0.75em 0;
-  line-height: 1.5em;
-}
-
-.emotion-43 .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-17tc7bx .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-.css-1nn14tl .emotion-6:after {
-  content: '&nbsp;';
-  opacity: 0;
-}
-
-<div
-    className="mn--full-ie"
-  >
-    <div
-      className="mn mn--full "
-    >
-      <input
-        aria-hidden="true"
-        className="s-tr"
-        id="s-tr"
-        type="checkbox"
-      />
-      <header
-        className="h"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "
-  <label for=\\"brg-tr\\" class=\\"brg-b\\">
-    <div class=\\"brg\\">
-      <span class=\\"brg-c\\">
-        <span class=\\"brg-c-i\\"></span>
-      </span>
-      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
-    </div>
-  </label>
-
-  <div class=\\"lo lo--abs\\">
-    <div class=\\"lo-l\\">
-      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
-        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
-      </a>
-      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
-    </div>
-  </div>
-  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
-  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
-</a>
-
-<nav class=\\"nv-h\\">
-  <ul class=\\"nv-h-l\\">
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
-    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
-    <li class=\\"tr nv-h-l-i\\">
-      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
-      <ul class=\\"tr-dd\\">
-        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
-        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
-      </ul>
-    </li>
-    <li class=\\"nv-h-l-i\\">
-      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
-        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
-      </label>
-    </li>
-  </ul>
-</nav>
-
-<div class=\\"h-s\\">
-  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
-    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
-    <div class=\\"sf-i\\">
-      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
-      <button class=\\"sf-i-b\\">Search</button>
-    </div>
-  </form>
-</div>
-  ",
-          }
-        }
-        role="banner"
-      />
-      <div
-        className="p-t300"
-      >
-        <nav
-          aria-label="Breadcrumbs"
-          className="brc p-a300 emotion-1"
-        >
-          <ul
-            className="brc-l"
-          >
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/"
-              >
-                Home
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/departments"
-              >
-                Departments
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                href="https://www.boston.gov/departments/registry"
-              >
-                Registry: Birth, death, and marriage and marriage intention
-              </a>
-              <span
-                aria-hidden="true"
-                className="brc-s"
-                style={
-                  Object {
-                    "cursor": "default",
-                  }
-                }
-              >
-                 
-                ›
-                 
-              </span>
-            </li>
-            <li
-              className="brc-l-i"
-            >
-              <a
-                aria-current="page"
-                className="emotion-0"
-                href="/marriageintention"
-              >
-                Marriage Intention
-              </a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-      <div
-        className="a11y--content-start"
-        id="content-start"
-      />
-      <main
-        className="b-ff"
-      >
-        <div
-          aria-live="polite"
-          className="b-c"
-        >
-          <h1
-            className="sh-title emotion-2"
-          >
-            Marriage Intention Application
-          </h1>
-          <div
-            className="emotion-3"
-          >
-            <div
-              className="progressbar"
-            >
-              <div
-                className="nav"
-              >
-                <a
-                  aria-label="Getting Started"
-                  className="completed"
-                  onClick={[Function]}
-                  title="Getting Started"
-                >
-                  Getting Started
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 1"
-                  className="completed"
-                  onClick={[Function]}
-                  title="Person 1"
-                >
-                  Person 1
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Person 2"
-                  className="completed focused current"
-                  onClick={[Function]}
-                  title="Person 2"
-                >
-                  Person 2
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Contact Info"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Contact Info"
-                >
-                  Contact Info
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Review"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Review"
-                >
-                  Review
-                  <span
-                    className="arrow"
-                  />
-                </a>
-                <a
-                  aria-label="Submit"
-                  className="uncompleted"
-                  onClick={[Function]}
-                  title="Submit"
-                >
-                  Submit
-                  <span
-                    className="arrow"
-                  />
-                </a>
-              </div>
-              <div
-                className="progress-text"
-              >
-                <span>
-                  Step 3 of 6
-                </span>
-                <span
-                  className="mobile"
-                >
-                  : 
-                   
-                  Person 2
-                </span>
-              </div>
-            </div>
-          </div>
-          <section
-            className="m-t500"
-          >
-            <div
-              className="b-c b-c--nbp emotion-51"
-            >
-              <div
-                className="emotion-48"
-              >
-                <fieldset
-                  className=" emotion-47"
-                >
-                  <legend>
-                    <h2
-                      className="emotion-4"
-                    >
-                      Person 
-                      2
-                    </h2>
-                  </legend>
-                  <div
-                    className="emotion-13"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Personal Information
-                      <div
-                        className="notice"
-                      >
-                        Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
-                      </div>
-                    </h1>
-                    <span />
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2048906072"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          First Name
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="t--req"
-                          style={
-                            Object {
-                              "display": "flex",
-                              "flexGrow": 1,
-                            }
-                          }
-                        >
-                          Required
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-2048906072"
-                        maxLength={100}
-                        name="partnerB_firstName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2852212527"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Middle Name
-                        </span>
-                      </label>
-                      <label
-                        className="notice emotion-6"
-                      >
-                        Please enter your middle name if you have one. You cannot list a new middle name.
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-2852212527"
-                        maxLength={50}
-                        name="partnerB_middleName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-1103291528"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Last Name
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="t--req"
-                          style={
-                            Object {
-                              "display": "flex",
-                              "flexGrow": 1,
-                            }
-                          }
-                        >
-                          Required
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-1103291528"
-                        maxLength={100}
-                        name="partnerB_lastName"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-8"
-                      >
-                        <div
-                          aria-labelledby="partnerB_useSurname-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerB_useSurname-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Would you like to change your last name?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
-                            >
-                              <div
-                                className="icon"
-                              />
-                              <div
-                                className="msg"
-                              >
-                                Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
-                              </div>
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_useSurname"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_useSurname"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-11"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="select-2202529938"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                                "whiteSpace": "nowrap",
-                              }
-                            }
-                          >
-                            Suffix
-                          </span>
-                          <span
-                            className="t--req t--opt"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Optional
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-6"
-                        >
-                          Please select your suffix if you have one.
-                        </label>
-                        <div
-                          className="sel-c  "
-                        >
-                          <select
-                            aria-label=""
-                            className="sel-f  "
-                            id="select-2202529938"
-                            name="partnerB_suffix"
-                            onChange={[Function]}
-                            value=""
-                          >
-                            <option />
-                            <option
-                              value="I"
-                            >
-                              I
-                            </option>
-                            <option
-                              value="II"
-                            >
-                              II
-                            </option>
-                            <option
-                              value="III"
-                            >
-                              III
-                            </option>
-                            <option
-                              value="IV"
-                            >
-                              IV
-                            </option>
-                            <option
-                              value="V"
-                            >
-                              V
-                            </option>
-                            <option
-                              value="VI"
-                            >
-                              VI
-                            </option>
-                            <option
-                              value="Jr."
-                            >
-                              Jr.
-                            </option>
-                            <option
-                              value="Sr."
-                            >
-                              Sr.
-                            </option>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                    <div>
-                      <label
-                        className="txt-l "
-                        htmlFor="input-2786084594"
-                        style={
-                          Object {
-                            "display": "flex",
-                          }
-                        }
-                      >
-                        <span
-                          style={
-                            Object {
-                              "display": "flex",
-                              "marginRight": "0.5em",
-                            }
-                          }
-                        >
-                          Occupation
-                        </span>
-                        <span
-                          aria-hidden="true"
-                          className="t--req"
-                          style={
-                            Object {
-                              "display": "flex",
-                              "flexGrow": 1,
-                            }
-                          }
-                        >
-                          Required
-                          <span
-                            className="tool-tip__wrapper emotion-7"
-                          >
-                            <div
-                              className="icon"
-                            />
-                            <div
-                              className="msg"
-                            >
-                              This information is collected as required by the Massachusetts State Marriage Intention Form.
-                            </div>
-                          </span>
-                        </span>
-                      </label>
-                      <input
-                        aria-label=""
-                        className="txt-f   "
-                        id="input-2786084594"
-                        maxLength={100}
-                        name="partnerB_occupation"
-                        onChange={[Function]}
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        className="t--subinfo t--err m-b100 m-t100"
-                      >
-                         
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-19"
-                  >
-                    <h1
-                      className="emotion-14"
-                    >
-                      Date and Place of Birth
-                    </h1>
-                    <span />
-                    <fieldset
-                      className="emotion-17"
-                    >
-                      <div
-                        className="emotion-16"
-                      >
-                        <legend
-                          style={
-                            Object {
-                              "display": "none",
-                              "width": "100%",
-                            }
-                          }
-                        >
-                          Person B Date of Birth
-                        </legend>
-                        <div
-                          className=" emotion-15"
-                        >
-                          <div>
-                            <label
-                              className="txt-l"
-                              htmlFor="dob-month"
-                            >
-                              Month
-                              <span
-                                aria-hidden="true"
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "marginLeft": "0.35em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                            </label>
-                            <input
-                              className="txt-f"
-                              id="dob-month"
-                              max="12"
-                              maxLength={2}
-                              min="1"
-                              name="month"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              placeholder="MM"
-                              type="number"
-                              value=""
-                            />
-                          </div>
-                          <div>
-                            <label
-                              className="txt-l"
-                              htmlFor="dob-day"
-                            >
-                              Day
-                              <span
-                                aria-hidden="true"
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "marginLeft": "0.35em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                            </label>
-                            <input
-                              className="txt-f"
-                              id="dob-day"
-                              max="31"
-                              maxLength={2}
-                              min="1"
-                              name="day"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              placeholder="DD"
-                              type="number"
-                              value=""
-                            />
-                          </div>
-                          <div>
-                            <label
-                              className="txt-l"
-                              htmlFor="dob-year"
-                            >
-                              Year
-                              <span
-                                aria-hidden="true"
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "marginLeft": "0.35em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                            </label>
-                            <input
-                              className="txt-f"
-                              id="dob-year"
-                              max={2024}
-                              maxLength={4}
-                              min="1000"
-                              name="year"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              placeholder="YYYY"
-                              type="number"
-                              value=""
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </fieldset>
-                    <div
-                      className="emotion-11"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="select-1817836307"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                                "whiteSpace": "nowrap",
-                              }
-                            }
-                          >
-                            Birthplace Country
-                          </span>
-                          <span
-                            className="t--req"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Required
-                          </span>
-                        </label>
-                        <div
-                          className="sel-c  "
-                        >
-                          <select
-                            aria-label=""
-                            className="sel-f  "
-                            id="select-1817836307"
-                            name="partnerB_birthCountry"
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            value=""
-                          >
-                            <option />
-                            <option
-                              value="USA"
-                            >
-                              United States of America
-                            </option>
-                            <option
-                              value="VIR"
-                            >
-                              United States Virgin Islands
-                            </option>
-                            <option
-                              value="AFG"
-                            >
-                              Afghanistan
-                            </option>
-                            <option
-                              value="ALA"
-                            >
-                              Åland Islands
-                            </option>
-                            <option
-                              value="ALB"
-                            >
-                              Albania
-                            </option>
-                            <option
-                              value="DZA"
-                            >
-                              Algeria
-                            </option>
-                            <option
-                              value="ASM"
-                            >
-                              American Samoa
-                            </option>
-                            <option
-                              value="AND"
-                            >
-                              Andorra
-                            </option>
-                            <option
-                              value="AGO"
-                            >
-                              Angola
-                            </option>
-                            <option
-                              value="AIA"
-                            >
-                              Anguilla
-                            </option>
-                            <option
-                              value="ATG"
-                            >
-                              Antigua and Barbuda
-                            </option>
-                            <option
-                              value="ARG"
-                            >
-                              Argentina
-                            </option>
-                            <option
-                              value="ARM"
-                            >
-                              Armenia
-                            </option>
-                            <option
-                              value="ABW"
-                            >
-                              Aruba
-                            </option>
-                            <option
-                              value="AUS"
-                            >
-                              Australia
-                            </option>
-                            <option
-                              value="AUT"
-                            >
-                              Austria
-                            </option>
-                            <option
-                              value="AZE"
-                            >
-                              Azerbaijan
-                            </option>
-                            <option
-                              value="BHS"
-                            >
-                              Bahamas
-                            </option>
-                            <option
-                              value="BHR"
-                            >
-                              Bahrain
-                            </option>
-                            <option
-                              value="BGD"
-                            >
-                              Bangladesh
-                            </option>
-                            <option
-                              value="BRB"
-                            >
-                              Barbados
-                            </option>
-                            <option
-                              value="BLR"
-                            >
-                              Belarus
-                            </option>
-                            <option
-                              value="BEL"
-                            >
-                              Belgium
-                            </option>
-                            <option
-                              value="BLZ"
-                            >
-                              Belize
-                            </option>
-                            <option
-                              value="BEN"
-                            >
-                              Benin
-                            </option>
-                            <option
-                              value="BMU"
-                            >
-                              Bermuda
-                            </option>
-                            <option
-                              value="BTN"
-                            >
-                              Bhutan
-                            </option>
-                            <option
-                              value="BOL"
-                            >
-                              Bolivia (Plurinational State of)
-                            </option>
-                            <option
-                              value="BES"
-                            >
-                              Bonaire, Saint Eustatius and Saba
-                            </option>
-                            <option
-                              value="BIH"
-                            >
-                              Bosnia and Herzegovina
-                            </option>
-                            <option
-                              value="BWA"
-                            >
-                              Botswana
-                            </option>
-                            <option
-                              value="BRA"
-                            >
-                              Brazil
-                            </option>
-                            <option
-                              value="VGB"
-                            >
-                              British Virgin Islands
-                            </option>
-                            <option
-                              value="BRN"
-                            >
-                              Brunei Darussalam
-                            </option>
-                            <option
-                              value="BGR"
-                            >
-                              Bulgaria
-                            </option>
-                            <option
-                              value="BFA"
-                            >
-                              Burkina Faso
-                            </option>
-                            <option
-                              value="BDI"
-                            >
-                              Burundi
-                            </option>
-                            <option
-                              value="CPV"
-                            >
-                              Cabo Verde
-                            </option>
-                            <option
-                              value="KHM"
-                            >
-                              Cambodia
-                            </option>
-                            <option
-                              value="CMR"
-                            >
-                              Cameroon
-                            </option>
-                            <option
-                              value="CAN"
-                            >
-                              Canada
-                            </option>
-                            <option
-                              value="CYM"
-                            >
-                              Cayman Islands
-                            </option>
-                            <option
-                              value="CAF"
-                            >
-                              Central African Republic
-                            </option>
-                            <option
-                              value="TCD"
-                            >
-                              Chad
-                            </option>
-                            <option
-                              value="CHL"
-                            >
-                              Chile
-                            </option>
-                            <option
-                              value="CHN"
-                            >
-                              China
-                            </option>
-                            <option
-                              value="HKG"
-                            >
-                              China, Hong Kong Special Administrative Region
-                            </option>
-                            <option
-                              value="MAC"
-                            >
-                              China, Macao Special Administrative Region
-                            </option>
-                            <option
-                              value="COL"
-                            >
-                              Colombia
-                            </option>
-                            <option
-                              value="COM"
-                            >
-                              Comoros
-                            </option>
-                            <option
-                              value="COG"
-                            >
-                              Congo
-                            </option>
-                            <option
-                              value="COK"
-                            >
-                              Cook Islands
-                            </option>
-                            <option
-                              value="CRI"
-                            >
-                              Costa Rica
-                            </option>
-                            <option
-                              value="CIV"
-                            >
-                              Côte d'Ivoire
-                            </option>
-                            <option
-                              value="HRV"
-                            >
-                              Croatia
-                            </option>
-                            <option
-                              value="CUB"
-                            >
-                              Cuba
-                            </option>
-                            <option
-                              value="CUW"
-                            >
-                              Curaçao
-                            </option>
-                            <option
-                              value="CYP"
-                            >
-                              Cyprus
-                            </option>
-                            <option
-                              value="CZE"
-                            >
-                              Czech Republic
-                            </option>
-                            <option
-                              value="PRK"
-                            >
-                              Democratic People's Republic of Korea
-                            </option>
-                            <option
-                              value="COD"
-                            >
-                              Democratic Republic of the Congo
-                            </option>
-                            <option
-                              value="DNK"
-                            >
-                              Denmark
-                            </option>
-                            <option
-                              value="DJI"
-                            >
-                              Djibouti
-                            </option>
-                            <option
-                              value="DMA"
-                            >
-                              Dominica
-                            </option>
-                            <option
-                              value="DOM"
-                            >
-                              Dominican Republic
-                            </option>
-                            <option
-                              value="ECU"
-                            >
-                              Ecuador
-                            </option>
-                            <option
-                              value="EGY"
-                            >
-                              Egypt
-                            </option>
-                            <option
-                              value="SLV"
-                            >
-                              El Salvador
-                            </option>
-                            <option
-                              value="GNQ"
-                            >
-                              Equatorial Guinea
-                            </option>
-                            <option
-                              value="ERI"
-                            >
-                              Eritrea
-                            </option>
-                            <option
-                              value="EST"
-                            >
-                              Estonia
-                            </option>
-                            <option
-                              value="ETH"
-                            >
-                              Ethiopia
-                            </option>
-                            <option
-                              value="FRO"
-                            >
-                              Faeroe Islands
-                            </option>
-                            <option
-                              value="FLK"
-                            >
-                              Falkland Islands (Malvinas)
-                            </option>
-                            <option
-                              value="FJI"
-                            >
-                              Fiji
-                            </option>
-                            <option
-                              value="FIN"
-                            >
-                              Finland
-                            </option>
-                            <option
-                              value="FRA"
-                            >
-                              France
-                            </option>
-                            <option
-                              value="GUF"
-                            >
-                              French Guiana
-                            </option>
-                            <option
-                              value="PYF"
-                            >
-                              French Polynesia
-                            </option>
-                            <option
-                              value="GAB"
-                            >
-                              Gabon
-                            </option>
-                            <option
-                              value="GMB"
-                            >
-                              Gambia
-                            </option>
-                            <option
-                              value="GEO"
-                            >
-                              Georgia
-                            </option>
-                            <option
-                              value="DEU"
-                            >
-                              Germany
-                            </option>
-                            <option
-                              value="GHA"
-                            >
-                              Ghana
-                            </option>
-                            <option
-                              value="GIB"
-                            >
-                              Gibraltar
-                            </option>
-                            <option
-                              value="GRC"
-                            >
-                              Greece
-                            </option>
-                            <option
-                              value="GRL"
-                            >
-                              Greenland
-                            </option>
-                            <option
-                              value="GRD"
-                            >
-                              Grenada
-                            </option>
-                            <option
-                              value="GLP"
-                            >
-                              Guadeloupe
-                            </option>
-                            <option
-                              value="GUM"
-                            >
-                              Guam
-                            </option>
-                            <option
-                              value="GTM"
-                            >
-                              Guatemala
-                            </option>
-                            <option
-                              value="GGY"
-                            >
-                              Guernsey
-                            </option>
-                            <option
-                              value="GIN"
-                            >
-                              Guinea
-                            </option>
-                            <option
-                              value="GNB"
-                            >
-                              Guinea-Bissau
-                            </option>
-                            <option
-                              value="GUY"
-                            >
-                              Guyana
-                            </option>
-                            <option
-                              value="HTI"
-                            >
-                              Haiti
-                            </option>
-                            <option
-                              value="VAT"
-                            >
-                              Holy See
-                            </option>
-                            <option
-                              value="HND"
-                            >
-                              Honduras
-                            </option>
-                            <option
-                              value="HUN"
-                            >
-                              Hungary
-                            </option>
-                            <option
-                              value="ISL"
-                            >
-                              Iceland
-                            </option>
-                            <option
-                              value="IND"
-                            >
-                              India
-                            </option>
-                            <option
-                              value="IDN"
-                            >
-                              Indonesia
-                            </option>
-                            <option
-                              value="IRN"
-                            >
-                              Iran (Islamic Republic of)
-                            </option>
-                            <option
-                              value="IRQ"
-                            >
-                              Iraq
-                            </option>
-                            <option
-                              value="IRL"
-                            >
-                              Ireland
-                            </option>
-                            <option
-                              value="IMN"
-                            >
-                              Isle of Man
-                            </option>
-                            <option
-                              value="ISR"
-                            >
-                              Israel
-                            </option>
-                            <option
-                              value="ITA"
-                            >
-                              Italy
-                            </option>
-                            <option
-                              value="JAM"
-                            >
-                              Jamaica
-                            </option>
-                            <option
-                              value="JPN"
-                            >
-                              Japan
-                            </option>
-                            <option
-                              value="JEY"
-                            >
-                              Jersey
-                            </option>
-                            <option
-                              value="JOR"
-                            >
-                              Jordan
-                            </option>
-                            <option
-                              value="KAZ"
-                            >
-                              Kazakhstan
-                            </option>
-                            <option
-                              value="KEN"
-                            >
-                              Kenya
-                            </option>
-                            <option
-                              value="KIR"
-                            >
-                              Kiribati
-                            </option>
-                            <option
-                              value="KWT"
-                            >
-                              Kuwait
-                            </option>
-                            <option
-                              value="KGZ"
-                            >
-                              Kyrgyzstan
-                            </option>
-                            <option
-                              value="LAO"
-                            >
-                              Lao People's Democratic Republic
-                            </option>
-                            <option
-                              value="LVA"
-                            >
-                              Latvia
-                            </option>
-                            <option
-                              value="LBN"
-                            >
-                              Lebanon
-                            </option>
-                            <option
-                              value="LSO"
-                            >
-                              Lesotho
-                            </option>
-                            <option
-                              value="LBR"
-                            >
-                              Liberia
-                            </option>
-                            <option
-                              value="LBY"
-                            >
-                              Libya
-                            </option>
-                            <option
-                              value="LIE"
-                            >
-                              Liechtenstein
-                            </option>
-                            <option
-                              value="LTU"
-                            >
-                              Lithuania
-                            </option>
-                            <option
-                              value="LUX"
-                            >
-                              Luxembourg
-                            </option>
-                            <option
-                              value="MDG"
-                            >
-                              Madagascar
-                            </option>
-                            <option
-                              value="MWI"
-                            >
-                              Malawi
-                            </option>
-                            <option
-                              value="MYS"
-                            >
-                              Malaysia
-                            </option>
-                            <option
-                              value="MDV"
-                            >
-                              Maldives
-                            </option>
-                            <option
-                              value="MLI"
-                            >
-                              Mali
-                            </option>
-                            <option
-                              value="MLT"
-                            >
-                              Malta
-                            </option>
-                            <option
-                              value="MHL"
-                            >
-                              Marshall Islands
-                            </option>
-                            <option
-                              value="MTQ"
-                            >
-                              Martinique
-                            </option>
-                            <option
-                              value="MRT"
-                            >
-                              Mauritania
-                            </option>
-                            <option
-                              value="MUS"
-                            >
-                              Mauritius
-                            </option>
-                            <option
-                              value="MYT"
-                            >
-                              Mayotte
-                            </option>
-                            <option
-                              value="MEX"
-                            >
-                              Mexico
-                            </option>
-                            <option
-                              value="FSM"
-                            >
-                              Micronesia (Federated States of)
-                            </option>
-                            <option
-                              value="MCO"
-                            >
-                              Monaco
-                            </option>
-                            <option
-                              value="MNG"
-                            >
-                              Mongolia
-                            </option>
-                            <option
-                              value="MNE"
-                            >
-                              Montenegro
-                            </option>
-                            <option
-                              value="MSR"
-                            >
-                              Montserrat
-                            </option>
-                            <option
-                              value="MAR"
-                            >
-                              Morocco
-                            </option>
-                            <option
-                              value="MOZ"
-                            >
-                              Mozambique
-                            </option>
-                            <option
-                              value="MMR"
-                            >
-                              Myanmar
-                            </option>
-                            <option
-                              value="NAM"
-                            >
-                              Namibia
-                            </option>
-                            <option
-                              value="NRU"
-                            >
-                              Nauru
-                            </option>
-                            <option
-                              value="NPL"
-                            >
-                              Nepal
-                            </option>
-                            <option
-                              value="NLD"
-                            >
-                              Netherlands
-                            </option>
-                            <option
-                              value="NCL"
-                            >
-                              New Caledonia
-                            </option>
-                            <option
-                              value="NZL"
-                            >
-                              New Zealand
-                            </option>
-                            <option
-                              value="NIC"
-                            >
-                              Nicaragua
-                            </option>
-                            <option
-                              value="NER"
-                            >
-                              Niger
-                            </option>
-                            <option
-                              value="NGA"
-                            >
-                              Nigeria
-                            </option>
-                            <option
-                              value="NIU"
-                            >
-                              Niue
-                            </option>
-                            <option
-                              value="NFK"
-                            >
-                              Norfolk Island
-                            </option>
-                            <option
-                              value="MNP"
-                            >
-                              Northern Mariana Islands
-                            </option>
-                            <option
-                              value="NOR"
-                            >
-                              Norway
-                            </option>
-                            <option
-                              value="OMN"
-                            >
-                              Oman
-                            </option>
-                            <option
-                              value="PAK"
-                            >
-                              Pakistan
-                            </option>
-                            <option
-                              value="PLW"
-                            >
-                              Palau
-                            </option>
-                            <option
-                              value="PAN"
-                            >
-                              Panama
-                            </option>
-                            <option
-                              value="PNG"
-                            >
-                              Papua New Guinea
-                            </option>
-                            <option
-                              value="PRY"
-                            >
-                              Paraguay
-                            </option>
-                            <option
-                              value="PER"
-                            >
-                              Peru
-                            </option>
-                            <option
-                              value="PHL"
-                            >
-                              Philippines
-                            </option>
-                            <option
-                              value="PCN"
-                            >
-                              Pitcairn
-                            </option>
-                            <option
-                              value="POL"
-                            >
-                              Poland
-                            </option>
-                            <option
-                              value="PRT"
-                            >
-                              Portugal
-                            </option>
-                            <option
-                              value="PRI"
-                            >
-                              Puerto Rico
-                            </option>
-                            <option
-                              value="QAT"
-                            >
-                              Qatar
-                            </option>
-                            <option
-                              value="KOR"
-                            >
-                              Republic of Korea
-                            </option>
-                            <option
-                              value="MDA"
-                            >
-                              Republic of Moldova
-                            </option>
-                            <option
-                              value="REU"
-                            >
-                              Réunion
-                            </option>
-                            <option
-                              value="ROU"
-                            >
-                              Romania
-                            </option>
-                            <option
-                              value="RUS"
-                            >
-                              Russian Federation
-                            </option>
-                            <option
-                              value="RWA"
-                            >
-                              Rwanda
-                            </option>
-                            <option
-                              value="BLM"
-                            >
-                              Saint-Barthélemy
-                            </option>
-                            <option
-                              value="SHN"
-                            >
-                              Saint Helena
-                            </option>
-                            <option
-                              value="KNA"
-                            >
-                              Saint Kitts and Nevis
-                            </option>
-                            <option
-                              value="LCA"
-                            >
-                              Saint Lucia
-                            </option>
-                            <option
-                              value="MAF"
-                            >
-                              Saint-Martin (French part)
-                            </option>
-                            <option
-                              value="SPM"
-                            >
-                              Saint Pierre and Miquelon
-                            </option>
-                            <option
-                              value="VCT"
-                            >
-                              Saint Vincent and the Grenadines
-                            </option>
-                            <option
-                              value="WSM"
-                            >
-                              Samoa
-                            </option>
-                            <option
-                              value="SMR"
-                            >
-                              San Marino
-                            </option>
-                            <option
-                              value="STP"
-                            >
-                              Sao Tome and Principe
-                            </option>
-                            <option
-                              value="SAU"
-                            >
-                              Saudi Arabia
-                            </option>
-                            <option
-                              value="SEN"
-                            >
-                              Senegal
-                            </option>
-                            <option
-                              value="SRB"
-                            >
-                              Serbia
-                            </option>
-                            <option
-                              value="SYC"
-                            >
-                              Seychelles
-                            </option>
-                            <option
-                              value="SLE"
-                            >
-                              Sierra Leone
-                            </option>
-                            <option
-                              value="SGP"
-                            >
-                              Singapore
-                            </option>
-                            <option
-                              value="SXM"
-                            >
-                              Sint Maarten (Dutch part)
-                            </option>
-                            <option
-                              value="SVK"
-                            >
-                              Slovakia
-                            </option>
-                            <option
-                              value="SVN"
-                            >
-                              Slovenia
-                            </option>
-                            <option
-                              value="SLB"
-                            >
-                              Solomon Islands
-                            </option>
-                            <option
-                              value="SOM"
-                            >
-                              Somalia
-                            </option>
-                            <option
-                              value="ZAF"
-                            >
-                              South Africa
-                            </option>
-                            <option
-                              value="SSD"
-                            >
-                              South Sudan
-                            </option>
-                            <option
-                              value="ESP"
-                            >
-                              Spain
-                            </option>
-                            <option
-                              value="LKA"
-                            >
-                              Sri Lanka
-                            </option>
-                            <option
-                              value="PSE"
-                            >
-                              State of Palestine
-                            </option>
-                            <option
-                              value="SDN"
-                            >
-                              Sudan
-                            </option>
-                            <option
-                              value="SUR"
-                            >
-                              Suriname
-                            </option>
-                            <option
-                              value="SJM"
-                            >
-                              Svalbard and Jan Mayen Islands
-                            </option>
-                            <option
-                              value="SWZ"
-                            >
-                              Swaziland
-                            </option>
-                            <option
-                              value="SWE"
-                            >
-                              Sweden
-                            </option>
-                            <option
-                              value="CHE"
-                            >
-                              Switzerland
-                            </option>
-                            <option
-                              value="SYR"
-                            >
-                              Syrian Arab Republic
-                            </option>
-                            <option
-                              value="TWAN"
-                            >
-                              Taiwan
-                            </option>
-                            <option
-                              value="TJK"
-                            >
-                              Tajikistan
-                            </option>
-                            <option
-                              value="THA"
-                            >
-                              Thailand
-                            </option>
-                            <option
-                              value="MKD"
-                            >
-                              The former Yugoslav Republic of Macedonia
-                            </option>
-                            <option
-                              value="TLS"
-                            >
-                              Timor-Leste
-                            </option>
-                            <option
-                              value="TGO"
-                            >
-                              Togo
-                            </option>
-                            <option
-                              value="TKL"
-                            >
-                              Tokelau
-                            </option>
-                            <option
-                              value="TON"
-                            >
-                              Tonga
-                            </option>
-                            <option
-                              value="TTO"
-                            >
-                              Trinidad and Tobago
-                            </option>
-                            <option
-                              value="TUN"
-                            >
-                              Tunisia
-                            </option>
-                            <option
-                              value="TUR"
-                            >
-                              Turkey
-                            </option>
-                            <option
-                              value="TKM"
-                            >
-                              Turkmenistan
-                            </option>
-                            <option
-                              value="TCA"
-                            >
-                              Turks and Caicos Islands
-                            </option>
-                            <option
-                              value="TUV"
-                            >
-                              Tuvalu
-                            </option>
-                            <option
-                              value="UGA"
-                            >
-                              Uganda
-                            </option>
-                            <option
-                              value="UKR"
-                            >
-                              Ukraine
-                            </option>
-                            <option
-                              value="ARE"
-                            >
-                              United Arab Emirates
-                            </option>
-                            <option
-                              value="GBR"
-                            >
-                              United Kingdom of Great Britain and Northern Ireland
-                            </option>
-                            <option
-                              value="TZA"
-                            >
-                              United Republic of Tanzania
-                            </option>
-                            <option
-                              value="URY"
-                            >
-                              Uruguay
-                            </option>
-                            <option
-                              value="UZB"
-                            >
-                              Uzbekistan
-                            </option>
-                            <option
-                              value="VUT"
-                            >
-                              Vanuatu
-                            </option>
-                            <option
-                              value="VEN"
-                            >
-                              Venezuela (Bolivarian Republic of)
-                            </option>
-                            <option
-                              value="VNM"
-                            >
-                              Vietnam
-                            </option>
-                            <option
-                              value="WLF"
-                            >
-                              Wallis and Futuna Islands
-                            </option>
-                            <option
-                              value="ESH"
-                            >
-                              Western Sahara
-                            </option>
-                            <option
-                              value="YEM"
-                            >
-                              Yemen
-                            </option>
-                            <option
-                              value="ZMB"
-                            >
-                              Zambia
-                            </option>
-                            <option
-                              value="ZWE"
-                            >
-                              Zimbabwe
-                            </option>
-                          </select>
-                        </div>
-                      </div>
-                    </div>
-                    
-                  </div>
-                  <div
-                    className="emotion-24"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Residence
-                      <div
-                        className="notice"
-                      >
-                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
-                      </div>
-                    </h1>
-                    <div
-                      className="emotion-23"
-                    >
-                      <div
-                        className="emotion-11"
-                      >
-                        <span />
-                        <div>
-                          <label
-                            className="txt-l "
-                            htmlFor="select-3475791712"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            <span
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "marginRight": "0.5em",
-                                }
-                              }
-                            >
-                              Country of Residence
-                            </span>
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                }
-                              }
-                            >
-                              Required
-                              <span
-                                className="tool-tip__wrapper emotion-7"
-                              >
-                                <div
-                                  className="icon"
-                                />
-                                <div
-                                  className="msg"
-                                >
-                                  If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
-                                </div>
-                              </span>
-                            </span>
-                          </label>
-                          <div
-                            className="sel-c  "
-                          >
-                            <select
-                              aria-label=""
-                              className="sel-f  "
-                              id="select-3475791712"
-                              name="partnerB_residenceCountry"
-                              onChange={[Function]}
-                              value=""
-                            >
-                              <option />
-                              <option
-                                value="USA"
-                              >
-                                United States of America
-                              </option>
-                              <option
-                                value="VIR"
-                              >
-                                United States Virgin Islands
-                              </option>
-                              <option
-                                value="AFG"
-                              >
-                                Afghanistan
-                              </option>
-                              <option
-                                value="ALA"
-                              >
-                                Åland Islands
-                              </option>
-                              <option
-                                value="ALB"
-                              >
-                                Albania
-                              </option>
-                              <option
-                                value="DZA"
-                              >
-                                Algeria
-                              </option>
-                              <option
-                                value="ASM"
-                              >
-                                American Samoa
-                              </option>
-                              <option
-                                value="AND"
-                              >
-                                Andorra
-                              </option>
-                              <option
-                                value="AGO"
-                              >
-                                Angola
-                              </option>
-                              <option
-                                value="AIA"
-                              >
-                                Anguilla
-                              </option>
-                              <option
-                                value="ATG"
-                              >
-                                Antigua and Barbuda
-                              </option>
-                              <option
-                                value="ARG"
-                              >
-                                Argentina
-                              </option>
-                              <option
-                                value="ARM"
-                              >
-                                Armenia
-                              </option>
-                              <option
-                                value="ABW"
-                              >
-                                Aruba
-                              </option>
-                              <option
-                                value="AUS"
-                              >
-                                Australia
-                              </option>
-                              <option
-                                value="AUT"
-                              >
-                                Austria
-                              </option>
-                              <option
-                                value="AZE"
-                              >
-                                Azerbaijan
-                              </option>
-                              <option
-                                value="BHS"
-                              >
-                                Bahamas
-                              </option>
-                              <option
-                                value="BHR"
-                              >
-                                Bahrain
-                              </option>
-                              <option
-                                value="BGD"
-                              >
-                                Bangladesh
-                              </option>
-                              <option
-                                value="BRB"
-                              >
-                                Barbados
-                              </option>
-                              <option
-                                value="BLR"
-                              >
-                                Belarus
-                              </option>
-                              <option
-                                value="BEL"
-                              >
-                                Belgium
-                              </option>
-                              <option
-                                value="BLZ"
-                              >
-                                Belize
-                              </option>
-                              <option
-                                value="BEN"
-                              >
-                                Benin
-                              </option>
-                              <option
-                                value="BMU"
-                              >
-                                Bermuda
-                              </option>
-                              <option
-                                value="BTN"
-                              >
-                                Bhutan
-                              </option>
-                              <option
-                                value="BOL"
-                              >
-                                Bolivia (Plurinational State of)
-                              </option>
-                              <option
-                                value="BES"
-                              >
-                                Bonaire, Saint Eustatius and Saba
-                              </option>
-                              <option
-                                value="BIH"
-                              >
-                                Bosnia and Herzegovina
-                              </option>
-                              <option
-                                value="BWA"
-                              >
-                                Botswana
-                              </option>
-                              <option
-                                value="BRA"
-                              >
-                                Brazil
-                              </option>
-                              <option
-                                value="VGB"
-                              >
-                                British Virgin Islands
-                              </option>
-                              <option
-                                value="BRN"
-                              >
-                                Brunei Darussalam
-                              </option>
-                              <option
-                                value="BGR"
-                              >
-                                Bulgaria
-                              </option>
-                              <option
-                                value="BFA"
-                              >
-                                Burkina Faso
-                              </option>
-                              <option
-                                value="BDI"
-                              >
-                                Burundi
-                              </option>
-                              <option
-                                value="CPV"
-                              >
-                                Cabo Verde
-                              </option>
-                              <option
-                                value="KHM"
-                              >
-                                Cambodia
-                              </option>
-                              <option
-                                value="CMR"
-                              >
-                                Cameroon
-                              </option>
-                              <option
-                                value="CAN"
-                              >
-                                Canada
-                              </option>
-                              <option
-                                value="CYM"
-                              >
-                                Cayman Islands
-                              </option>
-                              <option
-                                value="CAF"
-                              >
-                                Central African Republic
-                              </option>
-                              <option
-                                value="TCD"
-                              >
-                                Chad
-                              </option>
-                              <option
-                                value="CHL"
-                              >
-                                Chile
-                              </option>
-                              <option
-                                value="CHN"
-                              >
-                                China
-                              </option>
-                              <option
-                                value="HKG"
-                              >
-                                China, Hong Kong Special Administrative Region
-                              </option>
-                              <option
-                                value="MAC"
-                              >
-                                China, Macao Special Administrative Region
-                              </option>
-                              <option
-                                value="COL"
-                              >
-                                Colombia
-                              </option>
-                              <option
-                                value="COM"
-                              >
-                                Comoros
-                              </option>
-                              <option
-                                value="COG"
-                              >
-                                Congo
-                              </option>
-                              <option
-                                value="COK"
-                              >
-                                Cook Islands
-                              </option>
-                              <option
-                                value="CRI"
-                              >
-                                Costa Rica
-                              </option>
-                              <option
-                                value="CIV"
-                              >
-                                Côte d'Ivoire
-                              </option>
-                              <option
-                                value="HRV"
-                              >
-                                Croatia
-                              </option>
-                              <option
-                                value="CUB"
-                              >
-                                Cuba
-                              </option>
-                              <option
-                                value="CUW"
-                              >
-                                Curaçao
-                              </option>
-                              <option
-                                value="CYP"
-                              >
-                                Cyprus
-                              </option>
-                              <option
-                                value="CZE"
-                              >
-                                Czech Republic
-                              </option>
-                              <option
-                                value="PRK"
-                              >
-                                Democratic People's Republic of Korea
-                              </option>
-                              <option
-                                value="COD"
-                              >
-                                Democratic Republic of the Congo
-                              </option>
-                              <option
-                                value="DNK"
-                              >
-                                Denmark
-                              </option>
-                              <option
-                                value="DJI"
-                              >
-                                Djibouti
-                              </option>
-                              <option
-                                value="DMA"
-                              >
-                                Dominica
-                              </option>
-                              <option
-                                value="DOM"
-                              >
-                                Dominican Republic
-                              </option>
-                              <option
-                                value="ECU"
-                              >
-                                Ecuador
-                              </option>
-                              <option
-                                value="EGY"
-                              >
-                                Egypt
-                              </option>
-                              <option
-                                value="SLV"
-                              >
-                                El Salvador
-                              </option>
-                              <option
-                                value="GNQ"
-                              >
-                                Equatorial Guinea
-                              </option>
-                              <option
-                                value="ERI"
-                              >
-                                Eritrea
-                              </option>
-                              <option
-                                value="EST"
-                              >
-                                Estonia
-                              </option>
-                              <option
-                                value="ETH"
-                              >
-                                Ethiopia
-                              </option>
-                              <option
-                                value="FRO"
-                              >
-                                Faeroe Islands
-                              </option>
-                              <option
-                                value="FLK"
-                              >
-                                Falkland Islands (Malvinas)
-                              </option>
-                              <option
-                                value="FJI"
-                              >
-                                Fiji
-                              </option>
-                              <option
-                                value="FIN"
-                              >
-                                Finland
-                              </option>
-                              <option
-                                value="FRA"
-                              >
-                                France
-                              </option>
-                              <option
-                                value="GUF"
-                              >
-                                French Guiana
-                              </option>
-                              <option
-                                value="PYF"
-                              >
-                                French Polynesia
-                              </option>
-                              <option
-                                value="GAB"
-                              >
-                                Gabon
-                              </option>
-                              <option
-                                value="GMB"
-                              >
-                                Gambia
-                              </option>
-                              <option
-                                value="GEO"
-                              >
-                                Georgia
-                              </option>
-                              <option
-                                value="DEU"
-                              >
-                                Germany
-                              </option>
-                              <option
-                                value="GHA"
-                              >
-                                Ghana
-                              </option>
-                              <option
-                                value="GIB"
-                              >
-                                Gibraltar
-                              </option>
-                              <option
-                                value="GRC"
-                              >
-                                Greece
-                              </option>
-                              <option
-                                value="GRL"
-                              >
-                                Greenland
-                              </option>
-                              <option
-                                value="GRD"
-                              >
-                                Grenada
-                              </option>
-                              <option
-                                value="GLP"
-                              >
-                                Guadeloupe
-                              </option>
-                              <option
-                                value="GUM"
-                              >
-                                Guam
-                              </option>
-                              <option
-                                value="GTM"
-                              >
-                                Guatemala
-                              </option>
-                              <option
-                                value="GGY"
-                              >
-                                Guernsey
-                              </option>
-                              <option
-                                value="GIN"
-                              >
-                                Guinea
-                              </option>
-                              <option
-                                value="GNB"
-                              >
-                                Guinea-Bissau
-                              </option>
-                              <option
-                                value="GUY"
-                              >
-                                Guyana
-                              </option>
-                              <option
-                                value="HTI"
-                              >
-                                Haiti
-                              </option>
-                              <option
-                                value="VAT"
-                              >
-                                Holy See
-                              </option>
-                              <option
-                                value="HND"
-                              >
-                                Honduras
-                              </option>
-                              <option
-                                value="HUN"
-                              >
-                                Hungary
-                              </option>
-                              <option
-                                value="ISL"
-                              >
-                                Iceland
-                              </option>
-                              <option
-                                value="IND"
-                              >
-                                India
-                              </option>
-                              <option
-                                value="IDN"
-                              >
-                                Indonesia
-                              </option>
-                              <option
-                                value="IRN"
-                              >
-                                Iran (Islamic Republic of)
-                              </option>
-                              <option
-                                value="IRQ"
-                              >
-                                Iraq
-                              </option>
-                              <option
-                                value="IRL"
-                              >
-                                Ireland
-                              </option>
-                              <option
-                                value="IMN"
-                              >
-                                Isle of Man
-                              </option>
-                              <option
-                                value="ISR"
-                              >
-                                Israel
-                              </option>
-                              <option
-                                value="ITA"
-                              >
-                                Italy
-                              </option>
-                              <option
-                                value="JAM"
-                              >
-                                Jamaica
-                              </option>
-                              <option
-                                value="JPN"
-                              >
-                                Japan
-                              </option>
-                              <option
-                                value="JEY"
-                              >
-                                Jersey
-                              </option>
-                              <option
-                                value="JOR"
-                              >
-                                Jordan
-                              </option>
-                              <option
-                                value="KAZ"
-                              >
-                                Kazakhstan
-                              </option>
-                              <option
-                                value="KEN"
-                              >
-                                Kenya
-                              </option>
-                              <option
-                                value="KIR"
-                              >
-                                Kiribati
-                              </option>
-                              <option
-                                value="KWT"
-                              >
-                                Kuwait
-                              </option>
-                              <option
-                                value="KGZ"
-                              >
-                                Kyrgyzstan
-                              </option>
-                              <option
-                                value="LAO"
-                              >
-                                Lao People's Democratic Republic
-                              </option>
-                              <option
-                                value="LVA"
-                              >
-                                Latvia
-                              </option>
-                              <option
-                                value="LBN"
-                              >
-                                Lebanon
-                              </option>
-                              <option
-                                value="LSO"
-                              >
-                                Lesotho
-                              </option>
-                              <option
-                                value="LBR"
-                              >
-                                Liberia
-                              </option>
-                              <option
-                                value="LBY"
-                              >
-                                Libya
-                              </option>
-                              <option
-                                value="LIE"
-                              >
-                                Liechtenstein
-                              </option>
-                              <option
-                                value="LTU"
-                              >
-                                Lithuania
-                              </option>
-                              <option
-                                value="LUX"
-                              >
-                                Luxembourg
-                              </option>
-                              <option
-                                value="MDG"
-                              >
-                                Madagascar
-                              </option>
-                              <option
-                                value="MWI"
-                              >
-                                Malawi
-                              </option>
-                              <option
-                                value="MYS"
-                              >
-                                Malaysia
-                              </option>
-                              <option
-                                value="MDV"
-                              >
-                                Maldives
-                              </option>
-                              <option
-                                value="MLI"
-                              >
-                                Mali
-                              </option>
-                              <option
-                                value="MLT"
-                              >
-                                Malta
-                              </option>
-                              <option
-                                value="MHL"
-                              >
-                                Marshall Islands
-                              </option>
-                              <option
-                                value="MTQ"
-                              >
-                                Martinique
-                              </option>
-                              <option
-                                value="MRT"
-                              >
-                                Mauritania
-                              </option>
-                              <option
-                                value="MUS"
-                              >
-                                Mauritius
-                              </option>
-                              <option
-                                value="MYT"
-                              >
-                                Mayotte
-                              </option>
-                              <option
-                                value="MEX"
-                              >
-                                Mexico
-                              </option>
-                              <option
-                                value="FSM"
-                              >
-                                Micronesia (Federated States of)
-                              </option>
-                              <option
-                                value="MCO"
-                              >
-                                Monaco
-                              </option>
-                              <option
-                                value="MNG"
-                              >
-                                Mongolia
-                              </option>
-                              <option
-                                value="MNE"
-                              >
-                                Montenegro
-                              </option>
-                              <option
-                                value="MSR"
-                              >
-                                Montserrat
-                              </option>
-                              <option
-                                value="MAR"
-                              >
-                                Morocco
-                              </option>
-                              <option
-                                value="MOZ"
-                              >
-                                Mozambique
-                              </option>
-                              <option
-                                value="MMR"
-                              >
-                                Myanmar
-                              </option>
-                              <option
-                                value="NAM"
-                              >
-                                Namibia
-                              </option>
-                              <option
-                                value="NRU"
-                              >
-                                Nauru
-                              </option>
-                              <option
-                                value="NPL"
-                              >
-                                Nepal
-                              </option>
-                              <option
-                                value="NLD"
-                              >
-                                Netherlands
-                              </option>
-                              <option
-                                value="NCL"
-                              >
-                                New Caledonia
-                              </option>
-                              <option
-                                value="NZL"
-                              >
-                                New Zealand
-                              </option>
-                              <option
-                                value="NIC"
-                              >
-                                Nicaragua
-                              </option>
-                              <option
-                                value="NER"
-                              >
-                                Niger
-                              </option>
-                              <option
-                                value="NGA"
-                              >
-                                Nigeria
-                              </option>
-                              <option
-                                value="NIU"
-                              >
-                                Niue
-                              </option>
-                              <option
-                                value="NFK"
-                              >
-                                Norfolk Island
-                              </option>
-                              <option
-                                value="MNP"
-                              >
-                                Northern Mariana Islands
-                              </option>
-                              <option
-                                value="NOR"
-                              >
-                                Norway
-                              </option>
-                              <option
-                                value="OMN"
-                              >
-                                Oman
-                              </option>
-                              <option
-                                value="PAK"
-                              >
-                                Pakistan
-                              </option>
-                              <option
-                                value="PLW"
-                              >
-                                Palau
-                              </option>
-                              <option
-                                value="PAN"
-                              >
-                                Panama
-                              </option>
-                              <option
-                                value="PNG"
-                              >
-                                Papua New Guinea
-                              </option>
-                              <option
-                                value="PRY"
-                              >
-                                Paraguay
-                              </option>
-                              <option
-                                value="PER"
-                              >
-                                Peru
-                              </option>
-                              <option
-                                value="PHL"
-                              >
-                                Philippines
-                              </option>
-                              <option
-                                value="PCN"
-                              >
-                                Pitcairn
-                              </option>
-                              <option
-                                value="POL"
-                              >
-                                Poland
-                              </option>
-                              <option
-                                value="PRT"
-                              >
-                                Portugal
-                              </option>
-                              <option
-                                value="PRI"
-                              >
-                                Puerto Rico
-                              </option>
-                              <option
-                                value="QAT"
-                              >
-                                Qatar
-                              </option>
-                              <option
-                                value="KOR"
-                              >
-                                Republic of Korea
-                              </option>
-                              <option
-                                value="MDA"
-                              >
-                                Republic of Moldova
-                              </option>
-                              <option
-                                value="REU"
-                              >
-                                Réunion
-                              </option>
-                              <option
-                                value="ROU"
-                              >
-                                Romania
-                              </option>
-                              <option
-                                value="RUS"
-                              >
-                                Russian Federation
-                              </option>
-                              <option
-                                value="RWA"
-                              >
-                                Rwanda
-                              </option>
-                              <option
-                                value="BLM"
-                              >
-                                Saint-Barthélemy
-                              </option>
-                              <option
-                                value="SHN"
-                              >
-                                Saint Helena
-                              </option>
-                              <option
-                                value="KNA"
-                              >
-                                Saint Kitts and Nevis
-                              </option>
-                              <option
-                                value="LCA"
-                              >
-                                Saint Lucia
-                              </option>
-                              <option
-                                value="MAF"
-                              >
-                                Saint-Martin (French part)
-                              </option>
-                              <option
-                                value="SPM"
-                              >
-                                Saint Pierre and Miquelon
-                              </option>
-                              <option
-                                value="VCT"
-                              >
-                                Saint Vincent and the Grenadines
-                              </option>
-                              <option
-                                value="WSM"
-                              >
-                                Samoa
-                              </option>
-                              <option
-                                value="SMR"
-                              >
-                                San Marino
-                              </option>
-                              <option
-                                value="STP"
-                              >
-                                Sao Tome and Principe
-                              </option>
-                              <option
-                                value="SAU"
-                              >
-                                Saudi Arabia
-                              </option>
-                              <option
-                                value="SEN"
-                              >
-                                Senegal
-                              </option>
-                              <option
-                                value="SRB"
-                              >
-                                Serbia
-                              </option>
-                              <option
-                                value="SYC"
-                              >
-                                Seychelles
-                              </option>
-                              <option
-                                value="SLE"
-                              >
-                                Sierra Leone
-                              </option>
-                              <option
-                                value="SGP"
-                              >
-                                Singapore
-                              </option>
-                              <option
-                                value="SXM"
-                              >
-                                Sint Maarten (Dutch part)
-                              </option>
-                              <option
-                                value="SVK"
-                              >
-                                Slovakia
-                              </option>
-                              <option
-                                value="SVN"
-                              >
-                                Slovenia
-                              </option>
-                              <option
-                                value="SLB"
-                              >
-                                Solomon Islands
-                              </option>
-                              <option
-                                value="SOM"
-                              >
-                                Somalia
-                              </option>
-                              <option
-                                value="ZAF"
-                              >
-                                South Africa
-                              </option>
-                              <option
-                                value="SSD"
-                              >
-                                South Sudan
-                              </option>
-                              <option
-                                value="ESP"
-                              >
-                                Spain
-                              </option>
-                              <option
-                                value="LKA"
-                              >
-                                Sri Lanka
-                              </option>
-                              <option
-                                value="PSE"
-                              >
-                                State of Palestine
-                              </option>
-                              <option
-                                value="SDN"
-                              >
-                                Sudan
-                              </option>
-                              <option
-                                value="SUR"
-                              >
-                                Suriname
-                              </option>
-                              <option
-                                value="SJM"
-                              >
-                                Svalbard and Jan Mayen Islands
-                              </option>
-                              <option
-                                value="SWZ"
-                              >
-                                Swaziland
-                              </option>
-                              <option
-                                value="SWE"
-                              >
-                                Sweden
-                              </option>
-                              <option
-                                value="CHE"
-                              >
-                                Switzerland
-                              </option>
-                              <option
-                                value="SYR"
-                              >
-                                Syrian Arab Republic
-                              </option>
-                              <option
-                                value="TWAN"
-                              >
-                                Taiwan
-                              </option>
-                              <option
-                                value="TJK"
-                              >
-                                Tajikistan
-                              </option>
-                              <option
-                                value="THA"
-                              >
-                                Thailand
-                              </option>
-                              <option
-                                value="MKD"
-                              >
-                                The former Yugoslav Republic of Macedonia
-                              </option>
-                              <option
-                                value="TLS"
-                              >
-                                Timor-Leste
-                              </option>
-                              <option
-                                value="TGO"
-                              >
-                                Togo
-                              </option>
-                              <option
-                                value="TKL"
-                              >
-                                Tokelau
-                              </option>
-                              <option
-                                value="TON"
-                              >
-                                Tonga
-                              </option>
-                              <option
-                                value="TTO"
-                              >
-                                Trinidad and Tobago
-                              </option>
-                              <option
-                                value="TUN"
-                              >
-                                Tunisia
-                              </option>
-                              <option
-                                value="TUR"
-                              >
-                                Turkey
-                              </option>
-                              <option
-                                value="TKM"
-                              >
-                                Turkmenistan
-                              </option>
-                              <option
-                                value="TCA"
-                              >
-                                Turks and Caicos Islands
-                              </option>
-                              <option
-                                value="TUV"
-                              >
-                                Tuvalu
-                              </option>
-                              <option
-                                value="UGA"
-                              >
-                                Uganda
-                              </option>
-                              <option
-                                value="UKR"
-                              >
-                                Ukraine
-                              </option>
-                              <option
-                                value="ARE"
-                              >
-                                United Arab Emirates
-                              </option>
-                              <option
-                                value="GBR"
-                              >
-                                United Kingdom of Great Britain and Northern Ireland
-                              </option>
-                              <option
-                                value="TZA"
-                              >
-                                United Republic of Tanzania
-                              </option>
-                              <option
-                                value="URY"
-                              >
-                                Uruguay
-                              </option>
-                              <option
-                                value="UZB"
-                              >
-                                Uzbekistan
-                              </option>
-                              <option
-                                value="VUT"
-                              >
-                                Vanuatu
-                              </option>
-                              <option
-                                value="VEN"
-                              >
-                                Venezuela (Bolivarian Republic of)
-                              </option>
-                              <option
-                                value="VNM"
-                              >
-                                Vietnam
-                              </option>
-                              <option
-                                value="WLF"
-                              >
-                                Wallis and Futuna Islands
-                              </option>
-                              <option
-                                value="ESH"
-                              >
-                                Western Sahara
-                              </option>
-                              <option
-                                value="YEM"
-                              >
-                                Yemen
-                              </option>
-                              <option
-                                value="ZMB"
-                              >
-                                Zambia
-                              </option>
-                              <option
-                                value="ZWE"
-                              >
-                                Zimbabwe
-                              </option>
-                            </select>
-                          </div>
-                        </div>
-                      </div>
-                      
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-19"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Marriage
-                      <div
-                        className="notice"
-                      />
-                    </h1>
-                    <span />
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-8"
-                      >
-                        <div
-                          aria-labelledby="partnerB_bloodRelation-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerB_bloodRelation-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Are you related by blood or marriage to your future spouse?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
-                            >
-                              <div
-                                className="icon"
-                              />
-                              <div
-                                className="msg"
-                              >
-                                This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
-                              </div>
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_bloodRelation"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_bloodRelation"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-9"
-                    >
-                      <div
-                        className="emotion-8"
-                      >
-                        <div
-                          aria-labelledby="partnerB_marriedBefore-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerB_marriedBefore-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Have you ever been married before?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_marriedBefore"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_marriedBefore"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div
-                      className="emotion-24"
-                    >
-                      <div
-                        className="emotion-33"
-                      >
-                        <div
-                          className="emotion-9"
-                        >
-                          <div
-                            aria-labelledby="partnerB_partnershipType-groupLabel"
-                            className="radio-group__label"
-                            role="group"
-                          >
-                            <div
-                              className="txt-l"
-                              id="partnerB_partnershipType-groupLabel"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                }
-                              }
-                            >
-                              Were you ever a member of a civil union or domestic partnership?
-                              <span
-                                className="t--req"
-                                style={
-                                  Object {
-                                    "display": "flex",
-                                    "paddingLeft": "0.25em",
-                                  }
-                                }
-                              >
-                                Required
-                              </span>
-                              <span
-                                className="tool-tip__wrapper emotion-7"
-                              >
-                                <div
-                                  className="icon"
-                                />
-                                <div
-                                  className="msg"
-                                >
-                                  This information is collected as required by the Massachusetts State Marriage Intention Form.
-                                </div>
-                              </span>
-                            </div>
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerB_partnershipType"
-                                onChange={[Function]}
-                                type="radio"
-                                value="CIV"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes, a civil union
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerB_partnershipType"
-                                onChange={[Function]}
-                                type="radio"
-                                value="DOM"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                Yes, a domestic partnership
-                              </span>
-                            </label>
-                            <label
-                              className="ra  "
-                            >
-                              <input
-                                className="ra-f"
-                                name="partnerB_partnershipType"
-                                onChange={[Function]}
-                                type="radio"
-                                value="N/A"
-                              />
-                              <span
-                                className="ra-l"
-                              >
-                                No
-                              </span>
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                      
-                    </div>
-                  </div>
-                  <div
-                    className="emotion-24"
-                  >
-                    <h1
-                      className="emotion-5"
-                    >
-                      Parents
-                      <div
-                        className="notice"
-                      >
-                        Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
-                        <span
-                          className="tool-tip__wrapper emotion-36"
-                        >
-                          <div
-                            className="icon"
-                          />
-                          <div
-                            className="msg"
-                          >
-                            This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
-                          </div>
-                        </span>
-                      </div>
-                    </h1>
-                    <span />
-                    <div
-                      className="emotion-45"
-                    >
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-507056287"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Parent 1 - First Middle Last Name
-                          </span>
-                          <span
-                            aria-hidden="true"
-                            className="t--req"
-                            style={
-                              Object {
-                                "display": "flex",
-                                "flexGrow": 1,
-                              }
-                            }
-                          >
-                            Required
-                          </span>
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f   "
-                          id="input-507056287"
-                          maxLength={38}
-                          name="partnerB_parentA_Name"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div>
-                        <label
-                          className="txt-l "
-                          htmlFor="input-4196106810"
-                          style={
-                            Object {
-                              "display": "flex",
-                            }
-                          }
-                        >
-                          <span
-                            style={
-                              Object {
-                                "display": "flex",
-                                "marginRight": "0.5em",
-                              }
-                            }
-                          >
-                            Parent 1 - Family Name/Last Name At the time of their birth or adoption
-                          </span>
-                          <span
-                            aria-hidden="true"
-                            className="t--req"
-                            style={
-                              Object {
-                                "display": "flex",
-                                "flexGrow": 1,
-                              }
-                            }
-                          >
-                            Required
-                          </span>
-                        </label>
-                        <label
-                          className="notice emotion-6"
-                        >
-                          This information might be found on your birth certificate.
-                        </label>
-                        <input
-                          aria-label=""
-                          className="txt-f   "
-                          id="input-4196106810"
-                          maxLength={38}
-                          name="partnerB_parentA_Surname"
-                          onChange={[Function]}
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          className="t--subinfo t--err m-b100 m-t100"
-                        >
-                           
-                        </div>
-                      </div>
-                      <div
-                        className="emotion-9"
-                      >
-                        <div
-                          aria-labelledby="partnerB_additionalParent-groupLabel"
-                          className="radio-group__label"
-                          role="group"
-                        >
-                          <div
-                            className="txt-l"
-                            id="partnerB_additionalParent-groupLabel"
-                            style={
-                              Object {
-                                "display": "flex",
-                              }
-                            }
-                          >
-                            Do you have a second parent?
-                            <span
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "paddingLeft": "0.25em",
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                          </div>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_additionalParent"
-                              onChange={[Function]}
-                              type="radio"
-                              value="1"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              Yes
-                            </span>
-                          </label>
-                          <label
-                            className="ra  "
-                          >
-                            <input
-                              className="ra-f"
-                              name="partnerB_additionalParent"
-                              onChange={[Function]}
-                              type="radio"
-                              value="0"
-                            />
-                            <span
-                              className="ra-l"
-                            >
-                              No
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                      <div
-                        className="emotion-24"
-                      >
-                        <div
-                          className="emotion-43"
-                        >
-                          <div
-                            className="emotion-9"
-                          >
-                            <div
-                              className="emotion-8"
-                            >
-                              <div
-                                aria-labelledby="partnerB_parentsMarriedAtBirth-groupLabel"
-                                className="radio-group__label"
-                                role="group"
-                              >
-                                <div
-                                  className="txt-l"
-                                  id="partnerB_parentsMarriedAtBirth-groupLabel"
-                                  style={
-                                    Object {
-                                      "display": "flex",
-                                    }
-                                  }
-                                >
-                                  Were your parents married at the time of your birth?
-                                  <span
-                                    className="t--req"
-                                    style={
-                                      Object {
-                                        "display": "flex",
-                                        "paddingLeft": "0.25em",
-                                      }
-                                    }
-                                  >
-                                    Required
-                                  </span>
-                                  <span
-                                    className="tool-tip__wrapper emotion-7"
-                                  >
-                                    <div
-                                      className="icon"
-                                    />
-                                    <div
-                                      className="msg"
-                                    >
-                                      This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
-                                    </div>
-                                  </span>
-                                </div>
-                                <label
-                                  className="ra  "
-                                >
-                                  <input
-                                    className="ra-f"
-                                    name="partnerB_parentsMarriedAtBirth"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value="1"
-                                  />
-                                  <span
-                                    className="ra-l"
-                                  >
-                                    Yes
-                                  </span>
-                                </label>
-                                <label
-                                  className="ra  "
-                                >
-                                  <input
-                                    className="ra-f"
-                                    name="partnerB_parentsMarriedAtBirth"
-                                    onChange={[Function]}
-                                    type="radio"
-                                    value="0"
-                                  />
-                                  <span
-                                    className="ra-l"
-                                  >
-                                    No
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </fieldset>
+<div>
+  <div
+    className="emotion-0"
+  >
+    <div
+      className="wrapper-title"
+    >
+      <h1>
+        Person A
+      </h1>
+    </div>
+    <div
+      className="wrapper-btn"
+    >
+      <button
+        className="btn btn--b-sm"
+        onClick={[Function]}
+        type="button"
+      >
+        Edit This Page
+      </button>
+    </div>
+  </div>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Personal Information
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Legal Name
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Thomas Menino
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Last Name to be Used After Marriage
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Menino
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Occupation
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Mayor
+        </span>
+      </div>
+    </div>
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Date and Place of Birth
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Date of Birth
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Jan 01, 1933
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          BirthPlace
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Boston,  USA
+        </span>
+      </div>
+    </div>
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Residence
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Address
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          
+          1 City Hall Plaza,
+          Boston
+          MA 
+          02201-1020 
+           USA
+        
+        </span>
+      </div>
+    </div>
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Marriage
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          If Applicable, Blood Relation To Current Partner
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Yes
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Blood Relation Description
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Third Cousin's Removed
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Marriage Number
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          2nd
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          If Applicable, Status of Last Marriage
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Void or annulled by court order
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          If Applicable, Status of Civil Union or Domestic Partnership
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Yes
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          If Applicable, State of Civil Union or Domestic Partnership
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Domestic Partnership
+        </span>
+      </div>
+    </div>
+    <div
+      className="section-wrapper"
+    >
+      <h2>
+        Parents
+      </h2>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Parent 1
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Mother F. Mother L.
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Parent 2
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          Father F. Father L.
+        </span>
+      </div>
+      <div
+        className="field-value-pair"
+      >
+        <label
+          className="field"
+        >
+          Status of Marriage at Time of Birth
+          : 
+        </label>
+        <span
+          className="value"
+        >
+          No
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Components Tool-Tip 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-0 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-0 .icon::before {
+  content: '?';
+}
+
+.emotion-0 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-0 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-0 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-0 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-2 {
+  margin-top: 4em;
+}
+
+<div>
+  <div>
+    <span
+      className="tool-tip__wrapper emotion-0"
+    >
+      <div
+        className="icon"
+      />
+      <div
+        className="msg"
+      >
+        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+      </div>
+    </span>
+  </div>
+  <div
+    className="emotion-2"
+  >
+    <span
+      className="tool-tip__wrapper emotion-0"
+    >
+      <div
+        className="icon"
+      />
+      <div
+        className="msg"
+      >
+        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Marriage Intention/Form Step 1. Instructions 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-6 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-6 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-6 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-7 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-7 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-7 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-7 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-7 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  table-layout: fixed;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-weight: bold;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  color: '#58585B';
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0.5em;
+  color: black;
+  background: #fff;
+  width: 2%;
+  font-size: 0.85em;
+  vertical-align: middle;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed.current {
+  cursor: pointer;
+  color: #fff;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused.current {
+  color: #000;
+  cursor: pointer;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  color: #000;
+  cursor: pointer;
+  background: #b0d9ff;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
+  cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
+.emotion-8 {
+  padding: 0px;
+}
+
+.emotion-5 {
+  line-height: 1.38em;
+}
+
+.emotion-5 h1 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 2rem;
+  font-style: normal;
+  color: #091f2f;
+}
+
+.emotion-5 h2 {
+  padding-bottom: 0.25rem;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  border-bottom: 4px solid #091f2f;
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-style: normal;
+  color: #091f2f;
+}
+
+.emotion-5 .getting-started {
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.emotion-5 .getting-started .emphasis {
+  font-style: bold;
+  font-weight: 700;
+}
+
+.emotion-5 .getting-started ul {
+  margin-bottom: 1rem;
+}
+
+.emotion-5 .getting-started ul li {
+  list-style: initial;
+  margin: 0.25rem 0 0.25rem 1.75rem;
+}
+
+.emotion-4 {
+  background: #FFE5A0;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.35em 0.75em;
+  font-family: Montserrat,Arial,sans-serif;
+  font-size: 0.95em;
+}
+
+.emotion-4 .note {
+  font-weight: bold;
+  padding-right: 0.25em;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 1 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Getting Started
+                </span>
               </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-8"
+            >
               <div
-                className="g g--mr emotion-50"
+                className="emotion-6"
               >
                 <div
-                  className="t--info g--6 m-b500"
+                  className="emotion-5"
                 >
-                  <button
-                    className="lnk emotion-49"
-                    onClick={[Function]}
-                    type="button"
+                  <h1>
+                    Before You Get Started
+                  </h1>
+                  <div
+                    className="getting-started"
                   >
-                    <span
-                      style={
-                        Object {
-                          "fontStyle": "italic",
-                          "whiteSpace": "nowrap",
-                        }
-                      }
-                    >
+                    <p>
                       <span
-                        aria-hidden="true"
-                        style={
-                          Object {
-                            "fontStyle": "normal",
-                          }
-                        }
+                        className="emphasis"
                       >
-                        ←
+                        The information you provide in this application will help us complete the marriage intention form, which is a legal document that is important for the marriage license.
                       </span>
                        
-                      Back
+                      During your appointment, we will review and finalize the information you share here and make sure everything's set before it is printed onto your marriage intention form.
+                    </p>
+                    <p>
+                      It should take about 
+                      <span
+                        className="emphasis"
+                      >
+                        15 minutes
+                      </span>
+                       
+                      to finish this application if you have all the information below. We recommend that you and your partner fill this out together.
+                    </p>
+                  </div>
+                  <h2>
+                    What We Need From You and Your Partner
+                  </h2>
+                  <div
+                    className="getting-started"
+                  >
+                    <ul>
+                      <li>
+                        Legal names and last names you'll use after marriage
+                      </li>
+                      <li>
+                        Birthdates and birthplaces
+                      </li>
+                      <li>
+                        Residential addresses
+                      </li>
+                      <li>
+                        If you've been married before, how many times and the status of your last marriage
+                      </li>
+                      <li>
+                        If you've been in a civil union or domestic partnership before, its location and status
+                      </li>
+                      <li>
+                        Parents' names (including their family names) and whether they were married when you were born
+                      </li>
+                    </ul>
+                  </div>
+                  <h2>
+                    Documents That Might Be Helpful
+                  </h2>
+                  <div
+                    className="getting-started"
+                  >
+                    <ul>
+                      <li>
+                        A government-issued ID
+                      </li>
+                      <li>
+                        A birth certificate
+                      </li>
+                    </ul>
+                  </div>
+                  <div
+                    className="emotion-4"
+                  >
+                    <span
+                      className="note"
+                    >
+                      Note:
                     </span>
-                  </button>
+                    If you edit your information, you must click the "save and continue" button to save your changes.
+                  </div>
                 </div>
+              </div>
+              <div
+                className="g g--mr emotion-7"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                />
                 <div
                   className="g--6 ta-r m-b500"
                 >
                   <button
                     className="btn btn--b-sm"
-                    disabled={true}
+                    disabled={false}
                     onClick={[Function]}
                     type="button"
                   >
-                    NEXT
+                    START
                   </button>
                 </div>
               </div>
@@ -83962,451 +74669,1016 @@ Array [
       </a>
     </li>
 
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
-    </li>
-  </ul>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Step 2. Person 1 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-48 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-48 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-48 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-47 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-47 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-47 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-47 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
+.emotion-50 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-50 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-50 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-50 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-50 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-49 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-17 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-17 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-15 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-15 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-15 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-15 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-15 input::-ms-clear {
+  display: none;
+}
+
+.emotion-15 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-15.disabled {
+  opacity: 0.4;
+}
+
+.emotion-15.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  table-layout: fixed;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-weight: bold;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  color: '#58585B';
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0.5em;
+  color: black;
+  background: #fff;
+  width: 2%;
+  font-size: 0.85em;
+  vertical-align: middle;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed.current {
+  cursor: pointer;
+  color: #fff;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused.current {
+  color: #000;
+  cursor: pointer;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  color: #000;
+  cursor: pointer;
+  background: #b0d9ff;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
+  cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
+.emotion-51 {
+  padding: 0px;
+}
+
+.emotion-4 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  padding-bottom: 0.25em;
+}
+
+.emotion-4 h2 {
+  margin-bottom: 3.9375rem;
+}
 
-  <ul class=\\"ft-ll ft-ite-311\\">
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
-        <span class=\\"ft-ll-311\\">BOS:311</span>
-        <span class=\\"tablet--hidden\\"> - </span>
-        Report an issue
-      </a>
-    </li>
-  </ul>
-</div>
-",
-      }
-    }
-    style={
-      Object {
-        "position": "relative",
-        "zIndex": 2,
-      }
-    }
-  />,
-]
-`;
+.emotion-13 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 1.5em;
+}
 
-exports[`Storyshots Marriage Intention/Form Pages Step 4. Contact Info 1`] = `
-Array [
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>,
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />,
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
+.emotion-13 label {
+  margin-top: 0em;
+}
+
+.emotion-13 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-13 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-13 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-13 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-13 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-13 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-13 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-13 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-13 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-13 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-5 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-5 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-5 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-5 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-9 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-9 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-9 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-9 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-9 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-8 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-7 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-7 .icon::before {
+  content: '?';
+}
 
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />,
-  .emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.emotion-7 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
 }
 
-.emotion-0 {
-  color: #d22d23;
+.emotion-7 .tt--info::before {
+  content: 'i';
 }
 
-.emotion-14 fieldset + fieldset {
-  margin-top: 2rem;
+.emotion-7 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
 }
 
-@media screen and (min-width:480px) {
-  .emotion-14 fieldset + fieldset {
-    margin-top: 4rem;
-  }
+.emotion-7 .icon:hover + .msg {
+  visibility: visible;
+}
 
-  .emotion-14 fieldset + fieldset .lnk {
-    padding-left: 0;
+.emotion-11 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.emotion-13 {
-  margin: 0;
-  padding: 0;
-  border: none;
+.emotion-11 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-13 legend {
-  padding-left: 0;
-  padding-right: 0;
-  width: 100%;
+.emotion-11 > div {
+  text-align: left;
 }
 
-.emotion-13 h2 {
-  margin-bottom: 0;
-  font-family: Montserrat,Arial,sans-serif;
+@media screen and (min-width:768px) {
+  .emotion-11 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-11 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-11 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
-  color: #091f2f;
+  font-size: 1rem;
 }
 
-.emotion-13 .desc {
-  margin: 0.5rem 0 0.75rem;
-  font-family: Lora,Georgia,serif;
-  font-size: 0.9375em;
-  font-weight: 100;
-  color: #58585b;
-  line-height: 1.2em;
+.emotion-11 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-16 {
-  text-align: center;
+.emotion-11 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-16 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
+.emotion-11 .sel-c {
+  display: block;
+}
 
-  .emotion-16 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
+.emotion-19 {
+  margin-bottom: 3em;
+  background: none;
+}
 
-  .emotion-16 > div.ta-r > button {
+.emotion-19 label {
+  margin-top: 0em;
+}
+
+.emotion-19 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-19 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-19 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-19 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 {
     margin-left: auto;
+    margin-right: auto;
   }
+}
 
-  .emotion-16 .lnk {
-    padding-left: 0;
+.emotion-19 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-19 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 }
 
-.emotion-15 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
+.emotion-19 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-10 {
-  border: none;
-  padding: 0;
-  margin: 0;
+.emotion-19 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-.emotion-10 legend {
-  padding-left: 0;
-  font-size: 120%;
+.emotion-19 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-transition: opacity 0.1s;
-  transition: opacity 0.1s;
+.emotion-19 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-9 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
+.emotion-14 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
+}
+
+.emotion-14 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-14 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-14 .notice .tool-tip__wrapper {
+  display: inline-block;
 }
 
-.emotion-9 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+.emotion-16 {
+  margin-bottom: 2.25em;
 }
 
-.emotion-9 input {
-  -moz-appearance: textfield;
+.emotion-24 {
+  margin-bottom: 3em;
+  background: none;
 }
 
-.emotion-9 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
+.emotion-24 label {
+  margin-top: 0em;
 }
 
-.emotion-9 input::-ms-clear {
-  display: none;
+.emotion-24 .spacingTop {
+  margin-top: 1.5em;
 }
 
-.emotion-9 label {
-  margin-top: 0.5rem;
+.emotion-24 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
 }
 
-.emotion-9.disabled {
-  opacity: 0.4;
+.emotion-24 label.inputHeading .t--req {
+  margin-left: 0.5rem;
 }
 
-.emotion-9.disabled * {
-  cursor: not-allowed;
+.emotion-24 .t--opt {
+  color: #58585b !important;
 }
 
-.emotion-2 {
-  padding-right: 0;
+.emotion-23 {
+  margin-bottom: 2.5em;
 }
 
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
+@media screen and (min-width:768px) {
+  .emotion-23 {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.emotion-3 {
-  display: grid;
-  margin: auto;
-  margin-top: 0.75rem;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
+.emotion-23 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-3 .progressbar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
+.emotion-23 > div {
+  text-align: left;
 }
 
-.emotion-3 .progressbar .nav {
-  display: table;
-  table-layout: fixed;
-  text-align: center;
-  line-height: normal;
-  font-style: normal;
-  font-weight: bold;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  color: '#58585B';
+@media screen and (min-width:768px) {
+  .emotion-23 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
 }
 
-.emotion-3 .progressbar .nav a {
-  display: table-cell;
-  border-width: 1px;
-  border-color: black;
-  border-style: solid;
-  border-left-width: 0;
-  padding: 0.85em 0.5em;
-  color: black;
-  background: #fff;
-  width: 2%;
-  font-size: 0.85em;
+.emotion-23 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-3 .progressbar .nav a:last-child {
-  grid-column-start: 2;
+.emotion-23 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-.emotion-3 .progressbar .nav a:first-child {
-  border-left-width: 1px;
+.emotion-23 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed.current {
-  cursor: pointer;
-  color: #fff;
-  background: #1871bd;
+.emotion-23 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted {
-  background: #C8C8C8;
+.emotion-33 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused.current {
-  color: #000;
-  cursor: pointer;
-  background: #f2f2f2;
+@media screen and (min-width:768px) {
+  .emotion-33 {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
-.emotion-3 .progressbar .nav a.completed.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  color: #000;
-  cursor: pointer;
-  background: #b0d9ff;
+.emotion-33 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover,
-.emotion-3 .progressbar .nav a.completed.focused.done.current {
-  color: #000;
-  cursor: default;
-  background: #f2f2f2;
+.emotion-33 > div {
+  text-align: left;
 }
 
-.emotion-3 .progressbar .nav a.completed.current {
-  color: #000;
-  background: #f2f2f2;
+@media screen and (min-width:768px) {
+  .emotion-33 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
 }
 
-.emotion-3 .progressbar .progress-text {
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  font-style: italic;
-  font-size: 1rem;
-  margin-top: 0.5rem;
+.emotion-33 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-3 .progressbar .progress-text .mobile {
-  display: none;
+.emotion-33 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-@media screen and (max-width:540px) {
-  .emotion-3 {
-    max-width: 25.875em;
-  }
-
-  .emotion-3 .progressbar .nav a {
-    overflow: hidden;
-    min-width: 10px;
-    padding: 0.5em 0;
-    text-indent: -500px;
-    line-height: 0;
-  }
+.emotion-33 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
 
-  .emotion-3 .progressbar .progress-text .mobile {
-    display: inline-block;
-  }
+.emotion-33 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-@media (min-width:541px) and (max-width:1024px) {
-  .emotion-3 .progressbar .nav a {
-    padding: 0.85em 0;
-    font-size: 0.55rem;
-  }
+.emotion-36 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
 }
 
-.emotion-17 {
-  padding: 0px;
+.emotion-36 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
 }
 
-.css-1d92czb .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-36 .icon::before {
+  content: '?';
 }
 
-.css-1ndjemn .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-36 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
 }
 
-.css-1btkjiq .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-36 .tt--info::before {
+  content: 'i';
 }
 
-.css-lbsctu .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-36 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
 }
 
-.css-3y8lfr .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-36 .icon:hover + .msg {
+  visibility: visible;
 }
 
-.css-sifr7p .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-45 {
+  margin-bottom: 2.5em;
 }
 
-.css-zx7u86 .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-45 h2 {
+  font-size: 1.5rem;
 }
 
-.css-17tc7bx .emotion-5:after {
-  content: '&nbsp;';
-  opacity: 0;
+.emotion-45 h4 {
+  font-size: 1.25rem;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 {
+  .emotion-45 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-11 > div {
+.emotion-45 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-45 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 > div {
+  .emotion-45 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -84414,17 +75686,17 @@ Array [
   }
 }
 
-.emotion-11 > .RADIOGROUP label {
+.emotion-45 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-11 h3 {
+.emotion-45 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-11 .notice {
+.emotion-45 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -84434,80 +75706,32 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-11 .emotion-5:after {
+.emotion-45 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-4 {
-  color: #091f2f;
-  font-weight: 700;
-  font-size: 1.125em;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  border-bottom: 4px solid #091f2f;
-  padding-bottom: 0.25em;
-}
-
-.emotion-12 h2 {
-  font-size: 1.5rem;
-}
-
-.emotion-12 h4 {
-  font-size: 1.25rem;
+.emotion-43 {
+  margin-top: 1em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-7 {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
+  .emotion-43 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-7 > div {
-  text-align: left;
-}
-
-@media screen and (min-width:768px) {
-  .emotion-7 > div {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .emotion-7 > div {
-    width: 50%;
-  }
-
-  .emotion-7 .txt-f {
-    width: 90%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .emotion-7 {
-    margin-left: auto;
-    margin-right: auto;
-  }
+.emotion-43 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-7 > div {
+.emotion-43 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-7 > div {
+  .emotion-43 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -84515,17 +75739,17 @@ Array [
   }
 }
 
-.emotion-7 > .RADIOGROUP label {
+.emotion-43 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-7 h3 {
+.emotion-43 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-7 .notice {
+.emotion-43 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -84535,49 +75759,11 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-7 .emotion-5:after {
+.emotion-43 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-.emotion-6 .contact-fields {
-  width: calc(50% - 10px);
-  margin-bottom: 10px;
-}
-
-.emotion-6 .contact-fields label:first-child {
-  margin-top: 1em;
-}
-
-.emotion-6 .contact-fields input.txt-f {
-  width: 100%;
-}
-
-.emotion-8 {
-  padding-bottom: 0.25rem;
-  marginBottom: 0;
-  font-weight: 700;
-  color: #091f2f;
-  border-bottom: 4px solid #091f2f;
-  text-transform: uppercase;
-  font-family: Montserrat,Arial,sans-serif;
-  font-size: 1.125rem !important;
-}
-
 <div
     className="mn--full-ie"
   >
@@ -84782,7 +75968,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 1"
-                  className="completed"
+                  className="completed focused current"
                   onClick={[Function]}
                   title="Person 1"
                 >
@@ -84793,7 +75979,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="completed"
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Person 2"
                 >
@@ -84804,7 +75990,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="completed focused current"
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -84840,14 +76026,14 @@ Array [
                 className="progress-text"
               >
                 <span>
-                  Step 4 of 6
+                  Step 2 of 6
                 </span>
                 <span
                   className="mobile"
                 >
                   : 
                    
-                  Contact Info
+                  Person 1
                 </span>
               </div>
             </div>
@@ -84856,349 +76042,3639 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-17"
+              className="b-c b-c--nbp emotion-51"
             >
               <div
-                className="emotion-14"
+                className="emotion-48"
               >
                 <fieldset
-                  className=" emotion-13"
+                  className=" emotion-47"
                 >
                   <legend>
                     <h2
                       className="emotion-4"
                     >
-                      Contact Info
-                    </h2>
-                  </legend>
+                      Person 
+                      1
+                    </h2>
+                  </legend>
+                  <div
+                    className="emotion-13"
+                  >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Personal Information
+                      <div
+                        className="notice"
+                      >
+                        Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
+                      </div>
+                    </h1>
+                    <span />
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2048906072"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          First Name
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-2048906072"
+                        maxLength={100}
+                        name="partnerA_firstName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2852212527"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Middle Name
+                        </span>
+                      </label>
+                      <label
+                        className="notice emotion-6"
+                      >
+                        Please enter your middle name if you have one. You cannot list a new middle name.
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-2852212527"
+                        maxLength={50}
+                        name="partnerA_middleName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-1103291528"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Last Name
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-1103291528"
+                        maxLength={100}
+                        name="partnerA_lastName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          aria-labelledby="partnerA_useSurname-groupLabel"
+                          className="radio-group__label"
+                          role="group"
+                        >
+                          <div
+                            className="txt-l"
+                            id="partnerA_useSurname-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Would you like to change your last name?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+                              </div>
+                            </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-11"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-2202529938"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Suffix
+                          </span>
+                          <span
+                            className="t--req t--opt"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Optional
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-6"
+                        >
+                          Please select your suffix if you have one.
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-2202529938"
+                            name="partnerA_suffix"
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="I"
+                            >
+                              I
+                            </option>
+                            <option
+                              value="II"
+                            >
+                              II
+                            </option>
+                            <option
+                              value="III"
+                            >
+                              III
+                            </option>
+                            <option
+                              value="IV"
+                            >
+                              IV
+                            </option>
+                            <option
+                              value="V"
+                            >
+                              V
+                            </option>
+                            <option
+                              value="VI"
+                            >
+                              VI
+                            </option>
+                            <option
+                              value="Jr."
+                            >
+                              Jr.
+                            </option>
+                            <option
+                              value="Sr."
+                            >
+                              Sr.
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2786084594"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Occupation
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                          <span
+                            className="tool-tip__wrapper emotion-7"
+                          >
+                            <div
+                              className="icon"
+                            />
+                            <div
+                              className="msg"
+                            >
+                              This information is collected as required by the Massachusetts State Marriage Intention Form.
+                            </div>
+                          </span>
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-2786084594"
+                        maxLength={100}
+                        name="partnerA_occupation"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-19"
+                  >
+                    <h1
+                      className="emotion-14"
+                    >
+                      Date and Place of Birth
+                    </h1>
+                    <span />
+                    <fieldset
+                      className="emotion-17"
+                    >
+                      <div
+                        className="emotion-16"
+                      >
+                        <legend
+                          style={
+                            Object {
+                              "display": "none",
+                              "width": "100%",
+                            }
+                          }
+                        >
+                          Person A Date of Birth
+                        </legend>
+                        <div
+                          className=" emotion-15"
+                        >
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-month"
+                            >
+                              Month
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-month"
+                              max="12"
+                              maxLength={2}
+                              min="1"
+                              name="month"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="MM"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-day"
+                            >
+                              Day
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-day"
+                              max="31"
+                              maxLength={2}
+                              min="1"
+                              name="day"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="DD"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-year"
+                            >
+                              Year
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-year"
+                              max={2024}
+                              maxLength={4}
+                              min="1000"
+                              name="year"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="YYYY"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </fieldset>
+                    <div
+                      className="emotion-11"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-1817836307"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Birthplace Country
+                          </span>
+                          <span
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Required
+                          </span>
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-1817836307"
+                            name="partnerA_birthCountry"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="USA"
+                            >
+                              United States of America
+                            </option>
+                            <option
+                              value="VIR"
+                            >
+                              United States Virgin Islands
+                            </option>
+                            <option
+                              value="AFG"
+                            >
+                              Afghanistan
+                            </option>
+                            <option
+                              value="ALA"
+                            >
+                              Åland Islands
+                            </option>
+                            <option
+                              value="ALB"
+                            >
+                              Albania
+                            </option>
+                            <option
+                              value="DZA"
+                            >
+                              Algeria
+                            </option>
+                            <option
+                              value="ASM"
+                            >
+                              American Samoa
+                            </option>
+                            <option
+                              value="AND"
+                            >
+                              Andorra
+                            </option>
+                            <option
+                              value="AGO"
+                            >
+                              Angola
+                            </option>
+                            <option
+                              value="AIA"
+                            >
+                              Anguilla
+                            </option>
+                            <option
+                              value="ATG"
+                            >
+                              Antigua and Barbuda
+                            </option>
+                            <option
+                              value="ARG"
+                            >
+                              Argentina
+                            </option>
+                            <option
+                              value="ARM"
+                            >
+                              Armenia
+                            </option>
+                            <option
+                              value="ABW"
+                            >
+                              Aruba
+                            </option>
+                            <option
+                              value="AUS"
+                            >
+                              Australia
+                            </option>
+                            <option
+                              value="AUT"
+                            >
+                              Austria
+                            </option>
+                            <option
+                              value="AZE"
+                            >
+                              Azerbaijan
+                            </option>
+                            <option
+                              value="BHS"
+                            >
+                              Bahamas
+                            </option>
+                            <option
+                              value="BHR"
+                            >
+                              Bahrain
+                            </option>
+                            <option
+                              value="BGD"
+                            >
+                              Bangladesh
+                            </option>
+                            <option
+                              value="BRB"
+                            >
+                              Barbados
+                            </option>
+                            <option
+                              value="BLR"
+                            >
+                              Belarus
+                            </option>
+                            <option
+                              value="BEL"
+                            >
+                              Belgium
+                            </option>
+                            <option
+                              value="BLZ"
+                            >
+                              Belize
+                            </option>
+                            <option
+                              value="BEN"
+                            >
+                              Benin
+                            </option>
+                            <option
+                              value="BMU"
+                            >
+                              Bermuda
+                            </option>
+                            <option
+                              value="BTN"
+                            >
+                              Bhutan
+                            </option>
+                            <option
+                              value="BOL"
+                            >
+                              Bolivia (Plurinational State of)
+                            </option>
+                            <option
+                              value="BES"
+                            >
+                              Bonaire, Saint Eustatius and Saba
+                            </option>
+                            <option
+                              value="BIH"
+                            >
+                              Bosnia and Herzegovina
+                            </option>
+                            <option
+                              value="BWA"
+                            >
+                              Botswana
+                            </option>
+                            <option
+                              value="BRA"
+                            >
+                              Brazil
+                            </option>
+                            <option
+                              value="VGB"
+                            >
+                              British Virgin Islands
+                            </option>
+                            <option
+                              value="BRN"
+                            >
+                              Brunei Darussalam
+                            </option>
+                            <option
+                              value="BGR"
+                            >
+                              Bulgaria
+                            </option>
+                            <option
+                              value="BFA"
+                            >
+                              Burkina Faso
+                            </option>
+                            <option
+                              value="BDI"
+                            >
+                              Burundi
+                            </option>
+                            <option
+                              value="CPV"
+                            >
+                              Cabo Verde
+                            </option>
+                            <option
+                              value="KHM"
+                            >
+                              Cambodia
+                            </option>
+                            <option
+                              value="CMR"
+                            >
+                              Cameroon
+                            </option>
+                            <option
+                              value="CAN"
+                            >
+                              Canada
+                            </option>
+                            <option
+                              value="CYM"
+                            >
+                              Cayman Islands
+                            </option>
+                            <option
+                              value="CAF"
+                            >
+                              Central African Republic
+                            </option>
+                            <option
+                              value="TCD"
+                            >
+                              Chad
+                            </option>
+                            <option
+                              value="CHL"
+                            >
+                              Chile
+                            </option>
+                            <option
+                              value="CHN"
+                            >
+                              China
+                            </option>
+                            <option
+                              value="HKG"
+                            >
+                              China, Hong Kong Special Administrative Region
+                            </option>
+                            <option
+                              value="MAC"
+                            >
+                              China, Macao Special Administrative Region
+                            </option>
+                            <option
+                              value="COL"
+                            >
+                              Colombia
+                            </option>
+                            <option
+                              value="COM"
+                            >
+                              Comoros
+                            </option>
+                            <option
+                              value="COG"
+                            >
+                              Congo
+                            </option>
+                            <option
+                              value="COK"
+                            >
+                              Cook Islands
+                            </option>
+                            <option
+                              value="CRI"
+                            >
+                              Costa Rica
+                            </option>
+                            <option
+                              value="CIV"
+                            >
+                              Côte d'Ivoire
+                            </option>
+                            <option
+                              value="HRV"
+                            >
+                              Croatia
+                            </option>
+                            <option
+                              value="CUB"
+                            >
+                              Cuba
+                            </option>
+                            <option
+                              value="CUW"
+                            >
+                              Curaçao
+                            </option>
+                            <option
+                              value="CYP"
+                            >
+                              Cyprus
+                            </option>
+                            <option
+                              value="CZE"
+                            >
+                              Czech Republic
+                            </option>
+                            <option
+                              value="PRK"
+                            >
+                              Democratic People's Republic of Korea
+                            </option>
+                            <option
+                              value="COD"
+                            >
+                              Democratic Republic of the Congo
+                            </option>
+                            <option
+                              value="DNK"
+                            >
+                              Denmark
+                            </option>
+                            <option
+                              value="DJI"
+                            >
+                              Djibouti
+                            </option>
+                            <option
+                              value="DMA"
+                            >
+                              Dominica
+                            </option>
+                            <option
+                              value="DOM"
+                            >
+                              Dominican Republic
+                            </option>
+                            <option
+                              value="ECU"
+                            >
+                              Ecuador
+                            </option>
+                            <option
+                              value="EGY"
+                            >
+                              Egypt
+                            </option>
+                            <option
+                              value="SLV"
+                            >
+                              El Salvador
+                            </option>
+                            <option
+                              value="GNQ"
+                            >
+                              Equatorial Guinea
+                            </option>
+                            <option
+                              value="ERI"
+                            >
+                              Eritrea
+                            </option>
+                            <option
+                              value="EST"
+                            >
+                              Estonia
+                            </option>
+                            <option
+                              value="ETH"
+                            >
+                              Ethiopia
+                            </option>
+                            <option
+                              value="FRO"
+                            >
+                              Faeroe Islands
+                            </option>
+                            <option
+                              value="FLK"
+                            >
+                              Falkland Islands (Malvinas)
+                            </option>
+                            <option
+                              value="FJI"
+                            >
+                              Fiji
+                            </option>
+                            <option
+                              value="FIN"
+                            >
+                              Finland
+                            </option>
+                            <option
+                              value="FRA"
+                            >
+                              France
+                            </option>
+                            <option
+                              value="GUF"
+                            >
+                              French Guiana
+                            </option>
+                            <option
+                              value="PYF"
+                            >
+                              French Polynesia
+                            </option>
+                            <option
+                              value="GAB"
+                            >
+                              Gabon
+                            </option>
+                            <option
+                              value="GMB"
+                            >
+                              Gambia
+                            </option>
+                            <option
+                              value="GEO"
+                            >
+                              Georgia
+                            </option>
+                            <option
+                              value="DEU"
+                            >
+                              Germany
+                            </option>
+                            <option
+                              value="GHA"
+                            >
+                              Ghana
+                            </option>
+                            <option
+                              value="GIB"
+                            >
+                              Gibraltar
+                            </option>
+                            <option
+                              value="GRC"
+                            >
+                              Greece
+                            </option>
+                            <option
+                              value="GRL"
+                            >
+                              Greenland
+                            </option>
+                            <option
+                              value="GRD"
+                            >
+                              Grenada
+                            </option>
+                            <option
+                              value="GLP"
+                            >
+                              Guadeloupe
+                            </option>
+                            <option
+                              value="GUM"
+                            >
+                              Guam
+                            </option>
+                            <option
+                              value="GTM"
+                            >
+                              Guatemala
+                            </option>
+                            <option
+                              value="GGY"
+                            >
+                              Guernsey
+                            </option>
+                            <option
+                              value="GIN"
+                            >
+                              Guinea
+                            </option>
+                            <option
+                              value="GNB"
+                            >
+                              Guinea-Bissau
+                            </option>
+                            <option
+                              value="GUY"
+                            >
+                              Guyana
+                            </option>
+                            <option
+                              value="HTI"
+                            >
+                              Haiti
+                            </option>
+                            <option
+                              value="VAT"
+                            >
+                              Holy See
+                            </option>
+                            <option
+                              value="HND"
+                            >
+                              Honduras
+                            </option>
+                            <option
+                              value="HUN"
+                            >
+                              Hungary
+                            </option>
+                            <option
+                              value="ISL"
+                            >
+                              Iceland
+                            </option>
+                            <option
+                              value="IND"
+                            >
+                              India
+                            </option>
+                            <option
+                              value="IDN"
+                            >
+                              Indonesia
+                            </option>
+                            <option
+                              value="IRN"
+                            >
+                              Iran (Islamic Republic of)
+                            </option>
+                            <option
+                              value="IRQ"
+                            >
+                              Iraq
+                            </option>
+                            <option
+                              value="IRL"
+                            >
+                              Ireland
+                            </option>
+                            <option
+                              value="IMN"
+                            >
+                              Isle of Man
+                            </option>
+                            <option
+                              value="ISR"
+                            >
+                              Israel
+                            </option>
+                            <option
+                              value="ITA"
+                            >
+                              Italy
+                            </option>
+                            <option
+                              value="JAM"
+                            >
+                              Jamaica
+                            </option>
+                            <option
+                              value="JPN"
+                            >
+                              Japan
+                            </option>
+                            <option
+                              value="JEY"
+                            >
+                              Jersey
+                            </option>
+                            <option
+                              value="JOR"
+                            >
+                              Jordan
+                            </option>
+                            <option
+                              value="KAZ"
+                            >
+                              Kazakhstan
+                            </option>
+                            <option
+                              value="KEN"
+                            >
+                              Kenya
+                            </option>
+                            <option
+                              value="KIR"
+                            >
+                              Kiribati
+                            </option>
+                            <option
+                              value="KWT"
+                            >
+                              Kuwait
+                            </option>
+                            <option
+                              value="KGZ"
+                            >
+                              Kyrgyzstan
+                            </option>
+                            <option
+                              value="LAO"
+                            >
+                              Lao People's Democratic Republic
+                            </option>
+                            <option
+                              value="LVA"
+                            >
+                              Latvia
+                            </option>
+                            <option
+                              value="LBN"
+                            >
+                              Lebanon
+                            </option>
+                            <option
+                              value="LSO"
+                            >
+                              Lesotho
+                            </option>
+                            <option
+                              value="LBR"
+                            >
+                              Liberia
+                            </option>
+                            <option
+                              value="LBY"
+                            >
+                              Libya
+                            </option>
+                            <option
+                              value="LIE"
+                            >
+                              Liechtenstein
+                            </option>
+                            <option
+                              value="LTU"
+                            >
+                              Lithuania
+                            </option>
+                            <option
+                              value="LUX"
+                            >
+                              Luxembourg
+                            </option>
+                            <option
+                              value="MDG"
+                            >
+                              Madagascar
+                            </option>
+                            <option
+                              value="MWI"
+                            >
+                              Malawi
+                            </option>
+                            <option
+                              value="MYS"
+                            >
+                              Malaysia
+                            </option>
+                            <option
+                              value="MDV"
+                            >
+                              Maldives
+                            </option>
+                            <option
+                              value="MLI"
+                            >
+                              Mali
+                            </option>
+                            <option
+                              value="MLT"
+                            >
+                              Malta
+                            </option>
+                            <option
+                              value="MHL"
+                            >
+                              Marshall Islands
+                            </option>
+                            <option
+                              value="MTQ"
+                            >
+                              Martinique
+                            </option>
+                            <option
+                              value="MRT"
+                            >
+                              Mauritania
+                            </option>
+                            <option
+                              value="MUS"
+                            >
+                              Mauritius
+                            </option>
+                            <option
+                              value="MYT"
+                            >
+                              Mayotte
+                            </option>
+                            <option
+                              value="MEX"
+                            >
+                              Mexico
+                            </option>
+                            <option
+                              value="FSM"
+                            >
+                              Micronesia (Federated States of)
+                            </option>
+                            <option
+                              value="MCO"
+                            >
+                              Monaco
+                            </option>
+                            <option
+                              value="MNG"
+                            >
+                              Mongolia
+                            </option>
+                            <option
+                              value="MNE"
+                            >
+                              Montenegro
+                            </option>
+                            <option
+                              value="MSR"
+                            >
+                              Montserrat
+                            </option>
+                            <option
+                              value="MAR"
+                            >
+                              Morocco
+                            </option>
+                            <option
+                              value="MOZ"
+                            >
+                              Mozambique
+                            </option>
+                            <option
+                              value="MMR"
+                            >
+                              Myanmar
+                            </option>
+                            <option
+                              value="NAM"
+                            >
+                              Namibia
+                            </option>
+                            <option
+                              value="NRU"
+                            >
+                              Nauru
+                            </option>
+                            <option
+                              value="NPL"
+                            >
+                              Nepal
+                            </option>
+                            <option
+                              value="NLD"
+                            >
+                              Netherlands
+                            </option>
+                            <option
+                              value="NCL"
+                            >
+                              New Caledonia
+                            </option>
+                            <option
+                              value="NZL"
+                            >
+                              New Zealand
+                            </option>
+                            <option
+                              value="NIC"
+                            >
+                              Nicaragua
+                            </option>
+                            <option
+                              value="NER"
+                            >
+                              Niger
+                            </option>
+                            <option
+                              value="NGA"
+                            >
+                              Nigeria
+                            </option>
+                            <option
+                              value="NIU"
+                            >
+                              Niue
+                            </option>
+                            <option
+                              value="NFK"
+                            >
+                              Norfolk Island
+                            </option>
+                            <option
+                              value="MNP"
+                            >
+                              Northern Mariana Islands
+                            </option>
+                            <option
+                              value="NOR"
+                            >
+                              Norway
+                            </option>
+                            <option
+                              value="OMN"
+                            >
+                              Oman
+                            </option>
+                            <option
+                              value="PAK"
+                            >
+                              Pakistan
+                            </option>
+                            <option
+                              value="PLW"
+                            >
+                              Palau
+                            </option>
+                            <option
+                              value="PAN"
+                            >
+                              Panama
+                            </option>
+                            <option
+                              value="PNG"
+                            >
+                              Papua New Guinea
+                            </option>
+                            <option
+                              value="PRY"
+                            >
+                              Paraguay
+                            </option>
+                            <option
+                              value="PER"
+                            >
+                              Peru
+                            </option>
+                            <option
+                              value="PHL"
+                            >
+                              Philippines
+                            </option>
+                            <option
+                              value="PCN"
+                            >
+                              Pitcairn
+                            </option>
+                            <option
+                              value="POL"
+                            >
+                              Poland
+                            </option>
+                            <option
+                              value="PRT"
+                            >
+                              Portugal
+                            </option>
+                            <option
+                              value="PRI"
+                            >
+                              Puerto Rico
+                            </option>
+                            <option
+                              value="QAT"
+                            >
+                              Qatar
+                            </option>
+                            <option
+                              value="KOR"
+                            >
+                              Republic of Korea
+                            </option>
+                            <option
+                              value="MDA"
+                            >
+                              Republic of Moldova
+                            </option>
+                            <option
+                              value="REU"
+                            >
+                              Réunion
+                            </option>
+                            <option
+                              value="ROU"
+                            >
+                              Romania
+                            </option>
+                            <option
+                              value="RUS"
+                            >
+                              Russian Federation
+                            </option>
+                            <option
+                              value="RWA"
+                            >
+                              Rwanda
+                            </option>
+                            <option
+                              value="BLM"
+                            >
+                              Saint-Barthélemy
+                            </option>
+                            <option
+                              value="SHN"
+                            >
+                              Saint Helena
+                            </option>
+                            <option
+                              value="KNA"
+                            >
+                              Saint Kitts and Nevis
+                            </option>
+                            <option
+                              value="LCA"
+                            >
+                              Saint Lucia
+                            </option>
+                            <option
+                              value="MAF"
+                            >
+                              Saint-Martin (French part)
+                            </option>
+                            <option
+                              value="SPM"
+                            >
+                              Saint Pierre and Miquelon
+                            </option>
+                            <option
+                              value="VCT"
+                            >
+                              Saint Vincent and the Grenadines
+                            </option>
+                            <option
+                              value="WSM"
+                            >
+                              Samoa
+                            </option>
+                            <option
+                              value="SMR"
+                            >
+                              San Marino
+                            </option>
+                            <option
+                              value="STP"
+                            >
+                              Sao Tome and Principe
+                            </option>
+                            <option
+                              value="SAU"
+                            >
+                              Saudi Arabia
+                            </option>
+                            <option
+                              value="SEN"
+                            >
+                              Senegal
+                            </option>
+                            <option
+                              value="SRB"
+                            >
+                              Serbia
+                            </option>
+                            <option
+                              value="SYC"
+                            >
+                              Seychelles
+                            </option>
+                            <option
+                              value="SLE"
+                            >
+                              Sierra Leone
+                            </option>
+                            <option
+                              value="SGP"
+                            >
+                              Singapore
+                            </option>
+                            <option
+                              value="SXM"
+                            >
+                              Sint Maarten (Dutch part)
+                            </option>
+                            <option
+                              value="SVK"
+                            >
+                              Slovakia
+                            </option>
+                            <option
+                              value="SVN"
+                            >
+                              Slovenia
+                            </option>
+                            <option
+                              value="SLB"
+                            >
+                              Solomon Islands
+                            </option>
+                            <option
+                              value="SOM"
+                            >
+                              Somalia
+                            </option>
+                            <option
+                              value="ZAF"
+                            >
+                              South Africa
+                            </option>
+                            <option
+                              value="SSD"
+                            >
+                              South Sudan
+                            </option>
+                            <option
+                              value="ESP"
+                            >
+                              Spain
+                            </option>
+                            <option
+                              value="LKA"
+                            >
+                              Sri Lanka
+                            </option>
+                            <option
+                              value="PSE"
+                            >
+                              State of Palestine
+                            </option>
+                            <option
+                              value="SDN"
+                            >
+                              Sudan
+                            </option>
+                            <option
+                              value="SUR"
+                            >
+                              Suriname
+                            </option>
+                            <option
+                              value="SJM"
+                            >
+                              Svalbard and Jan Mayen Islands
+                            </option>
+                            <option
+                              value="SWZ"
+                            >
+                              Swaziland
+                            </option>
+                            <option
+                              value="SWE"
+                            >
+                              Sweden
+                            </option>
+                            <option
+                              value="CHE"
+                            >
+                              Switzerland
+                            </option>
+                            <option
+                              value="SYR"
+                            >
+                              Syrian Arab Republic
+                            </option>
+                            <option
+                              value="TWAN"
+                            >
+                              Taiwan
+                            </option>
+                            <option
+                              value="TJK"
+                            >
+                              Tajikistan
+                            </option>
+                            <option
+                              value="THA"
+                            >
+                              Thailand
+                            </option>
+                            <option
+                              value="MKD"
+                            >
+                              The former Yugoslav Republic of Macedonia
+                            </option>
+                            <option
+                              value="TLS"
+                            >
+                              Timor-Leste
+                            </option>
+                            <option
+                              value="TGO"
+                            >
+                              Togo
+                            </option>
+                            <option
+                              value="TKL"
+                            >
+                              Tokelau
+                            </option>
+                            <option
+                              value="TON"
+                            >
+                              Tonga
+                            </option>
+                            <option
+                              value="TTO"
+                            >
+                              Trinidad and Tobago
+                            </option>
+                            <option
+                              value="TUN"
+                            >
+                              Tunisia
+                            </option>
+                            <option
+                              value="TUR"
+                            >
+                              Turkey
+                            </option>
+                            <option
+                              value="TKM"
+                            >
+                              Turkmenistan
+                            </option>
+                            <option
+                              value="TCA"
+                            >
+                              Turks and Caicos Islands
+                            </option>
+                            <option
+                              value="TUV"
+                            >
+                              Tuvalu
+                            </option>
+                            <option
+                              value="UGA"
+                            >
+                              Uganda
+                            </option>
+                            <option
+                              value="UKR"
+                            >
+                              Ukraine
+                            </option>
+                            <option
+                              value="ARE"
+                            >
+                              United Arab Emirates
+                            </option>
+                            <option
+                              value="GBR"
+                            >
+                              United Kingdom of Great Britain and Northern Ireland
+                            </option>
+                            <option
+                              value="TZA"
+                            >
+                              United Republic of Tanzania
+                            </option>
+                            <option
+                              value="URY"
+                            >
+                              Uruguay
+                            </option>
+                            <option
+                              value="UZB"
+                            >
+                              Uzbekistan
+                            </option>
+                            <option
+                              value="VUT"
+                            >
+                              Vanuatu
+                            </option>
+                            <option
+                              value="VEN"
+                            >
+                              Venezuela (Bolivarian Republic of)
+                            </option>
+                            <option
+                              value="VNM"
+                            >
+                              Vietnam
+                            </option>
+                            <option
+                              value="WLF"
+                            >
+                              Wallis and Futuna Islands
+                            </option>
+                            <option
+                              value="ESH"
+                            >
+                              Western Sahara
+                            </option>
+                            <option
+                              value="YEM"
+                            >
+                              Yemen
+                            </option>
+                            <option
+                              value="ZMB"
+                            >
+                              Zambia
+                            </option>
+                            <option
+                              value="ZWE"
+                            >
+                              Zimbabwe
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    
+                  </div>
                   <div
-                    className="desc"
+                    className="emotion-24"
                   >
-                    Please share the best email and phone number to get in contact with you. This will be used to contact you about your appointment.
+                    <h1
+                      className="emotion-5"
+                    >
+                      Residence
+                      <div
+                        className="notice"
+                      >
+                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+                      </div>
+                    </h1>
+                    <div
+                      className="emotion-23"
+                    >
+                      <div
+                        className="emotion-11"
+                      >
+                        <span />
+                        <div>
+                          <label
+                            className="txt-l "
+                            htmlFor="select-3475791712"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "marginRight": "0.5em",
+                                }
+                              }
+                            >
+                              Country of Residence
+                            </span>
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Required
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+                                </div>
+                              </span>
+                            </span>
+                          </label>
+                          <div
+                            className="sel-c  "
+                          >
+                            <select
+                              aria-label=""
+                              className="sel-f  "
+                              id="select-3475791712"
+                              name="partnerA_residenceCountry"
+                              onChange={[Function]}
+                              value=""
+                            >
+                              <option />
+                              <option
+                                value="USA"
+                              >
+                                United States of America
+                              </option>
+                              <option
+                                value="VIR"
+                              >
+                                United States Virgin Islands
+                              </option>
+                              <option
+                                value="AFG"
+                              >
+                                Afghanistan
+                              </option>
+                              <option
+                                value="ALA"
+                              >
+                                Åland Islands
+                              </option>
+                              <option
+                                value="ALB"
+                              >
+                                Albania
+                              </option>
+                              <option
+                                value="DZA"
+                              >
+                                Algeria
+                              </option>
+                              <option
+                                value="ASM"
+                              >
+                                American Samoa
+                              </option>
+                              <option
+                                value="AND"
+                              >
+                                Andorra
+                              </option>
+                              <option
+                                value="AGO"
+                              >
+                                Angola
+                              </option>
+                              <option
+                                value="AIA"
+                              >
+                                Anguilla
+                              </option>
+                              <option
+                                value="ATG"
+                              >
+                                Antigua and Barbuda
+                              </option>
+                              <option
+                                value="ARG"
+                              >
+                                Argentina
+                              </option>
+                              <option
+                                value="ARM"
+                              >
+                                Armenia
+                              </option>
+                              <option
+                                value="ABW"
+                              >
+                                Aruba
+                              </option>
+                              <option
+                                value="AUS"
+                              >
+                                Australia
+                              </option>
+                              <option
+                                value="AUT"
+                              >
+                                Austria
+                              </option>
+                              <option
+                                value="AZE"
+                              >
+                                Azerbaijan
+                              </option>
+                              <option
+                                value="BHS"
+                              >
+                                Bahamas
+                              </option>
+                              <option
+                                value="BHR"
+                              >
+                                Bahrain
+                              </option>
+                              <option
+                                value="BGD"
+                              >
+                                Bangladesh
+                              </option>
+                              <option
+                                value="BRB"
+                              >
+                                Barbados
+                              </option>
+                              <option
+                                value="BLR"
+                              >
+                                Belarus
+                              </option>
+                              <option
+                                value="BEL"
+                              >
+                                Belgium
+                              </option>
+                              <option
+                                value="BLZ"
+                              >
+                                Belize
+                              </option>
+                              <option
+                                value="BEN"
+                              >
+                                Benin
+                              </option>
+                              <option
+                                value="BMU"
+                              >
+                                Bermuda
+                              </option>
+                              <option
+                                value="BTN"
+                              >
+                                Bhutan
+                              </option>
+                              <option
+                                value="BOL"
+                              >
+                                Bolivia (Plurinational State of)
+                              </option>
+                              <option
+                                value="BES"
+                              >
+                                Bonaire, Saint Eustatius and Saba
+                              </option>
+                              <option
+                                value="BIH"
+                              >
+                                Bosnia and Herzegovina
+                              </option>
+                              <option
+                                value="BWA"
+                              >
+                                Botswana
+                              </option>
+                              <option
+                                value="BRA"
+                              >
+                                Brazil
+                              </option>
+                              <option
+                                value="VGB"
+                              >
+                                British Virgin Islands
+                              </option>
+                              <option
+                                value="BRN"
+                              >
+                                Brunei Darussalam
+                              </option>
+                              <option
+                                value="BGR"
+                              >
+                                Bulgaria
+                              </option>
+                              <option
+                                value="BFA"
+                              >
+                                Burkina Faso
+                              </option>
+                              <option
+                                value="BDI"
+                              >
+                                Burundi
+                              </option>
+                              <option
+                                value="CPV"
+                              >
+                                Cabo Verde
+                              </option>
+                              <option
+                                value="KHM"
+                              >
+                                Cambodia
+                              </option>
+                              <option
+                                value="CMR"
+                              >
+                                Cameroon
+                              </option>
+                              <option
+                                value="CAN"
+                              >
+                                Canada
+                              </option>
+                              <option
+                                value="CYM"
+                              >
+                                Cayman Islands
+                              </option>
+                              <option
+                                value="CAF"
+                              >
+                                Central African Republic
+                              </option>
+                              <option
+                                value="TCD"
+                              >
+                                Chad
+                              </option>
+                              <option
+                                value="CHL"
+                              >
+                                Chile
+                              </option>
+                              <option
+                                value="CHN"
+                              >
+                                China
+                              </option>
+                              <option
+                                value="HKG"
+                              >
+                                China, Hong Kong Special Administrative Region
+                              </option>
+                              <option
+                                value="MAC"
+                              >
+                                China, Macao Special Administrative Region
+                              </option>
+                              <option
+                                value="COL"
+                              >
+                                Colombia
+                              </option>
+                              <option
+                                value="COM"
+                              >
+                                Comoros
+                              </option>
+                              <option
+                                value="COG"
+                              >
+                                Congo
+                              </option>
+                              <option
+                                value="COK"
+                              >
+                                Cook Islands
+                              </option>
+                              <option
+                                value="CRI"
+                              >
+                                Costa Rica
+                              </option>
+                              <option
+                                value="CIV"
+                              >
+                                Côte d'Ivoire
+                              </option>
+                              <option
+                                value="HRV"
+                              >
+                                Croatia
+                              </option>
+                              <option
+                                value="CUB"
+                              >
+                                Cuba
+                              </option>
+                              <option
+                                value="CUW"
+                              >
+                                Curaçao
+                              </option>
+                              <option
+                                value="CYP"
+                              >
+                                Cyprus
+                              </option>
+                              <option
+                                value="CZE"
+                              >
+                                Czech Republic
+                              </option>
+                              <option
+                                value="PRK"
+                              >
+                                Democratic People's Republic of Korea
+                              </option>
+                              <option
+                                value="COD"
+                              >
+                                Democratic Republic of the Congo
+                              </option>
+                              <option
+                                value="DNK"
+                              >
+                                Denmark
+                              </option>
+                              <option
+                                value="DJI"
+                              >
+                                Djibouti
+                              </option>
+                              <option
+                                value="DMA"
+                              >
+                                Dominica
+                              </option>
+                              <option
+                                value="DOM"
+                              >
+                                Dominican Republic
+                              </option>
+                              <option
+                                value="ECU"
+                              >
+                                Ecuador
+                              </option>
+                              <option
+                                value="EGY"
+                              >
+                                Egypt
+                              </option>
+                              <option
+                                value="SLV"
+                              >
+                                El Salvador
+                              </option>
+                              <option
+                                value="GNQ"
+                              >
+                                Equatorial Guinea
+                              </option>
+                              <option
+                                value="ERI"
+                              >
+                                Eritrea
+                              </option>
+                              <option
+                                value="EST"
+                              >
+                                Estonia
+                              </option>
+                              <option
+                                value="ETH"
+                              >
+                                Ethiopia
+                              </option>
+                              <option
+                                value="FRO"
+                              >
+                                Faeroe Islands
+                              </option>
+                              <option
+                                value="FLK"
+                              >
+                                Falkland Islands (Malvinas)
+                              </option>
+                              <option
+                                value="FJI"
+                              >
+                                Fiji
+                              </option>
+                              <option
+                                value="FIN"
+                              >
+                                Finland
+                              </option>
+                              <option
+                                value="FRA"
+                              >
+                                France
+                              </option>
+                              <option
+                                value="GUF"
+                              >
+                                French Guiana
+                              </option>
+                              <option
+                                value="PYF"
+                              >
+                                French Polynesia
+                              </option>
+                              <option
+                                value="GAB"
+                              >
+                                Gabon
+                              </option>
+                              <option
+                                value="GMB"
+                              >
+                                Gambia
+                              </option>
+                              <option
+                                value="GEO"
+                              >
+                                Georgia
+                              </option>
+                              <option
+                                value="DEU"
+                              >
+                                Germany
+                              </option>
+                              <option
+                                value="GHA"
+                              >
+                                Ghana
+                              </option>
+                              <option
+                                value="GIB"
+                              >
+                                Gibraltar
+                              </option>
+                              <option
+                                value="GRC"
+                              >
+                                Greece
+                              </option>
+                              <option
+                                value="GRL"
+                              >
+                                Greenland
+                              </option>
+                              <option
+                                value="GRD"
+                              >
+                                Grenada
+                              </option>
+                              <option
+                                value="GLP"
+                              >
+                                Guadeloupe
+                              </option>
+                              <option
+                                value="GUM"
+                              >
+                                Guam
+                              </option>
+                              <option
+                                value="GTM"
+                              >
+                                Guatemala
+                              </option>
+                              <option
+                                value="GGY"
+                              >
+                                Guernsey
+                              </option>
+                              <option
+                                value="GIN"
+                              >
+                                Guinea
+                              </option>
+                              <option
+                                value="GNB"
+                              >
+                                Guinea-Bissau
+                              </option>
+                              <option
+                                value="GUY"
+                              >
+                                Guyana
+                              </option>
+                              <option
+                                value="HTI"
+                              >
+                                Haiti
+                              </option>
+                              <option
+                                value="VAT"
+                              >
+                                Holy See
+                              </option>
+                              <option
+                                value="HND"
+                              >
+                                Honduras
+                              </option>
+                              <option
+                                value="HUN"
+                              >
+                                Hungary
+                              </option>
+                              <option
+                                value="ISL"
+                              >
+                                Iceland
+                              </option>
+                              <option
+                                value="IND"
+                              >
+                                India
+                              </option>
+                              <option
+                                value="IDN"
+                              >
+                                Indonesia
+                              </option>
+                              <option
+                                value="IRN"
+                              >
+                                Iran (Islamic Republic of)
+                              </option>
+                              <option
+                                value="IRQ"
+                              >
+                                Iraq
+                              </option>
+                              <option
+                                value="IRL"
+                              >
+                                Ireland
+                              </option>
+                              <option
+                                value="IMN"
+                              >
+                                Isle of Man
+                              </option>
+                              <option
+                                value="ISR"
+                              >
+                                Israel
+                              </option>
+                              <option
+                                value="ITA"
+                              >
+                                Italy
+                              </option>
+                              <option
+                                value="JAM"
+                              >
+                                Jamaica
+                              </option>
+                              <option
+                                value="JPN"
+                              >
+                                Japan
+                              </option>
+                              <option
+                                value="JEY"
+                              >
+                                Jersey
+                              </option>
+                              <option
+                                value="JOR"
+                              >
+                                Jordan
+                              </option>
+                              <option
+                                value="KAZ"
+                              >
+                                Kazakhstan
+                              </option>
+                              <option
+                                value="KEN"
+                              >
+                                Kenya
+                              </option>
+                              <option
+                                value="KIR"
+                              >
+                                Kiribati
+                              </option>
+                              <option
+                                value="KWT"
+                              >
+                                Kuwait
+                              </option>
+                              <option
+                                value="KGZ"
+                              >
+                                Kyrgyzstan
+                              </option>
+                              <option
+                                value="LAO"
+                              >
+                                Lao People's Democratic Republic
+                              </option>
+                              <option
+                                value="LVA"
+                              >
+                                Latvia
+                              </option>
+                              <option
+                                value="LBN"
+                              >
+                                Lebanon
+                              </option>
+                              <option
+                                value="LSO"
+                              >
+                                Lesotho
+                              </option>
+                              <option
+                                value="LBR"
+                              >
+                                Liberia
+                              </option>
+                              <option
+                                value="LBY"
+                              >
+                                Libya
+                              </option>
+                              <option
+                                value="LIE"
+                              >
+                                Liechtenstein
+                              </option>
+                              <option
+                                value="LTU"
+                              >
+                                Lithuania
+                              </option>
+                              <option
+                                value="LUX"
+                              >
+                                Luxembourg
+                              </option>
+                              <option
+                                value="MDG"
+                              >
+                                Madagascar
+                              </option>
+                              <option
+                                value="MWI"
+                              >
+                                Malawi
+                              </option>
+                              <option
+                                value="MYS"
+                              >
+                                Malaysia
+                              </option>
+                              <option
+                                value="MDV"
+                              >
+                                Maldives
+                              </option>
+                              <option
+                                value="MLI"
+                              >
+                                Mali
+                              </option>
+                              <option
+                                value="MLT"
+                              >
+                                Malta
+                              </option>
+                              <option
+                                value="MHL"
+                              >
+                                Marshall Islands
+                              </option>
+                              <option
+                                value="MTQ"
+                              >
+                                Martinique
+                              </option>
+                              <option
+                                value="MRT"
+                              >
+                                Mauritania
+                              </option>
+                              <option
+                                value="MUS"
+                              >
+                                Mauritius
+                              </option>
+                              <option
+                                value="MYT"
+                              >
+                                Mayotte
+                              </option>
+                              <option
+                                value="MEX"
+                              >
+                                Mexico
+                              </option>
+                              <option
+                                value="FSM"
+                              >
+                                Micronesia (Federated States of)
+                              </option>
+                              <option
+                                value="MCO"
+                              >
+                                Monaco
+                              </option>
+                              <option
+                                value="MNG"
+                              >
+                                Mongolia
+                              </option>
+                              <option
+                                value="MNE"
+                              >
+                                Montenegro
+                              </option>
+                              <option
+                                value="MSR"
+                              >
+                                Montserrat
+                              </option>
+                              <option
+                                value="MAR"
+                              >
+                                Morocco
+                              </option>
+                              <option
+                                value="MOZ"
+                              >
+                                Mozambique
+                              </option>
+                              <option
+                                value="MMR"
+                              >
+                                Myanmar
+                              </option>
+                              <option
+                                value="NAM"
+                              >
+                                Namibia
+                              </option>
+                              <option
+                                value="NRU"
+                              >
+                                Nauru
+                              </option>
+                              <option
+                                value="NPL"
+                              >
+                                Nepal
+                              </option>
+                              <option
+                                value="NLD"
+                              >
+                                Netherlands
+                              </option>
+                              <option
+                                value="NCL"
+                              >
+                                New Caledonia
+                              </option>
+                              <option
+                                value="NZL"
+                              >
+                                New Zealand
+                              </option>
+                              <option
+                                value="NIC"
+                              >
+                                Nicaragua
+                              </option>
+                              <option
+                                value="NER"
+                              >
+                                Niger
+                              </option>
+                              <option
+                                value="NGA"
+                              >
+                                Nigeria
+                              </option>
+                              <option
+                                value="NIU"
+                              >
+                                Niue
+                              </option>
+                              <option
+                                value="NFK"
+                              >
+                                Norfolk Island
+                              </option>
+                              <option
+                                value="MNP"
+                              >
+                                Northern Mariana Islands
+                              </option>
+                              <option
+                                value="NOR"
+                              >
+                                Norway
+                              </option>
+                              <option
+                                value="OMN"
+                              >
+                                Oman
+                              </option>
+                              <option
+                                value="PAK"
+                              >
+                                Pakistan
+                              </option>
+                              <option
+                                value="PLW"
+                              >
+                                Palau
+                              </option>
+                              <option
+                                value="PAN"
+                              >
+                                Panama
+                              </option>
+                              <option
+                                value="PNG"
+                              >
+                                Papua New Guinea
+                              </option>
+                              <option
+                                value="PRY"
+                              >
+                                Paraguay
+                              </option>
+                              <option
+                                value="PER"
+                              >
+                                Peru
+                              </option>
+                              <option
+                                value="PHL"
+                              >
+                                Philippines
+                              </option>
+                              <option
+                                value="PCN"
+                              >
+                                Pitcairn
+                              </option>
+                              <option
+                                value="POL"
+                              >
+                                Poland
+                              </option>
+                              <option
+                                value="PRT"
+                              >
+                                Portugal
+                              </option>
+                              <option
+                                value="PRI"
+                              >
+                                Puerto Rico
+                              </option>
+                              <option
+                                value="QAT"
+                              >
+                                Qatar
+                              </option>
+                              <option
+                                value="KOR"
+                              >
+                                Republic of Korea
+                              </option>
+                              <option
+                                value="MDA"
+                              >
+                                Republic of Moldova
+                              </option>
+                              <option
+                                value="REU"
+                              >
+                                Réunion
+                              </option>
+                              <option
+                                value="ROU"
+                              >
+                                Romania
+                              </option>
+                              <option
+                                value="RUS"
+                              >
+                                Russian Federation
+                              </option>
+                              <option
+                                value="RWA"
+                              >
+                                Rwanda
+                              </option>
+                              <option
+                                value="BLM"
+                              >
+                                Saint-Barthélemy
+                              </option>
+                              <option
+                                value="SHN"
+                              >
+                                Saint Helena
+                              </option>
+                              <option
+                                value="KNA"
+                              >
+                                Saint Kitts and Nevis
+                              </option>
+                              <option
+                                value="LCA"
+                              >
+                                Saint Lucia
+                              </option>
+                              <option
+                                value="MAF"
+                              >
+                                Saint-Martin (French part)
+                              </option>
+                              <option
+                                value="SPM"
+                              >
+                                Saint Pierre and Miquelon
+                              </option>
+                              <option
+                                value="VCT"
+                              >
+                                Saint Vincent and the Grenadines
+                              </option>
+                              <option
+                                value="WSM"
+                              >
+                                Samoa
+                              </option>
+                              <option
+                                value="SMR"
+                              >
+                                San Marino
+                              </option>
+                              <option
+                                value="STP"
+                              >
+                                Sao Tome and Principe
+                              </option>
+                              <option
+                                value="SAU"
+                              >
+                                Saudi Arabia
+                              </option>
+                              <option
+                                value="SEN"
+                              >
+                                Senegal
+                              </option>
+                              <option
+                                value="SRB"
+                              >
+                                Serbia
+                              </option>
+                              <option
+                                value="SYC"
+                              >
+                                Seychelles
+                              </option>
+                              <option
+                                value="SLE"
+                              >
+                                Sierra Leone
+                              </option>
+                              <option
+                                value="SGP"
+                              >
+                                Singapore
+                              </option>
+                              <option
+                                value="SXM"
+                              >
+                                Sint Maarten (Dutch part)
+                              </option>
+                              <option
+                                value="SVK"
+                              >
+                                Slovakia
+                              </option>
+                              <option
+                                value="SVN"
+                              >
+                                Slovenia
+                              </option>
+                              <option
+                                value="SLB"
+                              >
+                                Solomon Islands
+                              </option>
+                              <option
+                                value="SOM"
+                              >
+                                Somalia
+                              </option>
+                              <option
+                                value="ZAF"
+                              >
+                                South Africa
+                              </option>
+                              <option
+                                value="SSD"
+                              >
+                                South Sudan
+                              </option>
+                              <option
+                                value="ESP"
+                              >
+                                Spain
+                              </option>
+                              <option
+                                value="LKA"
+                              >
+                                Sri Lanka
+                              </option>
+                              <option
+                                value="PSE"
+                              >
+                                State of Palestine
+                              </option>
+                              <option
+                                value="SDN"
+                              >
+                                Sudan
+                              </option>
+                              <option
+                                value="SUR"
+                              >
+                                Suriname
+                              </option>
+                              <option
+                                value="SJM"
+                              >
+                                Svalbard and Jan Mayen Islands
+                              </option>
+                              <option
+                                value="SWZ"
+                              >
+                                Swaziland
+                              </option>
+                              <option
+                                value="SWE"
+                              >
+                                Sweden
+                              </option>
+                              <option
+                                value="CHE"
+                              >
+                                Switzerland
+                              </option>
+                              <option
+                                value="SYR"
+                              >
+                                Syrian Arab Republic
+                              </option>
+                              <option
+                                value="TWAN"
+                              >
+                                Taiwan
+                              </option>
+                              <option
+                                value="TJK"
+                              >
+                                Tajikistan
+                              </option>
+                              <option
+                                value="THA"
+                              >
+                                Thailand
+                              </option>
+                              <option
+                                value="MKD"
+                              >
+                                The former Yugoslav Republic of Macedonia
+                              </option>
+                              <option
+                                value="TLS"
+                              >
+                                Timor-Leste
+                              </option>
+                              <option
+                                value="TGO"
+                              >
+                                Togo
+                              </option>
+                              <option
+                                value="TKL"
+                              >
+                                Tokelau
+                              </option>
+                              <option
+                                value="TON"
+                              >
+                                Tonga
+                              </option>
+                              <option
+                                value="TTO"
+                              >
+                                Trinidad and Tobago
+                              </option>
+                              <option
+                                value="TUN"
+                              >
+                                Tunisia
+                              </option>
+                              <option
+                                value="TUR"
+                              >
+                                Turkey
+                              </option>
+                              <option
+                                value="TKM"
+                              >
+                                Turkmenistan
+                              </option>
+                              <option
+                                value="TCA"
+                              >
+                                Turks and Caicos Islands
+                              </option>
+                              <option
+                                value="TUV"
+                              >
+                                Tuvalu
+                              </option>
+                              <option
+                                value="UGA"
+                              >
+                                Uganda
+                              </option>
+                              <option
+                                value="UKR"
+                              >
+                                Ukraine
+                              </option>
+                              <option
+                                value="ARE"
+                              >
+                                United Arab Emirates
+                              </option>
+                              <option
+                                value="GBR"
+                              >
+                                United Kingdom of Great Britain and Northern Ireland
+                              </option>
+                              <option
+                                value="TZA"
+                              >
+                                United Republic of Tanzania
+                              </option>
+                              <option
+                                value="URY"
+                              >
+                                Uruguay
+                              </option>
+                              <option
+                                value="UZB"
+                              >
+                                Uzbekistan
+                              </option>
+                              <option
+                                value="VUT"
+                              >
+                                Vanuatu
+                              </option>
+                              <option
+                                value="VEN"
+                              >
+                                Venezuela (Bolivarian Republic of)
+                              </option>
+                              <option
+                                value="VNM"
+                              >
+                                Vietnam
+                              </option>
+                              <option
+                                value="WLF"
+                              >
+                                Wallis and Futuna Islands
+                              </option>
+                              <option
+                                value="ESH"
+                              >
+                                Western Sahara
+                              </option>
+                              <option
+                                value="YEM"
+                              >
+                                Yemen
+                              </option>
+                              <option
+                                value="ZMB"
+                              >
+                                Zambia
+                              </option>
+                              <option
+                                value="ZWE"
+                              >
+                                Zimbabwe
+                              </option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
                   </div>
                   <div
-                    className="emotion-12"
+                    className="emotion-19"
                   >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Marriage
+                      <div
+                        className="notice"
+                      />
+                    </h1>
+                    <span />
                     <div
-                      className="emotion-7"
+                      className="emotion-9"
                     >
                       <div
-                        className="emotion-6"
+                        className="emotion-8"
                       >
                         <div
-                          className="contact-fields"
+                          aria-labelledby="partnerA_bloodRelation-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
+                          <div
+                            className="txt-l"
+                            id="partnerA_bloodRelation-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Are you related by blood or marriage to your future spouse?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+                              </div>
+                            </span>
+                          </div>
                           <label
-                            className="txt-l "
-                            htmlFor="input-2778663327"
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_bloodRelation"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_bloodRelation"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          aria-labelledby="partnerA_marriedBefore-groupLabel"
+                          className="radio-group__label"
+                          role="group"
+                        >
+                          <div
+                            className="txt-l"
+                            id="partnerA_marriedBefore-groupLabel"
                             style={
                               Object {
                                 "display": "flex",
                               }
                             }
                           >
+                            Have you ever been married before?
                             <span
+                              className="t--req"
                               style={
                                 Object {
                                   "display": "flex",
-                                  "marginRight": "0.5em",
-                                  "whiteSpace": "nowrap",
+                                  "paddingLeft": "0.25em",
                                 }
                               }
                             >
-                              EMail Address
+                              Required
                             </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_marriedBefore"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
                             <span
-                              aria-hidden="true"
-                              className="t--req"
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_marriedBefore"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <div
+                      className="emotion-24"
+                    >
+                      <div
+                        className="emotion-33"
+                      >
+                        <div
+                          className="emotion-9"
+                        >
+                          <div
+                            aria-labelledby="partnerA_partnershipType-groupLabel"
+                            className="radio-group__label"
+                            role="group"
+                          >
+                            <div
+                              className="txt-l"
+                              id="partnerA_partnershipType-groupLabel"
                               style={
                                 Object {
                                   "display": "flex",
-                                  "flexGrow": 1,
                                 }
                               }
                             >
-                              Required
-                            </span>
-                          </label>
-                          <input
-                            aria-label=""
-                            className="txt-f   "
-                            id="input-2778663327"
-                            name="email"
-                            onChange={[Function]}
-                            required={true}
-                            type="text"
-                            value=""
+                              Were you ever a member of a civil union or domestic partnership?
+                              <span
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "display": "flex",
+                                    "paddingLeft": "0.25em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  This information is collected as required by the Massachusetts State Marriage Intention Form.
+                                </div>
+                              </span>
+                            </div>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="CIV"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a civil union
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="DOM"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a domestic partnership
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerA_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="N/A"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                      
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-24"
+                  >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Parents
+                      <div
+                        className="notice"
+                      >
+                        Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
+                        <span
+                          className="tool-tip__wrapper emotion-36"
+                        >
+                          <div
+                            className="icon"
                           />
                           <div
-                            className="t--subinfo t--err m-b100 m-t100"
+                            className="msg"
                           >
-                             
+                            This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
                           </div>
-                        </div>
+                        </span>
+                      </div>
+                    </h1>
+                    <span />
+                    <div
+                      className="emotion-45"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-507056287"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1 - First Middle Last Name
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "flexGrow": 1,
+                              }
+                            }
+                          >
+                            Required
+                          </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f   "
+                          id="input-507056287"
+                          maxLength={38}
+                          name="partnerA_parentA_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
                         <div
-                          className="contact-fields"
+                          className="t--subinfo t--err m-b100 m-t100"
                         >
-                          <label
-                            className="txt-l "
-                            htmlFor="input-1813726221"
+                           
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-4196106810"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                              }
+                            }
+                          >
+                            Parent 1 - Family Name/Last Name At the time of their birth or adoption
+                          </span>
+                          <span
+                            aria-hidden="true"
+                            className="t--req"
                             style={
                               Object {
                                 "display": "flex",
+                                "flexGrow": 1,
                               }
                             }
                           >
-                            <span
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "marginRight": "0.5em",
-                                  "whiteSpace": "nowrap",
-                                }
-                              }
-                            >
-                              Confirm EMail Address
-                            </span>
-                            <span
-                              aria-hidden="true"
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "flexGrow": 1,
-                                }
-                              }
-                            >
-                              Required
-                            </span>
-                          </label>
-                          <input
-                            aria-label=""
-                            className="txt-f   "
-                            id="input-1813726221"
-                            name="emailConfirm"
-                            onChange={[Function]}
-                            required={true}
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            className="t--subinfo t--err m-b100 m-t100"
-                          >
-                             
-                          </div>
+                            Required
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-6"
+                        >
+                          This information might be found on your birth certificate.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f   "
+                          id="input-4196106810"
+                          maxLength={38}
+                          name="partnerA_parentA_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
                         </div>
+                      </div>
+                      <div
+                        className="emotion-9"
+                      >
                         <div
-                          className="contact-fields"
+                          aria-labelledby="partnerA_additionalParent-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
-                          <label
-                            className="txt-l "
-                            htmlFor="input-1267882554"
+                          <div
+                            className="txt-l"
+                            id="partnerA_additionalParent-groupLabel"
                             style={
                               Object {
                                 "display": "flex",
                               }
                             }
                           >
+                            Do you have a second parent?
                             <span
+                              className="t--req"
                               style={
                                 Object {
                                   "display": "flex",
-                                  "marginRight": "0.5em",
-                                  "whiteSpace": "nowrap",
+                                  "paddingLeft": "0.25em",
                                 }
                               }
                             >
-                              Phone Number
+                              Required
                             </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerA_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
                             <span
-                              aria-hidden="true"
-                              className="t--req"
-                              style={
-                                Object {
-                                  "display": "flex",
-                                  "flexGrow": 1,
-                                }
-                              }
+                              className="ra-l"
                             >
-                              Required
+                              Yes
                             </span>
                           </label>
                           <label
-                            className="notice emotion-5"
+                            className="ra  "
                           >
-                            Numbers only, no spaces or dashes needed.
+                            <input
+                              className="ra-f"
+                              name="partnerA_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
                           </label>
-                          <input
-                            aria-label=""
-                            className="txt-f   "
-                            id="input-1267882554"
-                            maxLength={14}
-                            minLength={10}
-                            name="dayPhone"
-                            onChange={[Function]}
-                            onKeyDown={[Function]}
-                            placeholder="(___) ___-____"
-                            required={true}
-                            type="text"
-                            value=""
-                          />
-                          <div
-                            className="t--subinfo t--err m-b100 m-t100"
-                          >
-                             
-                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      className="emotion-11"
-                      style={
-                        Object {
-                          "paddingTop": "1.5rem",
-                        }
-                      }
-                    >
-                      <fieldset
-                        className="emotion-10"
+                      <div
+                        className="emotion-24"
                       >
-                        <div>
-                          <legend
-                            style={
-                              Object {
-                                "width": "100%",
-                              }
-                            }
+                        <div
+                          className="emotion-43"
+                        >
+                          <div
+                            className="emotion-9"
                           >
-                            <h2
+                            <div
                               className="emotion-8"
-                              style={
-                                Object {
-                                  "marginBottom": "1.5rem",
-                                }
-                              }
                             >
-                              Appointment Date
-                            </h2>
-                          </legend>
-                          <div
-                            className=" emotion-9"
-                          >
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="appointmentDate-month"
-                              >
-                                Month
-                                <span
-                                  aria-hidden="true"
-                                  className="t--req"
-                                  style={
-                                    Object {
-                                      "marginLeft": "0.35em",
-                                    }
-                                  }
-                                >
-                                  Required
-                                </span>
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="appointmentDate-month"
-                                max="12"
-                                maxLength={2}
-                                min="1"
-                                name="month"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="MM"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="appointmentDate-day"
-                              >
-                                Day
-                                <span
-                                  aria-hidden="true"
-                                  className="t--req"
-                                  style={
-                                    Object {
-                                      "marginLeft": "0.35em",
-                                    }
-                                  }
-                                >
-                                  Required
-                                </span>
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="appointmentDate-day"
-                                max="31"
-                                maxLength={2}
-                                min="1"
-                                name="day"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="DD"
-                                type="number"
-                                value=""
-                              />
-                            </div>
-                            <div>
-                              <label
-                                className="txt-l"
-                                htmlFor="appointmentDate-year"
-                              >
-                                Year
-                                <span
-                                  aria-hidden="true"
-                                  className="t--req"
+                              <div
+                                aria-labelledby="partnerA_parentsMarriedAtBirth-groupLabel"
+                                className="radio-group__label"
+                                role="group"
+                              >
+                                <div
+                                  className="txt-l"
+                                  id="partnerA_parentsMarriedAtBirth-groupLabel"
                                   style={
                                     Object {
-                                      "marginLeft": "0.35em",
+                                      "display": "flex",
                                     }
                                   }
                                 >
-                                  Required
-                                </span>
-                              </label>
-                              <input
-                                className="txt-f"
-                                id="appointmentDate-year"
-                                max="9999"
-                                maxLength={4}
-                                min={2024}
-                                name="year"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onFocus={[Function]}
-                                placeholder="YYYY"
-                                type="number"
-                                value=""
-                              />
+                                  Were your parents married at the time of your birth?
+                                  <span
+                                    className="t--req"
+                                    style={
+                                      Object {
+                                        "display": "flex",
+                                        "paddingLeft": "0.25em",
+                                      }
+                                    }
+                                  >
+                                    Required
+                                  </span>
+                                  <span
+                                    className="tool-tip__wrapper emotion-7"
+                                  >
+                                    <div
+                                      className="icon"
+                                    />
+                                    <div
+                                      className="msg"
+                                    >
+                                      This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
+                                    </div>
+                                  </span>
+                                </div>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerA_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="1"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    Yes
+                                  </span>
+                                </label>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerA_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="0"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    No
+                                  </span>
+                                </label>
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </fieldset>
+                      </div>
                     </div>
                   </div>
                 </fieldset>
               </div>
               <div
-                className="g g--mr emotion-16"
+                className="g g--mr emotion-50"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-15"
+                    className="lnk emotion-49"
                     onClick={[Function]}
                     type="button"
                   >
@@ -85270,589 +79746,1099 @@ Array [
       </a>
     </li>
 
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
-    </li>
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
-    </li>
-  </ul>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Step 3. Person 2 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-48 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-48 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-48 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-47 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-47 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-47 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-47 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
+.emotion-50 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-50 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-50 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-50 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-50 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-49 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-17 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-17 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-15 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-15 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-15 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-15 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-15 input::-ms-clear {
+  display: none;
+}
+
+.emotion-15 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-15.disabled {
+  opacity: 0.4;
+}
+
+.emotion-15.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  table-layout: fixed;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-weight: bold;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  color: '#58585B';
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0.5em;
+  color: black;
+  background: #fff;
+  width: 2%;
+  font-size: 0.85em;
+  vertical-align: middle;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed.current {
+  cursor: pointer;
+  color: #fff;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused.current {
+  color: #000;
+  cursor: pointer;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  color: #000;
+  cursor: pointer;
+  background: #b0d9ff;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
+  cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
+.emotion-51 {
+  padding: 0px;
+}
+
+.emotion-4 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  padding-bottom: 0.25em;
+}
+
+.emotion-4 h2 {
+  margin-bottom: 3.9375rem;
+}
+
+.emotion-13 {
+  margin-bottom: 3em;
+  background: none;
+  margin-bottom: 1.5em;
+}
+
+.emotion-13 label {
+  margin-top: 0em;
+}
+
+.emotion-13 .spacingTop {
+  margin-top: 1.5em;
+}
+
+.emotion-13 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-13 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
 
-  <ul class=\\"ft-ll ft-ite-311\\">
-    <li class=\\"ft-ll-i\\">
-      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
-        <span class=\\"ft-ll-311\\">BOS:311</span>
-        <span class=\\"tablet--hidden\\"> - </span>
-        Report an issue
-      </a>
-    </li>
-  </ul>
-</div>
-",
-      }
-    }
-    style={
-      Object {
-        "position": "relative",
-        "zIndex": 2,
-      }
-    }
-  />,
-]
-`;
+.emotion-13 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-13 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-13 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-13 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-13 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-13 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-13 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-13 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-5 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+}
+
+.emotion-5 h1 {
+  border-bottom: 4px solid #091f2f;
+}
+
+.emotion-5 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
+}
+
+.emotion-5 .notice .tool-tip__wrapper {
+  display: inline-block;
+}
+
+.emotion-9 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-bottom: 1em;
+}
+
+.emotion-9 > label {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 0;
+  margin-bottom: 1em;
+}
+
+.emotion-9 .radio-group__label label .ra-l {
+  font-size: 0.8125rem;
+}
+
+.emotion-9 .radio-group__label .txt-l {
+  font-size: 0.875em;
+  margin-bottom: 0.75em;
+  margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-9 .cb {
+    margin: 0;
+    margin-left: 0;
+    margin-bottom: 1em;
+  }
+
+  .emotion-9 .cb:not(:first-of-type) {
+    margin-left: 0;
+  }
+}
+
+.emotion-8 {
+  margin-bottom: 1.5em;
+}
+
+.emotion-7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
+}
+
+.emotion-7 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
+}
+
+.emotion-7 .icon::before {
+  content: '?';
+}
+
+.emotion-7 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
+}
+
+.emotion-7 .tt--info::before {
+  content: 'i';
+}
+
+.emotion-7 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
+  font-style: italic;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
+}
+
+.emotion-7 .icon:hover + .msg {
+  visibility: visible;
+}
+
+.emotion-11 {
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-11 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-11 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-11 > .RADIOGROUP label {
+  display: block;
+}
 
-exports[`Storyshots Marriage Intention/Form Pages Step 5. Review - Contact [Section] 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.emotion-11 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-11 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
   overflow: hidden;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 1em 0;
-  color: #fff;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-0 .wrapper-title {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+.emotion-11 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-0 .wrapper-title h1,
-.emotion-0 .wrapper-title h2 {
-  color: #091f2f;
-  font-size: 1.5625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-family: Montserrat,Arial,sans-serif;
-  line-height: 1.875em;
+.emotion-11 .sel-c {
+  display: block;
 }
 
-.emotion-0 .wrapper-title h2 {
-  font-size: 1.125rem;
+.emotion-19 {
+  margin-bottom: 3em;
+  background: none;
 }
 
-.emotion-0 .wrapper-btn .btn {
-  color: #091f2f;
-  background: #fff;
-  border: 2px solid #091f2f;
+.emotion-19 label {
+  margin-top: 0em;
 }
 
-.emotion-0 .wrapper-btn .btn:hover {
-  color: #fff;
-  background: #1871bd;
+.emotion-19 .spacingTop {
+  margin-top: 1.5em;
 }
 
-@media screen and (max-width:480px) {
-  .emotion-0 .wrapper-title h1 {
-    line-height: 1.25em;
+.emotion-19 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
+
+.emotion-19 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-19 .t--opt {
+  color: #58585b !important;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-19 {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.emotion-1 .section-wrapper {
-  font-size: 0.9375rem;
-  font-family: Montserrat,Arial,sans-serif;
-  margin-bottom: 1em;
+.emotion-19 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-1 .section-wrapper h2 {
-  color: #091f2f;
-  font-size: 1.125rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  margin-bottom: 0.5em;
+.emotion-19 > div {
+  text-align: left;
 }
 
-.emotion-1 .section-wrapper .field-value-pair .field {
-  color: #58585b;
-  font-size: 0.9375rem;
+@media screen and (min-width:768px) {
+  .emotion-19 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-19 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-19 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
-  text-transform: uppercase;
+  font-size: 1rem;
 }
 
-.emotion-1 .section-wrapper .field-value-pair .value {
-  font-weight: normal;
+.emotion-19 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-<div>
-  <div
-    className="emotion-0"
-  >
-    <div
-      className="wrapper-title"
-    >
-      <h1>
-        Contact Information
-      </h1>
-    </div>
-    <div
-      className="wrapper-btn"
-    >
-      <button
-        className="btn btn--b-sm"
-        onClick={[Function]}
-        type="button"
-      >
-        Edit This Page
-      </button>
-    </div>
-  </div>
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="section-wrapper"
-    >
-      <h2>
-        Personal Information
-      </h2>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Email
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          phillip.kelly@boston.gov
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Phone #
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          (617) 000-1111
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Appointment Date
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Sep 23, 1982
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
+.emotion-19 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
 
-exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Full Form 1`] = `
-Array [
-  <a
-    className="btn a11y--h a11y--f"
-    href="#content-start"
-    onClick={[Function]}
-    style={
-      Object {
-        "margin": 4,
-      }
-    }
-    tabIndex={1}
-  >
-    Jump to content
-  </a>,
-  <input
-    aria-label="Open Boston.gov menu"
-    className="brg-tr"
-    id="brg-tr"
-    onKeyDown={[Function]}
-    type="checkbox"
-  />,
-  <nav
-    aria-label="Boston.gov menu"
-    className="nv-m"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "
-  <div class=\\"nv-m-h\\">
-      <div class=\\"nv-m-h-ic\\">
-        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
-          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
-        </a>
-      </div>
-      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
-  </div>
-  <div class=\\"nv-m-c\\">
-    
+.emotion-14 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125rem;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  margin-top: 0.5em;
+  margin-bottom: 1.25em;
+  border-bottom: 4px solid #091f2f;
+  margin-bottom: 1em;
+}
 
-<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
-<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
-<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
-</ul></li>
-<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
-<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
-<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
-</ul></li>
-</ul>  </div>
-",
-      }
-    }
-  />,
-  .emotion-1 {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.emotion-14 h1 {
+  border-bottom: 4px solid #091f2f;
 }
 
-.emotion-0 {
-  color: #d22d23;
+.emotion-14 .notice {
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375rem;
+  font-style: italic;
+  font-weight: normal;
+  line-height: 1.2rem;
+  text-transform: none;
+  padding-top: 0.5em;
+  margin-top: 0.25em;
+  border-top: 4px solid #091f2f;
 }
 
-.emotion-12 fieldset + fieldset {
-  margin-top: 2rem;
+.emotion-14 .notice .tool-tip__wrapper {
+  display: inline-block;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-12 fieldset + fieldset {
-    margin-top: 4rem;
-  }
+.emotion-16 {
+  margin-bottom: 2.25em;
+}
 
-  .emotion-12 fieldset + fieldset .lnk {
-    padding-left: 0;
-  }
+.emotion-24 {
+  margin-bottom: 3em;
+  background: none;
 }
 
-.emotion-14 {
-  text-align: center;
+.emotion-24 label {
+  margin-top: 0em;
 }
 
-@media screen and (min-width:480px) {
-  .emotion-14 {
-    margin-top: 2.5rem;
-    text-align: left;
-  }
+.emotion-24 .spacingTop {
+  margin-top: 1.5em;
+}
 
-  .emotion-14 > div {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-  }
+.emotion-24 label.inputHeading {
+  font-size: 0.875em;
+  text-transform: uppercase;
+}
 
-  .emotion-14 > div.ta-r > button {
+.emotion-24 label.inputHeading .t--req {
+  margin-left: 0.5rem;
+}
+
+.emotion-24 .t--opt {
+  color: #58585b !important;
+}
+
+.emotion-23 {
+  margin-bottom: 2.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-23 {
     margin-left: auto;
+    margin-right: auto;
   }
+}
 
-  .emotion-14 .lnk {
-    padding-left: 0;
+.emotion-23 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-23 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-23 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 }
 
-.emotion-13 {
-  padding: 1.25rem !important;
-  padding-left: 0 !important;
+.emotion-23 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-2 {
-  padding-right: 0;
+.emotion-23 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-@media screen and (min-width:980px) {
-  .emotion-2 {
-    font-size: 34px;
+.emotion-23 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-23 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-33 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-33 {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.emotion-3 {
-  display: grid;
-  margin: auto;
-  margin-top: 0.75rem;
-  grid-auto-columns: 1fr;
-  grid-auto-rows: 1fr;
+.emotion-33 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-3 .progressbar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
+.emotion-33 > div {
+  text-align: left;
 }
 
-.emotion-3 .progressbar .nav {
-  display: table;
-  table-layout: fixed;
-  text-align: center;
-  line-height: normal;
-  font-style: normal;
-  font-weight: bold;
-  font-family: Montserrat,Arial,sans-serif;
-  text-transform: uppercase;
-  color: '#58585B';
+@media screen and (min-width:768px) {
+  .emotion-33 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
 }
 
-.emotion-3 .progressbar .nav a {
-  display: table-cell;
-  border-width: 1px;
-  border-color: black;
-  border-style: solid;
-  border-left-width: 0;
-  padding: 0.85em 0.5em;
-  color: black;
-  background: #fff;
-  width: 2%;
-  font-size: 0.85em;
+.emotion-33 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-3 .progressbar .nav a:last-child {
-  grid-column-start: 2;
+.emotion-33 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-.emotion-3 .progressbar .nav a:first-child {
-  border-left-width: 1px;
+.emotion-33 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-3 .progressbar .nav a.completed,
-.emotion-3 .progressbar .nav a.completed.current {
-  cursor: pointer;
-  color: #fff;
-  background: #1871bd;
+.emotion-33 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-3 .progressbar .nav a.uncompleted {
-  background: #C8C8C8;
+.emotion-36 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  position: relative;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused.current {
-  color: #000;
-  cursor: pointer;
-  background: #f2f2f2;
+.emotion-36 .icon {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  background: #1871bd;
+  margin: 5px 0px 0 5px;
+  padding: 5.4px 0 0 3.00px;
+  line-height: 0px;
+  font-size: 8px;
+  color: white;
 }
 
-.emotion-3 .progressbar .nav a.completed.focused,
-.emotion-3 .progressbar .nav a.completed:hover {
-  color: #000;
-  cursor: pointer;
-  background: #b0d9ff;
+.emotion-36 .icon::before {
+  content: '?';
 }
 
-.emotion-3 .progressbar .nav a.done,
-.emotion-3 .progressbar .nav a.done:hover,
-.emotion-3 .progressbar .nav a.completed.focused.done.current {
-  color: #000;
-  cursor: default;
-  background: #f2f2f2;
+.emotion-36 .tt--info {
+  text-transform: lowercase;
+  padding-left: 3.5px;
 }
 
-.emotion-3 .progressbar .nav a.completed.current {
-  color: #000;
-  background: #f2f2f2;
+.emotion-36 .tt--info::before {
+  content: 'i';
 }
 
-.emotion-3 .progressbar .progress-text {
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+.emotion-36 .msg {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  visibility: hidden;
+  z-index: 2;
+  padding: 0.25em 0.5em;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
+  font-weight: 300;
   font-style: italic;
-  font-size: 1rem;
-  margin-top: 0.5rem;
+  text-transform: initial;
+  background-color: #f3f3f3;
+  min-width: 150px;
+  position: absolute;
+  margin-left: 20px;
+  top: calc(-30% + 1px);
 }
 
-.emotion-3 .progressbar .progress-text .mobile {
-  display: none;
+.emotion-36 .icon:hover + .msg {
+  visibility: visible;
 }
 
-@media screen and (max-width:540px) {
-  .emotion-3 {
-    max-width: 25.875em;
-  }
-
-  .emotion-3 .progressbar .nav a {
-    overflow: hidden;
-    min-width: 10px;
-    padding: 0.5em 0;
-    text-indent: -500px;
-    line-height: 0;
-  }
-
-  .emotion-3 .progressbar .progress-text .mobile {
-    display: inline-block;
-  }
+.emotion-45 {
+  margin-bottom: 2.5em;
 }
 
-@media (min-width:541px) and (max-width:1024px) {
-  .emotion-3 .progressbar .nav a {
-    padding: 0.85em 0;
-    font-size: 0.55rem;
-  }
+.emotion-45 h2 {
+  font-size: 1.5rem;
 }
 
-.emotion-15 {
-  padding: 0px;
+.emotion-45 h4 {
+  font-size: 1.25rem;
 }
 
-.emotion-11 {
-  font-size: 1.5em;
-  line-height: 1.5em;
-  margin-top: 1em;
-  font-size: 0.9378em;
+@media screen and (min-width:768px) {
+  .emotion-45 {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
-.emotion-11 h2 {
-  font-size: 1.5rem;
+.emotion-45 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-11 h4 {
-  font-size: 1.25rem;
+.emotion-45 > div {
+  text-align: left;
 }
 
-.emotion-11 label {
-  font-weight: bold;
+@media screen and (min-width:768px) {
+  .emotion-45 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
 }
 
-.emotion-4 {
-  font-size: 0.9378rem;
-  margin-bottom: 2em;
-  line-height: 1.4em;
-  color: #091f2f;
-  font-family: Lora;
+.emotion-45 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-4 H1 {
+.emotion-45 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
-  font-size: 1.88em;
-  text-transform: uppercase;
-  font-family: Montserrat !important;
-  line-height: 1.21em;
-  margin-bottom: 0em;
+  font-size: 1rem;
 }
 
-.emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.emotion-45 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
   overflow: hidden;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 1em 0;
-  color: #fff;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-5 .wrapper-title {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+.emotion-45 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
-.emotion-5 .wrapper-title h1,
-.emotion-5 .wrapper-title h2 {
-  color: #091f2f;
-  font-size: 1.5625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-family: Montserrat,Arial,sans-serif;
-  line-height: 1.875em;
+.emotion-43 {
+  margin-top: 1em;
 }
 
-.emotion-5 .wrapper-title h2 {
-  font-size: 1.125rem;
+@media screen and (min-width:768px) {
+  .emotion-43 {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
-.emotion-5 .wrapper-btn .btn {
-  color: #091f2f;
-  background: #fff;
-  border: 2px solid #091f2f;
+.emotion-43 .ra-l {
+  font-size: 0.9375em;
 }
 
-.emotion-5 .wrapper-btn .btn:hover {
-  color: #fff;
-  background: #1871bd;
+.emotion-43 > div {
+  text-align: left;
 }
 
-@media screen and (max-width:480px) {
-  .emotion-5 .wrapper-title h1 {
-    line-height: 1.25em;
+@media screen and (min-width:768px) {
+  .emotion-43 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
   }
 }
 
-.emotion-6 .section-wrapper {
-  font-size: 0.9375rem;
-  font-family: Montserrat,Arial,sans-serif;
-  margin-bottom: 1em;
+.emotion-43 > .RADIOGROUP label {
+  display: block;
 }
 
-.emotion-6 .section-wrapper h2 {
-  color: #091f2f;
-  font-size: 1.125rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  margin-bottom: 0.5em;
+.emotion-43 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
 }
 
-.emotion-6 .section-wrapper .field-value-pair .field {
-  color: #58585b;
-  font-size: 0.9375rem;
-  font-weight: 700;
-  text-transform: uppercase;
+.emotion-43 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
 }
 
-.emotion-6 .section-wrapper .field-value-pair .value {
-  font-weight: normal;
+.emotion-43 .emotion-6:after {
+  content: '&nbsp;';
+  opacity: 0;
 }
 
 <div
@@ -86070,7 +81056,7 @@ Array [
                 </a>
                 <a
                   aria-label="Person 2"
-                  className="completed"
+                  className="completed focused current"
                   onClick={[Function]}
                   title="Person 2"
                 >
@@ -86081,7 +81067,7 @@ Array [
                 </a>
                 <a
                   aria-label="Contact Info"
-                  className="completed"
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Contact Info"
                 >
@@ -86092,7 +81078,7 @@ Array [
                 </a>
                 <a
                   aria-label="Review"
-                  className="completed focused current"
+                  className="uncompleted"
                   onClick={[Function]}
                   title="Review"
                 >
@@ -86117,14 +81103,14 @@ Array [
                 className="progress-text"
               >
                 <span>
-                  Step 5 of 6
+                  Step 3 of 6
                 </span>
                 <span
                   className="mobile"
                 >
                   : 
                    
-                  Review
+                  Person 2
                 </span>
               </div>
             </div>
@@ -86133,680 +81119,4951 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-15"
+              className="b-c b-c--nbp emotion-51"
             >
               <div
-                className="emotion-12"
+                className="emotion-48"
               >
-                <div
-                  className="emotion-11"
+                <fieldset
+                  className=" emotion-47"
                 >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Person 
+                      2
+                    </h2>
+                  </legend>
                   <div
-                    className="emotion-4"
+                    className="emotion-13"
                   >
-                    <h1>
-                      Review Your Information
+                    <h1
+                      className="emotion-5"
+                    >
+                      Personal Information
+                      <div
+                        className="notice"
+                      >
+                        Please enter your legal name as it appears on official documents. You cannot list a new middle name. If you wish to change your last name, you can indicate this after providing your legal name.
+                      </div>
                     </h1>
-                    <p>
-                      <label>
-                        Before you submit your application, please check your responses.
+                    <span />
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2048906072"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          First Name
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-2048906072"
+                        maxLength={100}
+                        name="partnerB_firstName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2852212527"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Middle Name
+                        </span>
+                      </label>
+                      <label
+                        className="notice emotion-6"
+                      >
+                        Please enter your middle name if you have one. You cannot list a new middle name.
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-2852212527"
+                        maxLength={50}
+                        name="partnerB_middleName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-1103291528"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Last Name
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                        </span>
+                      </label>
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-1103291528"
+                        maxLength={100}
+                        name="partnerB_lastName"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        className="t--subinfo t--err m-b100 m-t100"
+                      >
+                         
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-8"
+                      >
+                        <div
+                          aria-labelledby="partnerB_useSurname-groupLabel"
+                          className="radio-group__label"
+                          role="group"
+                        >
+                          <div
+                            className="txt-l"
+                            id="partnerB_useSurname-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Would you like to change your last name?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
+                              </div>
+                            </span>
+                          </div>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
+                          </label>
+                          <label
+                            className="ra  "
+                          >
+                            <input
+                              className="ra-f"
+                              name="partnerB_useSurname"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-11"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-2202529938"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
+                        >
+                          <span
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
+                          >
+                            Suffix
+                          </span>
+                          <span
+                            className="t--req t--opt"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Optional
+                          </span>
+                        </label>
+                        <label
+                          className="notice emotion-6"
+                        >
+                          Please select your suffix if you have one.
+                        </label>
+                        <div
+                          className="sel-c  "
+                        >
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-2202529938"
+                            name="partnerB_suffix"
+                            onChange={[Function]}
+                            value=""
+                          >
+                            <option />
+                            <option
+                              value="I"
+                            >
+                              I
+                            </option>
+                            <option
+                              value="II"
+                            >
+                              II
+                            </option>
+                            <option
+                              value="III"
+                            >
+                              III
+                            </option>
+                            <option
+                              value="IV"
+                            >
+                              IV
+                            </option>
+                            <option
+                              value="V"
+                            >
+                              V
+                            </option>
+                            <option
+                              value="VI"
+                            >
+                              VI
+                            </option>
+                            <option
+                              value="Jr."
+                            >
+                              Jr.
+                            </option>
+                            <option
+                              value="Sr."
+                            >
+                              Sr.
+                            </option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <label
+                        className="txt-l "
+                        htmlFor="input-2786084594"
+                        style={
+                          Object {
+                            "display": "flex",
+                          }
+                        }
+                      >
+                        <span
+                          style={
+                            Object {
+                              "display": "flex",
+                              "marginRight": "0.5em",
+                            }
+                          }
+                        >
+                          Occupation
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="t--req"
+                          style={
+                            Object {
+                              "display": "flex",
+                              "flexGrow": 1,
+                            }
+                          }
+                        >
+                          Required
+                          <span
+                            className="tool-tip__wrapper emotion-7"
+                          >
+                            <div
+                              className="icon"
+                            />
+                            <div
+                              className="msg"
+                            >
+                              This information is collected as required by the Massachusetts State Marriage Intention Form.
+                            </div>
+                          </span>
+                        </span>
                       </label>
-                       
-                      If you need to make any changes, you can go back and edit the previous pages. Please make sure your information is accurate. During your appointment, we will review and finalize the information you share here and make sure everything’s set before it is printed onto your marriage intention form.
-                    </p>
-                  </div>
-                  <div>
-                    <div
-                      className="emotion-5"
-                    >
+                      <input
+                        aria-label=""
+                        className="txt-f   "
+                        id="input-2786084594"
+                        maxLength={100}
+                        name="partnerB_occupation"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
                       <div
-                        className="wrapper-title"
+                        className="t--subinfo t--err m-b100 m-t100"
                       >
-                        <h1>
-                          Person 1
-                        </h1>
+                         
                       </div>
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-19"
+                  >
+                    <h1
+                      className="emotion-14"
+                    >
+                      Date and Place of Birth
+                    </h1>
+                    <span />
+                    <fieldset
+                      className="emotion-17"
+                    >
                       <div
-                        className="wrapper-btn"
+                        className="emotion-16"
                       >
-                        <button
-                          className="btn btn--b-sm"
-                          onClick={[Function]}
-                          type="button"
+                        <legend
+                          style={
+                            Object {
+                              "display": "none",
+                              "width": "100%",
+                            }
+                          }
                         >
-                          Edit This Page
-                        </button>
+                          Person B Date of Birth
+                        </legend>
+                        <div
+                          className=" emotion-15"
+                        >
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-month"
+                            >
+                              Month
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-month"
+                              max="12"
+                              maxLength={2}
+                              min="1"
+                              name="month"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="MM"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-day"
+                            >
+                              Day
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-day"
+                              max="31"
+                              maxLength={2}
+                              min="1"
+                              name="day"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="DD"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                          <div>
+                            <label
+                              className="txt-l"
+                              htmlFor="dob-year"
+                            >
+                              Year
+                              <span
+                                aria-hidden="true"
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "marginLeft": "0.35em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                            </label>
+                            <input
+                              className="txt-f"
+                              id="dob-year"
+                              max={2024}
+                              maxLength={4}
+                              min="1000"
+                              name="year"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              placeholder="YYYY"
+                              type="number"
+                              value=""
+                            />
+                          </div>
+                        </div>
                       </div>
-                    </div>
+                    </fieldset>
                     <div
-                      className="emotion-6"
+                      className="emotion-11"
                     >
-                      <div
-                        className="section-wrapper"
-                      >
-                        <h2>
-                          Personal Information
-                        </h2>
-                        <div
-                          className="field-value-pair"
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="select-1817836307"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
-                          <label
-                            className="field"
-                          >
-                            Legal Name
-                            : 
-                          </label>
                           <span
-                            className="value"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                                "whiteSpace": "nowrap",
+                              }
+                            }
                           >
-                             
+                            Birthplace Country
                           </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            Last Name to be Used After Marriage
-                            : 
-                          </label>
                           <span
-                            className="value"
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            
+                            Required
                           </span>
-                        </div>
+                        </label>
                         <div
-                          className="field-value-pair"
+                          className="sel-c  "
                         >
-                          <label
-                            className="field"
-                          >
-                            Occupation
-                            : 
-                          </label>
-                          <span
-                            className="value"
+                          <select
+                            aria-label=""
+                            className="sel-f  "
+                            id="select-1817836307"
+                            name="partnerB_birthCountry"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            value=""
                           >
-                            
-                          </span>
+                            <option />
+                            <option
+                              value="USA"
+                            >
+                              United States of America
+                            </option>
+                            <option
+                              value="VIR"
+                            >
+                              United States Virgin Islands
+                            </option>
+                            <option
+                              value="AFG"
+                            >
+                              Afghanistan
+                            </option>
+                            <option
+                              value="ALA"
+                            >
+                              Åland Islands
+                            </option>
+                            <option
+                              value="ALB"
+                            >
+                              Albania
+                            </option>
+                            <option
+                              value="DZA"
+                            >
+                              Algeria
+                            </option>
+                            <option
+                              value="ASM"
+                            >
+                              American Samoa
+                            </option>
+                            <option
+                              value="AND"
+                            >
+                              Andorra
+                            </option>
+                            <option
+                              value="AGO"
+                            >
+                              Angola
+                            </option>
+                            <option
+                              value="AIA"
+                            >
+                              Anguilla
+                            </option>
+                            <option
+                              value="ATG"
+                            >
+                              Antigua and Barbuda
+                            </option>
+                            <option
+                              value="ARG"
+                            >
+                              Argentina
+                            </option>
+                            <option
+                              value="ARM"
+                            >
+                              Armenia
+                            </option>
+                            <option
+                              value="ABW"
+                            >
+                              Aruba
+                            </option>
+                            <option
+                              value="AUS"
+                            >
+                              Australia
+                            </option>
+                            <option
+                              value="AUT"
+                            >
+                              Austria
+                            </option>
+                            <option
+                              value="AZE"
+                            >
+                              Azerbaijan
+                            </option>
+                            <option
+                              value="BHS"
+                            >
+                              Bahamas
+                            </option>
+                            <option
+                              value="BHR"
+                            >
+                              Bahrain
+                            </option>
+                            <option
+                              value="BGD"
+                            >
+                              Bangladesh
+                            </option>
+                            <option
+                              value="BRB"
+                            >
+                              Barbados
+                            </option>
+                            <option
+                              value="BLR"
+                            >
+                              Belarus
+                            </option>
+                            <option
+                              value="BEL"
+                            >
+                              Belgium
+                            </option>
+                            <option
+                              value="BLZ"
+                            >
+                              Belize
+                            </option>
+                            <option
+                              value="BEN"
+                            >
+                              Benin
+                            </option>
+                            <option
+                              value="BMU"
+                            >
+                              Bermuda
+                            </option>
+                            <option
+                              value="BTN"
+                            >
+                              Bhutan
+                            </option>
+                            <option
+                              value="BOL"
+                            >
+                              Bolivia (Plurinational State of)
+                            </option>
+                            <option
+                              value="BES"
+                            >
+                              Bonaire, Saint Eustatius and Saba
+                            </option>
+                            <option
+                              value="BIH"
+                            >
+                              Bosnia and Herzegovina
+                            </option>
+                            <option
+                              value="BWA"
+                            >
+                              Botswana
+                            </option>
+                            <option
+                              value="BRA"
+                            >
+                              Brazil
+                            </option>
+                            <option
+                              value="VGB"
+                            >
+                              British Virgin Islands
+                            </option>
+                            <option
+                              value="BRN"
+                            >
+                              Brunei Darussalam
+                            </option>
+                            <option
+                              value="BGR"
+                            >
+                              Bulgaria
+                            </option>
+                            <option
+                              value="BFA"
+                            >
+                              Burkina Faso
+                            </option>
+                            <option
+                              value="BDI"
+                            >
+                              Burundi
+                            </option>
+                            <option
+                              value="CPV"
+                            >
+                              Cabo Verde
+                            </option>
+                            <option
+                              value="KHM"
+                            >
+                              Cambodia
+                            </option>
+                            <option
+                              value="CMR"
+                            >
+                              Cameroon
+                            </option>
+                            <option
+                              value="CAN"
+                            >
+                              Canada
+                            </option>
+                            <option
+                              value="CYM"
+                            >
+                              Cayman Islands
+                            </option>
+                            <option
+                              value="CAF"
+                            >
+                              Central African Republic
+                            </option>
+                            <option
+                              value="TCD"
+                            >
+                              Chad
+                            </option>
+                            <option
+                              value="CHL"
+                            >
+                              Chile
+                            </option>
+                            <option
+                              value="CHN"
+                            >
+                              China
+                            </option>
+                            <option
+                              value="HKG"
+                            >
+                              China, Hong Kong Special Administrative Region
+                            </option>
+                            <option
+                              value="MAC"
+                            >
+                              China, Macao Special Administrative Region
+                            </option>
+                            <option
+                              value="COL"
+                            >
+                              Colombia
+                            </option>
+                            <option
+                              value="COM"
+                            >
+                              Comoros
+                            </option>
+                            <option
+                              value="COG"
+                            >
+                              Congo
+                            </option>
+                            <option
+                              value="COK"
+                            >
+                              Cook Islands
+                            </option>
+                            <option
+                              value="CRI"
+                            >
+                              Costa Rica
+                            </option>
+                            <option
+                              value="CIV"
+                            >
+                              Côte d'Ivoire
+                            </option>
+                            <option
+                              value="HRV"
+                            >
+                              Croatia
+                            </option>
+                            <option
+                              value="CUB"
+                            >
+                              Cuba
+                            </option>
+                            <option
+                              value="CUW"
+                            >
+                              Curaçao
+                            </option>
+                            <option
+                              value="CYP"
+                            >
+                              Cyprus
+                            </option>
+                            <option
+                              value="CZE"
+                            >
+                              Czech Republic
+                            </option>
+                            <option
+                              value="PRK"
+                            >
+                              Democratic People's Republic of Korea
+                            </option>
+                            <option
+                              value="COD"
+                            >
+                              Democratic Republic of the Congo
+                            </option>
+                            <option
+                              value="DNK"
+                            >
+                              Denmark
+                            </option>
+                            <option
+                              value="DJI"
+                            >
+                              Djibouti
+                            </option>
+                            <option
+                              value="DMA"
+                            >
+                              Dominica
+                            </option>
+                            <option
+                              value="DOM"
+                            >
+                              Dominican Republic
+                            </option>
+                            <option
+                              value="ECU"
+                            >
+                              Ecuador
+                            </option>
+                            <option
+                              value="EGY"
+                            >
+                              Egypt
+                            </option>
+                            <option
+                              value="SLV"
+                            >
+                              El Salvador
+                            </option>
+                            <option
+                              value="GNQ"
+                            >
+                              Equatorial Guinea
+                            </option>
+                            <option
+                              value="ERI"
+                            >
+                              Eritrea
+                            </option>
+                            <option
+                              value="EST"
+                            >
+                              Estonia
+                            </option>
+                            <option
+                              value="ETH"
+                            >
+                              Ethiopia
+                            </option>
+                            <option
+                              value="FRO"
+                            >
+                              Faeroe Islands
+                            </option>
+                            <option
+                              value="FLK"
+                            >
+                              Falkland Islands (Malvinas)
+                            </option>
+                            <option
+                              value="FJI"
+                            >
+                              Fiji
+                            </option>
+                            <option
+                              value="FIN"
+                            >
+                              Finland
+                            </option>
+                            <option
+                              value="FRA"
+                            >
+                              France
+                            </option>
+                            <option
+                              value="GUF"
+                            >
+                              French Guiana
+                            </option>
+                            <option
+                              value="PYF"
+                            >
+                              French Polynesia
+                            </option>
+                            <option
+                              value="GAB"
+                            >
+                              Gabon
+                            </option>
+                            <option
+                              value="GMB"
+                            >
+                              Gambia
+                            </option>
+                            <option
+                              value="GEO"
+                            >
+                              Georgia
+                            </option>
+                            <option
+                              value="DEU"
+                            >
+                              Germany
+                            </option>
+                            <option
+                              value="GHA"
+                            >
+                              Ghana
+                            </option>
+                            <option
+                              value="GIB"
+                            >
+                              Gibraltar
+                            </option>
+                            <option
+                              value="GRC"
+                            >
+                              Greece
+                            </option>
+                            <option
+                              value="GRL"
+                            >
+                              Greenland
+                            </option>
+                            <option
+                              value="GRD"
+                            >
+                              Grenada
+                            </option>
+                            <option
+                              value="GLP"
+                            >
+                              Guadeloupe
+                            </option>
+                            <option
+                              value="GUM"
+                            >
+                              Guam
+                            </option>
+                            <option
+                              value="GTM"
+                            >
+                              Guatemala
+                            </option>
+                            <option
+                              value="GGY"
+                            >
+                              Guernsey
+                            </option>
+                            <option
+                              value="GIN"
+                            >
+                              Guinea
+                            </option>
+                            <option
+                              value="GNB"
+                            >
+                              Guinea-Bissau
+                            </option>
+                            <option
+                              value="GUY"
+                            >
+                              Guyana
+                            </option>
+                            <option
+                              value="HTI"
+                            >
+                              Haiti
+                            </option>
+                            <option
+                              value="VAT"
+                            >
+                              Holy See
+                            </option>
+                            <option
+                              value="HND"
+                            >
+                              Honduras
+                            </option>
+                            <option
+                              value="HUN"
+                            >
+                              Hungary
+                            </option>
+                            <option
+                              value="ISL"
+                            >
+                              Iceland
+                            </option>
+                            <option
+                              value="IND"
+                            >
+                              India
+                            </option>
+                            <option
+                              value="IDN"
+                            >
+                              Indonesia
+                            </option>
+                            <option
+                              value="IRN"
+                            >
+                              Iran (Islamic Republic of)
+                            </option>
+                            <option
+                              value="IRQ"
+                            >
+                              Iraq
+                            </option>
+                            <option
+                              value="IRL"
+                            >
+                              Ireland
+                            </option>
+                            <option
+                              value="IMN"
+                            >
+                              Isle of Man
+                            </option>
+                            <option
+                              value="ISR"
+                            >
+                              Israel
+                            </option>
+                            <option
+                              value="ITA"
+                            >
+                              Italy
+                            </option>
+                            <option
+                              value="JAM"
+                            >
+                              Jamaica
+                            </option>
+                            <option
+                              value="JPN"
+                            >
+                              Japan
+                            </option>
+                            <option
+                              value="JEY"
+                            >
+                              Jersey
+                            </option>
+                            <option
+                              value="JOR"
+                            >
+                              Jordan
+                            </option>
+                            <option
+                              value="KAZ"
+                            >
+                              Kazakhstan
+                            </option>
+                            <option
+                              value="KEN"
+                            >
+                              Kenya
+                            </option>
+                            <option
+                              value="KIR"
+                            >
+                              Kiribati
+                            </option>
+                            <option
+                              value="KWT"
+                            >
+                              Kuwait
+                            </option>
+                            <option
+                              value="KGZ"
+                            >
+                              Kyrgyzstan
+                            </option>
+                            <option
+                              value="LAO"
+                            >
+                              Lao People's Democratic Republic
+                            </option>
+                            <option
+                              value="LVA"
+                            >
+                              Latvia
+                            </option>
+                            <option
+                              value="LBN"
+                            >
+                              Lebanon
+                            </option>
+                            <option
+                              value="LSO"
+                            >
+                              Lesotho
+                            </option>
+                            <option
+                              value="LBR"
+                            >
+                              Liberia
+                            </option>
+                            <option
+                              value="LBY"
+                            >
+                              Libya
+                            </option>
+                            <option
+                              value="LIE"
+                            >
+                              Liechtenstein
+                            </option>
+                            <option
+                              value="LTU"
+                            >
+                              Lithuania
+                            </option>
+                            <option
+                              value="LUX"
+                            >
+                              Luxembourg
+                            </option>
+                            <option
+                              value="MDG"
+                            >
+                              Madagascar
+                            </option>
+                            <option
+                              value="MWI"
+                            >
+                              Malawi
+                            </option>
+                            <option
+                              value="MYS"
+                            >
+                              Malaysia
+                            </option>
+                            <option
+                              value="MDV"
+                            >
+                              Maldives
+                            </option>
+                            <option
+                              value="MLI"
+                            >
+                              Mali
+                            </option>
+                            <option
+                              value="MLT"
+                            >
+                              Malta
+                            </option>
+                            <option
+                              value="MHL"
+                            >
+                              Marshall Islands
+                            </option>
+                            <option
+                              value="MTQ"
+                            >
+                              Martinique
+                            </option>
+                            <option
+                              value="MRT"
+                            >
+                              Mauritania
+                            </option>
+                            <option
+                              value="MUS"
+                            >
+                              Mauritius
+                            </option>
+                            <option
+                              value="MYT"
+                            >
+                              Mayotte
+                            </option>
+                            <option
+                              value="MEX"
+                            >
+                              Mexico
+                            </option>
+                            <option
+                              value="FSM"
+                            >
+                              Micronesia (Federated States of)
+                            </option>
+                            <option
+                              value="MCO"
+                            >
+                              Monaco
+                            </option>
+                            <option
+                              value="MNG"
+                            >
+                              Mongolia
+                            </option>
+                            <option
+                              value="MNE"
+                            >
+                              Montenegro
+                            </option>
+                            <option
+                              value="MSR"
+                            >
+                              Montserrat
+                            </option>
+                            <option
+                              value="MAR"
+                            >
+                              Morocco
+                            </option>
+                            <option
+                              value="MOZ"
+                            >
+                              Mozambique
+                            </option>
+                            <option
+                              value="MMR"
+                            >
+                              Myanmar
+                            </option>
+                            <option
+                              value="NAM"
+                            >
+                              Namibia
+                            </option>
+                            <option
+                              value="NRU"
+                            >
+                              Nauru
+                            </option>
+                            <option
+                              value="NPL"
+                            >
+                              Nepal
+                            </option>
+                            <option
+                              value="NLD"
+                            >
+                              Netherlands
+                            </option>
+                            <option
+                              value="NCL"
+                            >
+                              New Caledonia
+                            </option>
+                            <option
+                              value="NZL"
+                            >
+                              New Zealand
+                            </option>
+                            <option
+                              value="NIC"
+                            >
+                              Nicaragua
+                            </option>
+                            <option
+                              value="NER"
+                            >
+                              Niger
+                            </option>
+                            <option
+                              value="NGA"
+                            >
+                              Nigeria
+                            </option>
+                            <option
+                              value="NIU"
+                            >
+                              Niue
+                            </option>
+                            <option
+                              value="NFK"
+                            >
+                              Norfolk Island
+                            </option>
+                            <option
+                              value="MNP"
+                            >
+                              Northern Mariana Islands
+                            </option>
+                            <option
+                              value="NOR"
+                            >
+                              Norway
+                            </option>
+                            <option
+                              value="OMN"
+                            >
+                              Oman
+                            </option>
+                            <option
+                              value="PAK"
+                            >
+                              Pakistan
+                            </option>
+                            <option
+                              value="PLW"
+                            >
+                              Palau
+                            </option>
+                            <option
+                              value="PAN"
+                            >
+                              Panama
+                            </option>
+                            <option
+                              value="PNG"
+                            >
+                              Papua New Guinea
+                            </option>
+                            <option
+                              value="PRY"
+                            >
+                              Paraguay
+                            </option>
+                            <option
+                              value="PER"
+                            >
+                              Peru
+                            </option>
+                            <option
+                              value="PHL"
+                            >
+                              Philippines
+                            </option>
+                            <option
+                              value="PCN"
+                            >
+                              Pitcairn
+                            </option>
+                            <option
+                              value="POL"
+                            >
+                              Poland
+                            </option>
+                            <option
+                              value="PRT"
+                            >
+                              Portugal
+                            </option>
+                            <option
+                              value="PRI"
+                            >
+                              Puerto Rico
+                            </option>
+                            <option
+                              value="QAT"
+                            >
+                              Qatar
+                            </option>
+                            <option
+                              value="KOR"
+                            >
+                              Republic of Korea
+                            </option>
+                            <option
+                              value="MDA"
+                            >
+                              Republic of Moldova
+                            </option>
+                            <option
+                              value="REU"
+                            >
+                              Réunion
+                            </option>
+                            <option
+                              value="ROU"
+                            >
+                              Romania
+                            </option>
+                            <option
+                              value="RUS"
+                            >
+                              Russian Federation
+                            </option>
+                            <option
+                              value="RWA"
+                            >
+                              Rwanda
+                            </option>
+                            <option
+                              value="BLM"
+                            >
+                              Saint-Barthélemy
+                            </option>
+                            <option
+                              value="SHN"
+                            >
+                              Saint Helena
+                            </option>
+                            <option
+                              value="KNA"
+                            >
+                              Saint Kitts and Nevis
+                            </option>
+                            <option
+                              value="LCA"
+                            >
+                              Saint Lucia
+                            </option>
+                            <option
+                              value="MAF"
+                            >
+                              Saint-Martin (French part)
+                            </option>
+                            <option
+                              value="SPM"
+                            >
+                              Saint Pierre and Miquelon
+                            </option>
+                            <option
+                              value="VCT"
+                            >
+                              Saint Vincent and the Grenadines
+                            </option>
+                            <option
+                              value="WSM"
+                            >
+                              Samoa
+                            </option>
+                            <option
+                              value="SMR"
+                            >
+                              San Marino
+                            </option>
+                            <option
+                              value="STP"
+                            >
+                              Sao Tome and Principe
+                            </option>
+                            <option
+                              value="SAU"
+                            >
+                              Saudi Arabia
+                            </option>
+                            <option
+                              value="SEN"
+                            >
+                              Senegal
+                            </option>
+                            <option
+                              value="SRB"
+                            >
+                              Serbia
+                            </option>
+                            <option
+                              value="SYC"
+                            >
+                              Seychelles
+                            </option>
+                            <option
+                              value="SLE"
+                            >
+                              Sierra Leone
+                            </option>
+                            <option
+                              value="SGP"
+                            >
+                              Singapore
+                            </option>
+                            <option
+                              value="SXM"
+                            >
+                              Sint Maarten (Dutch part)
+                            </option>
+                            <option
+                              value="SVK"
+                            >
+                              Slovakia
+                            </option>
+                            <option
+                              value="SVN"
+                            >
+                              Slovenia
+                            </option>
+                            <option
+                              value="SLB"
+                            >
+                              Solomon Islands
+                            </option>
+                            <option
+                              value="SOM"
+                            >
+                              Somalia
+                            </option>
+                            <option
+                              value="ZAF"
+                            >
+                              South Africa
+                            </option>
+                            <option
+                              value="SSD"
+                            >
+                              South Sudan
+                            </option>
+                            <option
+                              value="ESP"
+                            >
+                              Spain
+                            </option>
+                            <option
+                              value="LKA"
+                            >
+                              Sri Lanka
+                            </option>
+                            <option
+                              value="PSE"
+                            >
+                              State of Palestine
+                            </option>
+                            <option
+                              value="SDN"
+                            >
+                              Sudan
+                            </option>
+                            <option
+                              value="SUR"
+                            >
+                              Suriname
+                            </option>
+                            <option
+                              value="SJM"
+                            >
+                              Svalbard and Jan Mayen Islands
+                            </option>
+                            <option
+                              value="SWZ"
+                            >
+                              Swaziland
+                            </option>
+                            <option
+                              value="SWE"
+                            >
+                              Sweden
+                            </option>
+                            <option
+                              value="CHE"
+                            >
+                              Switzerland
+                            </option>
+                            <option
+                              value="SYR"
+                            >
+                              Syrian Arab Republic
+                            </option>
+                            <option
+                              value="TWAN"
+                            >
+                              Taiwan
+                            </option>
+                            <option
+                              value="TJK"
+                            >
+                              Tajikistan
+                            </option>
+                            <option
+                              value="THA"
+                            >
+                              Thailand
+                            </option>
+                            <option
+                              value="MKD"
+                            >
+                              The former Yugoslav Republic of Macedonia
+                            </option>
+                            <option
+                              value="TLS"
+                            >
+                              Timor-Leste
+                            </option>
+                            <option
+                              value="TGO"
+                            >
+                              Togo
+                            </option>
+                            <option
+                              value="TKL"
+                            >
+                              Tokelau
+                            </option>
+                            <option
+                              value="TON"
+                            >
+                              Tonga
+                            </option>
+                            <option
+                              value="TTO"
+                            >
+                              Trinidad and Tobago
+                            </option>
+                            <option
+                              value="TUN"
+                            >
+                              Tunisia
+                            </option>
+                            <option
+                              value="TUR"
+                            >
+                              Turkey
+                            </option>
+                            <option
+                              value="TKM"
+                            >
+                              Turkmenistan
+                            </option>
+                            <option
+                              value="TCA"
+                            >
+                              Turks and Caicos Islands
+                            </option>
+                            <option
+                              value="TUV"
+                            >
+                              Tuvalu
+                            </option>
+                            <option
+                              value="UGA"
+                            >
+                              Uganda
+                            </option>
+                            <option
+                              value="UKR"
+                            >
+                              Ukraine
+                            </option>
+                            <option
+                              value="ARE"
+                            >
+                              United Arab Emirates
+                            </option>
+                            <option
+                              value="GBR"
+                            >
+                              United Kingdom of Great Britain and Northern Ireland
+                            </option>
+                            <option
+                              value="TZA"
+                            >
+                              United Republic of Tanzania
+                            </option>
+                            <option
+                              value="URY"
+                            >
+                              Uruguay
+                            </option>
+                            <option
+                              value="UZB"
+                            >
+                              Uzbekistan
+                            </option>
+                            <option
+                              value="VUT"
+                            >
+                              Vanuatu
+                            </option>
+                            <option
+                              value="VEN"
+                            >
+                              Venezuela (Bolivarian Republic of)
+                            </option>
+                            <option
+                              value="VNM"
+                            >
+                              Vietnam
+                            </option>
+                            <option
+                              value="WLF"
+                            >
+                              Wallis and Futuna Islands
+                            </option>
+                            <option
+                              value="ESH"
+                            >
+                              Western Sahara
+                            </option>
+                            <option
+                              value="YEM"
+                            >
+                              Yemen
+                            </option>
+                            <option
+                              value="ZMB"
+                            >
+                              Zambia
+                            </option>
+                            <option
+                              value="ZWE"
+                            >
+                              Zimbabwe
+                            </option>
+                          </select>
                         </div>
                       </div>
+                    </div>
+                    
+                  </div>
+                  <div
+                    className="emotion-24"
+                  >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Residence
                       <div
-                        className="section-wrapper"
+                        className="notice"
                       >
-                        <h2>
-                          Date and Place of Birth
-                        </h2>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            Date of Birth
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
+                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+                      </div>
+                    </h1>
+                    <div
+                      className="emotion-23"
+                    >
+                      <div
+                        className="emotion-11"
+                      >
+                        <span />
+                        <div>
                           <label
-                            className="field"
+                            className="txt-l "
+                            htmlFor="select-3475791712"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            BirthPlace
-                            : 
+                            <span
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "marginRight": "0.5em",
+                                }
+                              }
+                            >
+                              Country of Residence
+                            </span>
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Required
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
+                                </div>
+                              </span>
+                            </span>
                           </label>
-                          <span
-                            className="value"
+                          <div
+                            className="sel-c  "
                           >
-                            , 
-                          </span>
+                            <select
+                              aria-label=""
+                              className="sel-f  "
+                              id="select-3475791712"
+                              name="partnerB_residenceCountry"
+                              onChange={[Function]}
+                              value=""
+                            >
+                              <option />
+                              <option
+                                value="USA"
+                              >
+                                United States of America
+                              </option>
+                              <option
+                                value="VIR"
+                              >
+                                United States Virgin Islands
+                              </option>
+                              <option
+                                value="AFG"
+                              >
+                                Afghanistan
+                              </option>
+                              <option
+                                value="ALA"
+                              >
+                                Åland Islands
+                              </option>
+                              <option
+                                value="ALB"
+                              >
+                                Albania
+                              </option>
+                              <option
+                                value="DZA"
+                              >
+                                Algeria
+                              </option>
+                              <option
+                                value="ASM"
+                              >
+                                American Samoa
+                              </option>
+                              <option
+                                value="AND"
+                              >
+                                Andorra
+                              </option>
+                              <option
+                                value="AGO"
+                              >
+                                Angola
+                              </option>
+                              <option
+                                value="AIA"
+                              >
+                                Anguilla
+                              </option>
+                              <option
+                                value="ATG"
+                              >
+                                Antigua and Barbuda
+                              </option>
+                              <option
+                                value="ARG"
+                              >
+                                Argentina
+                              </option>
+                              <option
+                                value="ARM"
+                              >
+                                Armenia
+                              </option>
+                              <option
+                                value="ABW"
+                              >
+                                Aruba
+                              </option>
+                              <option
+                                value="AUS"
+                              >
+                                Australia
+                              </option>
+                              <option
+                                value="AUT"
+                              >
+                                Austria
+                              </option>
+                              <option
+                                value="AZE"
+                              >
+                                Azerbaijan
+                              </option>
+                              <option
+                                value="BHS"
+                              >
+                                Bahamas
+                              </option>
+                              <option
+                                value="BHR"
+                              >
+                                Bahrain
+                              </option>
+                              <option
+                                value="BGD"
+                              >
+                                Bangladesh
+                              </option>
+                              <option
+                                value="BRB"
+                              >
+                                Barbados
+                              </option>
+                              <option
+                                value="BLR"
+                              >
+                                Belarus
+                              </option>
+                              <option
+                                value="BEL"
+                              >
+                                Belgium
+                              </option>
+                              <option
+                                value="BLZ"
+                              >
+                                Belize
+                              </option>
+                              <option
+                                value="BEN"
+                              >
+                                Benin
+                              </option>
+                              <option
+                                value="BMU"
+                              >
+                                Bermuda
+                              </option>
+                              <option
+                                value="BTN"
+                              >
+                                Bhutan
+                              </option>
+                              <option
+                                value="BOL"
+                              >
+                                Bolivia (Plurinational State of)
+                              </option>
+                              <option
+                                value="BES"
+                              >
+                                Bonaire, Saint Eustatius and Saba
+                              </option>
+                              <option
+                                value="BIH"
+                              >
+                                Bosnia and Herzegovina
+                              </option>
+                              <option
+                                value="BWA"
+                              >
+                                Botswana
+                              </option>
+                              <option
+                                value="BRA"
+                              >
+                                Brazil
+                              </option>
+                              <option
+                                value="VGB"
+                              >
+                                British Virgin Islands
+                              </option>
+                              <option
+                                value="BRN"
+                              >
+                                Brunei Darussalam
+                              </option>
+                              <option
+                                value="BGR"
+                              >
+                                Bulgaria
+                              </option>
+                              <option
+                                value="BFA"
+                              >
+                                Burkina Faso
+                              </option>
+                              <option
+                                value="BDI"
+                              >
+                                Burundi
+                              </option>
+                              <option
+                                value="CPV"
+                              >
+                                Cabo Verde
+                              </option>
+                              <option
+                                value="KHM"
+                              >
+                                Cambodia
+                              </option>
+                              <option
+                                value="CMR"
+                              >
+                                Cameroon
+                              </option>
+                              <option
+                                value="CAN"
+                              >
+                                Canada
+                              </option>
+                              <option
+                                value="CYM"
+                              >
+                                Cayman Islands
+                              </option>
+                              <option
+                                value="CAF"
+                              >
+                                Central African Republic
+                              </option>
+                              <option
+                                value="TCD"
+                              >
+                                Chad
+                              </option>
+                              <option
+                                value="CHL"
+                              >
+                                Chile
+                              </option>
+                              <option
+                                value="CHN"
+                              >
+                                China
+                              </option>
+                              <option
+                                value="HKG"
+                              >
+                                China, Hong Kong Special Administrative Region
+                              </option>
+                              <option
+                                value="MAC"
+                              >
+                                China, Macao Special Administrative Region
+                              </option>
+                              <option
+                                value="COL"
+                              >
+                                Colombia
+                              </option>
+                              <option
+                                value="COM"
+                              >
+                                Comoros
+                              </option>
+                              <option
+                                value="COG"
+                              >
+                                Congo
+                              </option>
+                              <option
+                                value="COK"
+                              >
+                                Cook Islands
+                              </option>
+                              <option
+                                value="CRI"
+                              >
+                                Costa Rica
+                              </option>
+                              <option
+                                value="CIV"
+                              >
+                                Côte d'Ivoire
+                              </option>
+                              <option
+                                value="HRV"
+                              >
+                                Croatia
+                              </option>
+                              <option
+                                value="CUB"
+                              >
+                                Cuba
+                              </option>
+                              <option
+                                value="CUW"
+                              >
+                                Curaçao
+                              </option>
+                              <option
+                                value="CYP"
+                              >
+                                Cyprus
+                              </option>
+                              <option
+                                value="CZE"
+                              >
+                                Czech Republic
+                              </option>
+                              <option
+                                value="PRK"
+                              >
+                                Democratic People's Republic of Korea
+                              </option>
+                              <option
+                                value="COD"
+                              >
+                                Democratic Republic of the Congo
+                              </option>
+                              <option
+                                value="DNK"
+                              >
+                                Denmark
+                              </option>
+                              <option
+                                value="DJI"
+                              >
+                                Djibouti
+                              </option>
+                              <option
+                                value="DMA"
+                              >
+                                Dominica
+                              </option>
+                              <option
+                                value="DOM"
+                              >
+                                Dominican Republic
+                              </option>
+                              <option
+                                value="ECU"
+                              >
+                                Ecuador
+                              </option>
+                              <option
+                                value="EGY"
+                              >
+                                Egypt
+                              </option>
+                              <option
+                                value="SLV"
+                              >
+                                El Salvador
+                              </option>
+                              <option
+                                value="GNQ"
+                              >
+                                Equatorial Guinea
+                              </option>
+                              <option
+                                value="ERI"
+                              >
+                                Eritrea
+                              </option>
+                              <option
+                                value="EST"
+                              >
+                                Estonia
+                              </option>
+                              <option
+                                value="ETH"
+                              >
+                                Ethiopia
+                              </option>
+                              <option
+                                value="FRO"
+                              >
+                                Faeroe Islands
+                              </option>
+                              <option
+                                value="FLK"
+                              >
+                                Falkland Islands (Malvinas)
+                              </option>
+                              <option
+                                value="FJI"
+                              >
+                                Fiji
+                              </option>
+                              <option
+                                value="FIN"
+                              >
+                                Finland
+                              </option>
+                              <option
+                                value="FRA"
+                              >
+                                France
+                              </option>
+                              <option
+                                value="GUF"
+                              >
+                                French Guiana
+                              </option>
+                              <option
+                                value="PYF"
+                              >
+                                French Polynesia
+                              </option>
+                              <option
+                                value="GAB"
+                              >
+                                Gabon
+                              </option>
+                              <option
+                                value="GMB"
+                              >
+                                Gambia
+                              </option>
+                              <option
+                                value="GEO"
+                              >
+                                Georgia
+                              </option>
+                              <option
+                                value="DEU"
+                              >
+                                Germany
+                              </option>
+                              <option
+                                value="GHA"
+                              >
+                                Ghana
+                              </option>
+                              <option
+                                value="GIB"
+                              >
+                                Gibraltar
+                              </option>
+                              <option
+                                value="GRC"
+                              >
+                                Greece
+                              </option>
+                              <option
+                                value="GRL"
+                              >
+                                Greenland
+                              </option>
+                              <option
+                                value="GRD"
+                              >
+                                Grenada
+                              </option>
+                              <option
+                                value="GLP"
+                              >
+                                Guadeloupe
+                              </option>
+                              <option
+                                value="GUM"
+                              >
+                                Guam
+                              </option>
+                              <option
+                                value="GTM"
+                              >
+                                Guatemala
+                              </option>
+                              <option
+                                value="GGY"
+                              >
+                                Guernsey
+                              </option>
+                              <option
+                                value="GIN"
+                              >
+                                Guinea
+                              </option>
+                              <option
+                                value="GNB"
+                              >
+                                Guinea-Bissau
+                              </option>
+                              <option
+                                value="GUY"
+                              >
+                                Guyana
+                              </option>
+                              <option
+                                value="HTI"
+                              >
+                                Haiti
+                              </option>
+                              <option
+                                value="VAT"
+                              >
+                                Holy See
+                              </option>
+                              <option
+                                value="HND"
+                              >
+                                Honduras
+                              </option>
+                              <option
+                                value="HUN"
+                              >
+                                Hungary
+                              </option>
+                              <option
+                                value="ISL"
+                              >
+                                Iceland
+                              </option>
+                              <option
+                                value="IND"
+                              >
+                                India
+                              </option>
+                              <option
+                                value="IDN"
+                              >
+                                Indonesia
+                              </option>
+                              <option
+                                value="IRN"
+                              >
+                                Iran (Islamic Republic of)
+                              </option>
+                              <option
+                                value="IRQ"
+                              >
+                                Iraq
+                              </option>
+                              <option
+                                value="IRL"
+                              >
+                                Ireland
+                              </option>
+                              <option
+                                value="IMN"
+                              >
+                                Isle of Man
+                              </option>
+                              <option
+                                value="ISR"
+                              >
+                                Israel
+                              </option>
+                              <option
+                                value="ITA"
+                              >
+                                Italy
+                              </option>
+                              <option
+                                value="JAM"
+                              >
+                                Jamaica
+                              </option>
+                              <option
+                                value="JPN"
+                              >
+                                Japan
+                              </option>
+                              <option
+                                value="JEY"
+                              >
+                                Jersey
+                              </option>
+                              <option
+                                value="JOR"
+                              >
+                                Jordan
+                              </option>
+                              <option
+                                value="KAZ"
+                              >
+                                Kazakhstan
+                              </option>
+                              <option
+                                value="KEN"
+                              >
+                                Kenya
+                              </option>
+                              <option
+                                value="KIR"
+                              >
+                                Kiribati
+                              </option>
+                              <option
+                                value="KWT"
+                              >
+                                Kuwait
+                              </option>
+                              <option
+                                value="KGZ"
+                              >
+                                Kyrgyzstan
+                              </option>
+                              <option
+                                value="LAO"
+                              >
+                                Lao People's Democratic Republic
+                              </option>
+                              <option
+                                value="LVA"
+                              >
+                                Latvia
+                              </option>
+                              <option
+                                value="LBN"
+                              >
+                                Lebanon
+                              </option>
+                              <option
+                                value="LSO"
+                              >
+                                Lesotho
+                              </option>
+                              <option
+                                value="LBR"
+                              >
+                                Liberia
+                              </option>
+                              <option
+                                value="LBY"
+                              >
+                                Libya
+                              </option>
+                              <option
+                                value="LIE"
+                              >
+                                Liechtenstein
+                              </option>
+                              <option
+                                value="LTU"
+                              >
+                                Lithuania
+                              </option>
+                              <option
+                                value="LUX"
+                              >
+                                Luxembourg
+                              </option>
+                              <option
+                                value="MDG"
+                              >
+                                Madagascar
+                              </option>
+                              <option
+                                value="MWI"
+                              >
+                                Malawi
+                              </option>
+                              <option
+                                value="MYS"
+                              >
+                                Malaysia
+                              </option>
+                              <option
+                                value="MDV"
+                              >
+                                Maldives
+                              </option>
+                              <option
+                                value="MLI"
+                              >
+                                Mali
+                              </option>
+                              <option
+                                value="MLT"
+                              >
+                                Malta
+                              </option>
+                              <option
+                                value="MHL"
+                              >
+                                Marshall Islands
+                              </option>
+                              <option
+                                value="MTQ"
+                              >
+                                Martinique
+                              </option>
+                              <option
+                                value="MRT"
+                              >
+                                Mauritania
+                              </option>
+                              <option
+                                value="MUS"
+                              >
+                                Mauritius
+                              </option>
+                              <option
+                                value="MYT"
+                              >
+                                Mayotte
+                              </option>
+                              <option
+                                value="MEX"
+                              >
+                                Mexico
+                              </option>
+                              <option
+                                value="FSM"
+                              >
+                                Micronesia (Federated States of)
+                              </option>
+                              <option
+                                value="MCO"
+                              >
+                                Monaco
+                              </option>
+                              <option
+                                value="MNG"
+                              >
+                                Mongolia
+                              </option>
+                              <option
+                                value="MNE"
+                              >
+                                Montenegro
+                              </option>
+                              <option
+                                value="MSR"
+                              >
+                                Montserrat
+                              </option>
+                              <option
+                                value="MAR"
+                              >
+                                Morocco
+                              </option>
+                              <option
+                                value="MOZ"
+                              >
+                                Mozambique
+                              </option>
+                              <option
+                                value="MMR"
+                              >
+                                Myanmar
+                              </option>
+                              <option
+                                value="NAM"
+                              >
+                                Namibia
+                              </option>
+                              <option
+                                value="NRU"
+                              >
+                                Nauru
+                              </option>
+                              <option
+                                value="NPL"
+                              >
+                                Nepal
+                              </option>
+                              <option
+                                value="NLD"
+                              >
+                                Netherlands
+                              </option>
+                              <option
+                                value="NCL"
+                              >
+                                New Caledonia
+                              </option>
+                              <option
+                                value="NZL"
+                              >
+                                New Zealand
+                              </option>
+                              <option
+                                value="NIC"
+                              >
+                                Nicaragua
+                              </option>
+                              <option
+                                value="NER"
+                              >
+                                Niger
+                              </option>
+                              <option
+                                value="NGA"
+                              >
+                                Nigeria
+                              </option>
+                              <option
+                                value="NIU"
+                              >
+                                Niue
+                              </option>
+                              <option
+                                value="NFK"
+                              >
+                                Norfolk Island
+                              </option>
+                              <option
+                                value="MNP"
+                              >
+                                Northern Mariana Islands
+                              </option>
+                              <option
+                                value="NOR"
+                              >
+                                Norway
+                              </option>
+                              <option
+                                value="OMN"
+                              >
+                                Oman
+                              </option>
+                              <option
+                                value="PAK"
+                              >
+                                Pakistan
+                              </option>
+                              <option
+                                value="PLW"
+                              >
+                                Palau
+                              </option>
+                              <option
+                                value="PAN"
+                              >
+                                Panama
+                              </option>
+                              <option
+                                value="PNG"
+                              >
+                                Papua New Guinea
+                              </option>
+                              <option
+                                value="PRY"
+                              >
+                                Paraguay
+                              </option>
+                              <option
+                                value="PER"
+                              >
+                                Peru
+                              </option>
+                              <option
+                                value="PHL"
+                              >
+                                Philippines
+                              </option>
+                              <option
+                                value="PCN"
+                              >
+                                Pitcairn
+                              </option>
+                              <option
+                                value="POL"
+                              >
+                                Poland
+                              </option>
+                              <option
+                                value="PRT"
+                              >
+                                Portugal
+                              </option>
+                              <option
+                                value="PRI"
+                              >
+                                Puerto Rico
+                              </option>
+                              <option
+                                value="QAT"
+                              >
+                                Qatar
+                              </option>
+                              <option
+                                value="KOR"
+                              >
+                                Republic of Korea
+                              </option>
+                              <option
+                                value="MDA"
+                              >
+                                Republic of Moldova
+                              </option>
+                              <option
+                                value="REU"
+                              >
+                                Réunion
+                              </option>
+                              <option
+                                value="ROU"
+                              >
+                                Romania
+                              </option>
+                              <option
+                                value="RUS"
+                              >
+                                Russian Federation
+                              </option>
+                              <option
+                                value="RWA"
+                              >
+                                Rwanda
+                              </option>
+                              <option
+                                value="BLM"
+                              >
+                                Saint-Barthélemy
+                              </option>
+                              <option
+                                value="SHN"
+                              >
+                                Saint Helena
+                              </option>
+                              <option
+                                value="KNA"
+                              >
+                                Saint Kitts and Nevis
+                              </option>
+                              <option
+                                value="LCA"
+                              >
+                                Saint Lucia
+                              </option>
+                              <option
+                                value="MAF"
+                              >
+                                Saint-Martin (French part)
+                              </option>
+                              <option
+                                value="SPM"
+                              >
+                                Saint Pierre and Miquelon
+                              </option>
+                              <option
+                                value="VCT"
+                              >
+                                Saint Vincent and the Grenadines
+                              </option>
+                              <option
+                                value="WSM"
+                              >
+                                Samoa
+                              </option>
+                              <option
+                                value="SMR"
+                              >
+                                San Marino
+                              </option>
+                              <option
+                                value="STP"
+                              >
+                                Sao Tome and Principe
+                              </option>
+                              <option
+                                value="SAU"
+                              >
+                                Saudi Arabia
+                              </option>
+                              <option
+                                value="SEN"
+                              >
+                                Senegal
+                              </option>
+                              <option
+                                value="SRB"
+                              >
+                                Serbia
+                              </option>
+                              <option
+                                value="SYC"
+                              >
+                                Seychelles
+                              </option>
+                              <option
+                                value="SLE"
+                              >
+                                Sierra Leone
+                              </option>
+                              <option
+                                value="SGP"
+                              >
+                                Singapore
+                              </option>
+                              <option
+                                value="SXM"
+                              >
+                                Sint Maarten (Dutch part)
+                              </option>
+                              <option
+                                value="SVK"
+                              >
+                                Slovakia
+                              </option>
+                              <option
+                                value="SVN"
+                              >
+                                Slovenia
+                              </option>
+                              <option
+                                value="SLB"
+                              >
+                                Solomon Islands
+                              </option>
+                              <option
+                                value="SOM"
+                              >
+                                Somalia
+                              </option>
+                              <option
+                                value="ZAF"
+                              >
+                                South Africa
+                              </option>
+                              <option
+                                value="SSD"
+                              >
+                                South Sudan
+                              </option>
+                              <option
+                                value="ESP"
+                              >
+                                Spain
+                              </option>
+                              <option
+                                value="LKA"
+                              >
+                                Sri Lanka
+                              </option>
+                              <option
+                                value="PSE"
+                              >
+                                State of Palestine
+                              </option>
+                              <option
+                                value="SDN"
+                              >
+                                Sudan
+                              </option>
+                              <option
+                                value="SUR"
+                              >
+                                Suriname
+                              </option>
+                              <option
+                                value="SJM"
+                              >
+                                Svalbard and Jan Mayen Islands
+                              </option>
+                              <option
+                                value="SWZ"
+                              >
+                                Swaziland
+                              </option>
+                              <option
+                                value="SWE"
+                              >
+                                Sweden
+                              </option>
+                              <option
+                                value="CHE"
+                              >
+                                Switzerland
+                              </option>
+                              <option
+                                value="SYR"
+                              >
+                                Syrian Arab Republic
+                              </option>
+                              <option
+                                value="TWAN"
+                              >
+                                Taiwan
+                              </option>
+                              <option
+                                value="TJK"
+                              >
+                                Tajikistan
+                              </option>
+                              <option
+                                value="THA"
+                              >
+                                Thailand
+                              </option>
+                              <option
+                                value="MKD"
+                              >
+                                The former Yugoslav Republic of Macedonia
+                              </option>
+                              <option
+                                value="TLS"
+                              >
+                                Timor-Leste
+                              </option>
+                              <option
+                                value="TGO"
+                              >
+                                Togo
+                              </option>
+                              <option
+                                value="TKL"
+                              >
+                                Tokelau
+                              </option>
+                              <option
+                                value="TON"
+                              >
+                                Tonga
+                              </option>
+                              <option
+                                value="TTO"
+                              >
+                                Trinidad and Tobago
+                              </option>
+                              <option
+                                value="TUN"
+                              >
+                                Tunisia
+                              </option>
+                              <option
+                                value="TUR"
+                              >
+                                Turkey
+                              </option>
+                              <option
+                                value="TKM"
+                              >
+                                Turkmenistan
+                              </option>
+                              <option
+                                value="TCA"
+                              >
+                                Turks and Caicos Islands
+                              </option>
+                              <option
+                                value="TUV"
+                              >
+                                Tuvalu
+                              </option>
+                              <option
+                                value="UGA"
+                              >
+                                Uganda
+                              </option>
+                              <option
+                                value="UKR"
+                              >
+                                Ukraine
+                              </option>
+                              <option
+                                value="ARE"
+                              >
+                                United Arab Emirates
+                              </option>
+                              <option
+                                value="GBR"
+                              >
+                                United Kingdom of Great Britain and Northern Ireland
+                              </option>
+                              <option
+                                value="TZA"
+                              >
+                                United Republic of Tanzania
+                              </option>
+                              <option
+                                value="URY"
+                              >
+                                Uruguay
+                              </option>
+                              <option
+                                value="UZB"
+                              >
+                                Uzbekistan
+                              </option>
+                              <option
+                                value="VUT"
+                              >
+                                Vanuatu
+                              </option>
+                              <option
+                                value="VEN"
+                              >
+                                Venezuela (Bolivarian Republic of)
+                              </option>
+                              <option
+                                value="VNM"
+                              >
+                                Vietnam
+                              </option>
+                              <option
+                                value="WLF"
+                              >
+                                Wallis and Futuna Islands
+                              </option>
+                              <option
+                                value="ESH"
+                              >
+                                Western Sahara
+                              </option>
+                              <option
+                                value="YEM"
+                              >
+                                Yemen
+                              </option>
+                              <option
+                                value="ZMB"
+                              >
+                                Zambia
+                              </option>
+                              <option
+                                value="ZWE"
+                              >
+                                Zimbabwe
+                              </option>
+                            </select>
+                          </div>
                         </div>
                       </div>
+                      
+                    </div>
+                  </div>
+                  <div
+                    className="emotion-19"
+                  >
+                    <h1
+                      className="emotion-5"
+                    >
+                      Marriage
                       <div
-                        className="section-wrapper"
-                      >
-                        <h2>
-                          Residence
-                        </h2>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            Address
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-              ,
-              
-               
-               
-              
-            
-                          </span>
-                        </div>
-                      </div>
+                        className="notice"
+                      />
+                    </h1>
+                    <span />
+                    <div
+                      className="emotion-9"
+                    >
                       <div
-                        className="section-wrapper"
+                        className="emotion-8"
                       >
-                        <h2>
-                          Marriage
-                        </h2>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            If Applicable, Blood Relation To Current Partner
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            Marriage Number
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            If Applicable, Status of Last Marriage
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            If Applicable, Status of Civil Union or Domestic Partnership
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-              
-            
-                          </span>
-                        </div>
                         <div
-                          className="field-value-pair"
+                          aria-labelledby="partnerB_bloodRelation-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
-                          <label
-                            className="field"
-                          >
-                            If Applicable, State of Civil Union or Domestic Partnership
-                            : 
-                          </label>
-                          <span
-                            className="value"
+                          <div
+                            className="txt-l"
+                            id="partnerB_bloodRelation-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            
-                          </span>
-                        </div>
-                      </div>
-                      <div
-                        className="section-wrapper"
-                      >
-                        <h2>
-                          Parents
-                        </h2>
-                        <div
-                          className="field-value-pair"
-                        >
+                            Are you related by blood or marriage to your future spouse?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                            <span
+                              className="tool-tip__wrapper emotion-7"
+                            >
+                              <div
+                                className="icon"
+                              />
+                              <div
+                                className="msg"
+                              >
+                                This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+                              </div>
+                            </span>
+                          </div>
                           <label
-                            className="field"
+                            className="ra  "
                           >
-                            Parent 1
-                            : 
+                            <input
+                              className="ra-f"
+                              name="partnerB_bloodRelation"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
                           </label>
-                          <span
-                            className="value"
-                          >
-                            /
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
                           <label
-                            className="field"
+                            className="ra  "
                           >
-                            Parent 2
-                            : 
+                            <input
+                              className="ra-f"
+                              name="partnerB_bloodRelation"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
                           </label>
-                          <span
-                            className="value"
-                          >
-                            /
-                          </span>
                         </div>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-9"
+                    >
+                      <div
+                        className="emotion-8"
+                      >
                         <div
-                          className="field-value-pair"
+                          aria-labelledby="partnerB_marriedBefore-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
+                          <div
+                            className="txt-l"
+                            id="partnerB_marriedBefore-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
+                          >
+                            Have you ever been married before?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                          </div>
                           <label
-                            className="field"
+                            className="ra  "
                           >
-                            Status of Marriage at Time of Birth
-                            : 
+                            <input
+                              className="ra-f"
+                              name="partnerB_marriedBefore"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
                           </label>
-                          <span
-                            className="value"
+                          <label
+                            className="ra  "
                           >
-                            
-                          </span>
+                            <input
+                              className="ra-f"
+                              name="partnerB_marriedBefore"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
+                          </label>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div>
+                    
                     <div
-                      className="emotion-5"
+                      className="emotion-24"
                     >
                       <div
-                        className="wrapper-title"
-                      >
-                        <h1>
-                          Person 2
-                        </h1>
-                      </div>
-                      <div
-                        className="wrapper-btn"
+                        className="emotion-33"
                       >
-                        <button
-                          className="btn btn--b-sm"
-                          onClick={[Function]}
-                          type="button"
+                        <div
+                          className="emotion-9"
                         >
-                          Edit This Page
-                        </button>
+                          <div
+                            aria-labelledby="partnerB_partnershipType-groupLabel"
+                            className="radio-group__label"
+                            role="group"
+                          >
+                            <div
+                              className="txt-l"
+                              id="partnerB_partnershipType-groupLabel"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                }
+                              }
+                            >
+                              Were you ever a member of a civil union or domestic partnership?
+                              <span
+                                className="t--req"
+                                style={
+                                  Object {
+                                    "display": "flex",
+                                    "paddingLeft": "0.25em",
+                                  }
+                                }
+                              >
+                                Required
+                              </span>
+                              <span
+                                className="tool-tip__wrapper emotion-7"
+                              >
+                                <div
+                                  className="icon"
+                                />
+                                <div
+                                  className="msg"
+                                >
+                                  This information is collected as required by the Massachusetts State Marriage Intention Form.
+                                </div>
+                              </span>
+                            </div>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="CIV"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a civil union
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="DOM"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                Yes, a domestic partnership
+                              </span>
+                            </label>
+                            <label
+                              className="ra  "
+                            >
+                              <input
+                                className="ra-f"
+                                name="partnerB_partnershipType"
+                                onChange={[Function]}
+                                type="radio"
+                                value="N/A"
+                              />
+                              <span
+                                className="ra-l"
+                              >
+                                No
+                              </span>
+                            </label>
+                          </div>
+                        </div>
                       </div>
+                      
                     </div>
-                    <div
-                      className="emotion-6"
+                  </div>
+                  <div
+                    className="emotion-24"
+                  >
+                    <h1
+                      className="emotion-5"
                     >
+                      Parents
                       <div
-                        className="section-wrapper"
+                        className="notice"
                       >
-                        <h2>
-                          Personal Information
-                        </h2>
-                        <div
-                          className="field-value-pair"
+                        Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
+                        <span
+                          className="tool-tip__wrapper emotion-36"
                         >
-                          <label
-                            className="field"
-                          >
-                            Legal Name
-                            : 
-                          </label>
-                          <span
-                            className="value"
+                          <div
+                            className="icon"
+                          />
+                          <div
+                            className="msg"
                           >
-                             
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
+                            This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
+                          </div>
+                        </span>
+                      </div>
+                    </h1>
+                    <span />
+                    <div
+                      className="emotion-45"
+                    >
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-507056287"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
-                          <label
-                            className="field"
-                          >
-                            Last Name to be Used After Marriage
-                            : 
-                          </label>
                           <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                              }
+                            }
                           >
-                            Occupation
-                            : 
-                          </label>
+                            Parent 1 - First Middle Last Name
+                          </span>
                           <span
-                            className="value"
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "flexGrow": 1,
+                              }
+                            }
                           >
-                            
+                            Required
                           </span>
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f   "
+                          id="input-507056287"
+                          maxLength={38}
+                          name="partnerB_parentA_Name"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
+                        <div
+                          className="t--subinfo t--err m-b100 m-t100"
+                        >
+                           
                         </div>
                       </div>
-                      <div
-                        className="section-wrapper"
-                      >
-                        <h2>
-                          Date and Place of Birth
-                        </h2>
-                        <div
-                          className="field-value-pair"
+                      <div>
+                        <label
+                          className="txt-l "
+                          htmlFor="input-4196106810"
+                          style={
+                            Object {
+                              "display": "flex",
+                            }
+                          }
                         >
-                          <label
-                            className="field"
-                          >
-                            Date of Birth
-                            : 
-                          </label>
                           <span
-                            className="value"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "marginRight": "0.5em",
+                              }
+                            }
                           >
-                            
+                            Parent 1 - Family Name/Last Name At the time of their birth or adoption
                           </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            BirthPlace
-                            : 
-                          </label>
                           <span
-                            className="value"
+                            aria-hidden="true"
+                            className="t--req"
+                            style={
+                              Object {
+                                "display": "flex",
+                                "flexGrow": 1,
+                              }
+                            }
                           >
-                            , 
+                            Required
                           </span>
-                        </div>
-                      </div>
-                      <div
-                        className="section-wrapper"
-                      >
-                        <h2>
-                          Residence
-                        </h2>
+                        </label>
+                        <label
+                          className="notice emotion-6"
+                        >
+                          This information might be found on your birth certificate.
+                        </label>
+                        <input
+                          aria-label=""
+                          className="txt-f   "
+                          id="input-4196106810"
+                          maxLength={38}
+                          name="partnerB_parentA_Surname"
+                          onChange={[Function]}
+                          type="text"
+                          value=""
+                        />
                         <div
-                          className="field-value-pair"
+                          className="t--subinfo t--err m-b100 m-t100"
                         >
-                          <label
-                            className="field"
-                          >
-                            Address
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-              ,
-              
-               
-               
-              
-            
-                          </span>
+                           
                         </div>
                       </div>
                       <div
-                        className="section-wrapper"
+                        className="emotion-9"
                       >
-                        <h2>
-                          Marriage
-                        </h2>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            If Applicable, Blood Relation To Current Partner
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
                         <div
-                          className="field-value-pair"
+                          aria-labelledby="partnerB_additionalParent-groupLabel"
+                          className="radio-group__label"
+                          role="group"
                         >
-                          <label
-                            className="field"
-                          >
-                            Marriage Number
-                            : 
-                          </label>
-                          <span
-                            className="value"
+                          <div
+                            className="txt-l"
+                            id="partnerB_additionalParent-groupLabel"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
+                            Do you have a second parent?
+                            <span
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "paddingLeft": "0.25em",
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                          </div>
                           <label
-                            className="field"
+                            className="ra  "
                           >
-                            If Applicable, Status of Last Marriage
-                            : 
+                            <input
+                              className="ra-f"
+                              name="partnerB_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="1"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              Yes
+                            </span>
                           </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
                           <label
-                            className="field"
+                            className="ra  "
                           >
-                            If Applicable, Status of Civil Union or Domestic Partnership
-                            : 
+                            <input
+                              className="ra-f"
+                              name="partnerB_additionalParent"
+                              onChange={[Function]}
+                              type="radio"
+                              value="0"
+                            />
+                            <span
+                              className="ra-l"
+                            >
+                              No
+                            </span>
                           </label>
-                          <span
-                            className="value"
-                          >
-                            
-              
-            
-                          </span>
                         </div>
+                      </div>
+                      <div
+                        className="emotion-24"
+                      >
                         <div
-                          className="field-value-pair"
+                          className="emotion-43"
                         >
-                          <label
-                            className="field"
-                          >
-                            If Applicable, State of Civil Union or Domestic Partnership
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            
-                          </span>
+                          <div
+                            className="emotion-9"
+                          >
+                            <div
+                              className="emotion-8"
+                            >
+                              <div
+                                aria-labelledby="partnerB_parentsMarriedAtBirth-groupLabel"
+                                className="radio-group__label"
+                                role="group"
+                              >
+                                <div
+                                  className="txt-l"
+                                  id="partnerB_parentsMarriedAtBirth-groupLabel"
+                                  style={
+                                    Object {
+                                      "display": "flex",
+                                    }
+                                  }
+                                >
+                                  Were your parents married at the time of your birth?
+                                  <span
+                                    className="t--req"
+                                    style={
+                                      Object {
+                                        "display": "flex",
+                                        "paddingLeft": "0.25em",
+                                      }
+                                    }
+                                  >
+                                    Required
+                                  </span>
+                                  <span
+                                    className="tool-tip__wrapper emotion-7"
+                                  >
+                                    <div
+                                      className="icon"
+                                    />
+                                    <div
+                                      className="msg"
+                                    >
+                                      This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
+                                    </div>
+                                  </span>
+                                </div>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerB_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="1"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    Yes
+                                  </span>
+                                </label>
+                                <label
+                                  className="ra  "
+                                >
+                                  <input
+                                    className="ra-f"
+                                    name="partnerB_parentsMarriedAtBirth"
+                                    onChange={[Function]}
+                                    type="radio"
+                                    value="0"
+                                  />
+                                  <span
+                                    className="ra-l"
+                                  >
+                                    No
+                                  </span>
+                                </label>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
+                    </div>
+                  </div>
+                </fieldset>
+              </div>
+              <div
+                className="g g--mr emotion-50"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                >
+                  <button
+                    className="lnk emotion-49"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "fontStyle": "italic",
+                          "whiteSpace": "nowrap",
+                        }
+                      }
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={
+                          Object {
+                            "fontStyle": "normal",
+                          }
+                        }
+                      >
+                        ←
+                      </span>
+                       
+                      Back
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={true}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    NEXT
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
+</div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Step 4. Contact Info 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
+  />,
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-14 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-14 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-14 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-13 {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.emotion-13 legend {
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+
+.emotion-13 h2 {
+  margin-bottom: 0;
+  font-family: Montserrat,Arial,sans-serif;
+  font-weight: 700;
+  color: #091f2f;
+}
+
+.emotion-13 .desc {
+  margin: 0.5rem 0 0.75rem;
+  font-family: Lora,Georgia,serif;
+  font-size: 0.9375em;
+  font-weight: 100;
+  color: #58585b;
+  line-height: 1.2em;
+}
+
+.emotion-16 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-16 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-16 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-16 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-16 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-15 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-10 {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.emotion-10 legend {
+  padding-left: 0;
+  font-size: 120%;
+}
+
+.emotion-9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-transition: opacity 0.1s;
+  transition: opacity 0.1s;
+}
+
+.emotion-9 > div {
+  -webkit-flex: 0 0 24%;
+  -ms-flex: 0 0 24%;
+  flex: 0 0 24%;
+}
+
+.emotion-9 > div:last-of-type {
+  -webkit-flex: 0 0 50%;
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+}
+
+.emotion-9 input {
+  -moz-appearance: textfield;
+}
+
+.emotion-9 input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.emotion-9 input::-ms-clear {
+  display: none;
+}
+
+.emotion-9 label {
+  margin-top: 0.5rem;
+}
+
+.emotion-9.disabled {
+  opacity: 0.4;
+}
+
+.emotion-9.disabled * {
+  cursor: not-allowed;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.emotion-3 .progressbar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.emotion-3 .progressbar .nav {
+  display: table;
+  table-layout: fixed;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-weight: bold;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  color: '#58585B';
+}
+
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0.5em;
+  color: black;
+  background: #fff;
+  width: 2%;
+  font-size: 0.85em;
+  vertical-align: middle;
+}
+
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
+}
+
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
+}
+
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed.current {
+  cursor: pointer;
+  color: #fff;
+  background: #1871bd;
+}
+
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused.current {
+  color: #000;
+  cursor: pointer;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  color: #000;
+  cursor: pointer;
+  background: #b0d9ff;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
+  cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
+  }
+}
+
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
+}
+
+.emotion-17 {
+  padding: 0px;
+}
+
+.css-1aiow01 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1b8rdz8 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1jy3mvz .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-vfjwkx .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-wvkemw .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1ahsdhq .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.css-1nb9jwk .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-4 {
+  color: #091f2f;
+  font-weight: 700;
+  font-size: 1.125em;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  border-bottom: 4px solid #091f2f;
+  padding-bottom: 0.25em;
+}
+
+.emotion-12 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-12 h4 {
+  font-size: 1.25rem;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-7 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 > div {
+    width: 50%;
+  }
+
+  .emotion-7 .txt-f {
+    width: 90%;
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-7 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-7 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-7 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-7 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-7 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-7 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-7 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.emotion-6 .contact-fields {
+  width: calc(50% - 10px);
+  margin-bottom: 10px;
+}
+
+.emotion-6 .contact-fields label:first-child {
+  margin-top: 1em;
+}
+
+.emotion-6 .contact-fields input.txt-f {
+  width: 100%;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-11 .ra-l {
+  font-size: 0.9375em;
+}
+
+.emotion-11 > div {
+  text-align: left;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-11 > div {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+}
+
+.emotion-11 > .RADIOGROUP label {
+  display: block;
+}
+
+.emotion-11 h3 {
+  font-family: Montserrat,Arial,sans-serif !important;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.emotion-11 .notice {
+  font-size: 0.8125em;
+  clear: both;
+  min-height: 1px;
+  overflow: hidden;
+  display: block;
+  margin: 0.25em 0 0.75em 0;
+  line-height: 1.5em;
+}
+
+.emotion-11 .emotion-5:after {
+  content: '&nbsp;';
+  opacity: 0;
+}
+
+.emotion-8 {
+  padding-bottom: 0.25rem;
+  marginBottom: 0;
+  font-weight: 700;
+  color: #091f2f;
+  border-bottom: 4px solid #091f2f;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  font-size: 1.125rem !important;
+}
+
+<div
+    className="mn--full-ie"
+  >
+    <div
+      className="mn mn--full "
+    >
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
+      <div
+        className="p-t300"
+      >
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
+        >
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
+      >
+        <div
+          aria-live="polite"
+          className="b-c"
+        >
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 4 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Contact Info
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-17"
+            >
+              <div
+                className="emotion-14"
+              >
+                <fieldset
+                  className=" emotion-13"
+                >
+                  <legend>
+                    <h2
+                      className="emotion-4"
+                    >
+                      Contact Info
+                    </h2>
+                  </legend>
+                  <div
+                    className="desc"
+                  >
+                    Please share the best email and phone number to get in contact with you. This will be used to contact you about your appointment.
+                  </div>
+                  <div
+                    className="emotion-12"
+                  >
+                    <div
+                      className="emotion-7"
+                    >
                       <div
-                        className="section-wrapper"
+                        className="emotion-6"
                       >
-                        <h2>
-                          Parents
-                        </h2>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
-                          >
-                            Parent 1
-                            : 
-                          </label>
-                          <span
-                            className="value"
-                          >
-                            /
-                          </span>
-                        </div>
                         <div
-                          className="field-value-pair"
+                          className="contact-fields"
                         >
                           <label
-                            className="field"
+                            className="txt-l "
+                            htmlFor="input-2778663327"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            Parent 2
-                            : 
+                            <span
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              EMail Address
+                            </span>
+                            <span
+                              aria-hidden="true"
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "flexGrow": 1,
+                                }
+                              }
+                            >
+                              Required
+                            </span>
                           </label>
-                          <span
-                            className="value"
+                          <input
+                            aria-label=""
+                            className="txt-f   "
+                            id="input-2778663327"
+                            name="email"
+                            onChange={[Function]}
+                            required={true}
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            className="t--subinfo t--err m-b100 m-t100"
                           >
-                            /
-                          </span>
+                             
+                          </div>
                         </div>
                         <div
-                          className="field-value-pair"
+                          className="contact-fields"
                         >
                           <label
-                            className="field"
+                            className="txt-l "
+                            htmlFor="input-1813726221"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            Status of Marriage at Time of Birth
-                            : 
+                            <span
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              Confirm EMail Address
+                            </span>
+                            <span
+                              aria-hidden="true"
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "flexGrow": 1,
+                                }
+                              }
+                            >
+                              Required
+                            </span>
                           </label>
-                          <span
-                            className="value"
+                          <input
+                            aria-label=""
+                            className="txt-f   "
+                            id="input-1813726221"
+                            name="emailConfirm"
+                            onChange={[Function]}
+                            required={true}
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            className="t--subinfo t--err m-b100 m-t100"
                           >
-                            
-                          </span>
+                             
+                          </div>
                         </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div>
-                    <div
-                      className="emotion-5"
-                    >
-                      <div
-                        className="wrapper-title"
-                      >
-                        <h1>
-                          Contact Information
-                        </h1>
-                      </div>
-                      <div
-                        className="wrapper-btn"
-                      >
-                        <button
-                          className="btn btn--b-sm"
-                          onClick={[Function]}
-                          type="button"
-                        >
-                          Edit This Page
-                        </button>
-                      </div>
-                    </div>
-                    <div
-                      className="emotion-6"
-                    >
-                      <div
-                        className="section-wrapper"
-                      >
-                        <h2>
-                          Personal Information
-                        </h2>
                         <div
-                          className="field-value-pair"
+                          className="contact-fields"
                         >
                           <label
-                            className="field"
-                          >
-                            Email
-                            : 
-                          </label>
-                          <span
-                            className="value"
+                            className="txt-l "
+                            htmlFor="input-1267882554"
+                            style={
+                              Object {
+                                "display": "flex",
+                              }
+                            }
                           >
-                            
-                          </span>
-                        </div>
-                        <div
-                          className="field-value-pair"
-                        >
+                            <span
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "marginRight": "0.5em",
+                                  "whiteSpace": "nowrap",
+                                }
+                              }
+                            >
+                              Phone Number
+                            </span>
+                            <span
+                              aria-hidden="true"
+                              className="t--req"
+                              style={
+                                Object {
+                                  "display": "flex",
+                                  "flexGrow": 1,
+                                }
+                              }
+                            >
+                              Required
+                            </span>
+                          </label>
                           <label
-                            className="field"
+                            className="notice emotion-5"
                           >
-                            Phone #
-                            : 
+                            Numbers only, no spaces or dashes needed.
                           </label>
-                          <span
-                            className="value"
+                          <input
+                            aria-label=""
+                            className="txt-f   "
+                            id="input-1267882554"
+                            maxLength={14}
+                            minLength={10}
+                            name="dayPhone"
+                            onChange={[Function]}
+                            onKeyDown={[Function]}
+                            placeholder="(___) ___-____"
+                            required={true}
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            className="t--subinfo t--err m-b100 m-t100"
                           >
-                            
-                          </span>
+                             
+                          </div>
                         </div>
-                        <div
-                          className="field-value-pair"
-                        >
-                          <label
-                            className="field"
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-11"
+                      style={
+                        Object {
+                          "paddingTop": "1.5rem",
+                        }
+                      }
+                    >
+                      <fieldset
+                        className="emotion-10"
+                      >
+                        <div>
+                          <legend
+                            style={
+                              Object {
+                                "width": "100%",
+                              }
+                            }
                           >
-                            Appointment Date
-                            : 
-                          </label>
-                          <span
-                            className="value"
+                            <h2
+                              className="emotion-8"
+                              style={
+                                Object {
+                                  "marginBottom": "1.5rem",
+                                }
+                              }
+                            >
+                              Appointment Date
+                            </h2>
+                          </legend>
+                          <div
+                            className=" emotion-9"
                           >
-                            
-                          </span>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="appointmentDate-month"
+                              >
+                                Month
+                                <span
+                                  aria-hidden="true"
+                                  className="t--req"
+                                  style={
+                                    Object {
+                                      "marginLeft": "0.35em",
+                                    }
+                                  }
+                                >
+                                  Required
+                                </span>
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="appointmentDate-month"
+                                max="12"
+                                maxLength={2}
+                                min="1"
+                                name="month"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="MM"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="appointmentDate-day"
+                              >
+                                Day
+                                <span
+                                  aria-hidden="true"
+                                  className="t--req"
+                                  style={
+                                    Object {
+                                      "marginLeft": "0.35em",
+                                    }
+                                  }
+                                >
+                                  Required
+                                </span>
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="appointmentDate-day"
+                                max="31"
+                                maxLength={2}
+                                min="1"
+                                name="day"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="DD"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                            <div>
+                              <label
+                                className="txt-l"
+                                htmlFor="appointmentDate-year"
+                              >
+                                Year
+                                <span
+                                  aria-hidden="true"
+                                  className="t--req"
+                                  style={
+                                    Object {
+                                      "marginLeft": "0.35em",
+                                    }
+                                  }
+                                >
+                                  Required
+                                </span>
+                              </label>
+                              <input
+                                className="txt-f"
+                                id="appointmentDate-year"
+                                max="9999"
+                                maxLength={4}
+                                min={2024}
+                                name="year"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="YYYY"
+                                type="number"
+                                value=""
+                              />
+                            </div>
+                          </div>
                         </div>
-                      </div>
+                      </fieldset>
                     </div>
                   </div>
-                </div>
+                </fieldset>
               </div>
               <div
-                className="g g--mr emotion-14"
+                className="g g--mr emotion-16"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-13"
+                    className="lnk emotion-15"
                     onClick={[Function]}
                     type="button"
                   >
@@ -86838,11 +86095,11 @@ Array [
                 >
                   <button
                     className="btn btn--b-sm"
-                    disabled={false}
+                    disabled={true}
                     onClick={[Function]}
                     type="button"
                   >
-                    Submit
+                    NEXT
                   </button>
                 </div>
               </div>
@@ -86905,395 +86162,1477 @@ Array [
 ",
       }
     }
-    style={
-      Object {
-        "position": "relative",
-        "zIndex": 2,
-      }
-    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
+`;
+
+exports[`Storyshots Marriage Intention/Form Step 5. Review/Full Form 1`] = `
+Array [
+  <a
+    className="btn a11y--h a11y--f"
+    href="#content-start"
+    onClick={[Function]}
+    style={
+      Object {
+        "margin": 4,
+      }
+    }
+    tabIndex={1}
+  >
+    Jump to content
+  </a>,
+  <input
+    aria-label="Open Boston.gov menu"
+    className="brg-tr"
+    id="brg-tr"
+    onKeyDown={[Function]}
+    type="checkbox"
+  />,
+  <nav
+    aria-label="Boston.gov menu"
+    className="nv-m"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+  <div class=\\"nv-m-h\\">
+      <div class=\\"nv-m-h-ic\\">
+        <a href=\\"https://www.boston.gov/\\" title=\\"Go to home page\\">
+          <img src=\\"https://patterns.boston.gov/images/b-dark.svg\\" title=\\"B\\" aria-hidden=\\"true\\" class=\\"nv-m-h-i\\">
+        </a>
+      </div>
+      <div id=\\"nv-m-h-t\\" class=\\"nv-m-h-t\\">&#xA0;</div>
+  </div>
+  <div class=\\"nv-m-c\\">
+    
+
+<ul class=\\"nv-m-c-l\\"><li class=\\"nv-m-c-l-i is-l first leaf menu-mlid-763366 nv-m-c-a--y\\"><a href=\\"http://www.cityofboston.gov/311/\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p three-one-one\\">Help / 311</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-210101\\"><a href=\\"https://www.boston.gov/homepage\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Home</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171721\\"><a href=\\"https://www.boston.gov/guides\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Guides to Boston</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-171726\\"><a href=\\"https://www.boston.gov/departments\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Departments</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-1675906\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Public Notices</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354776\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Pay and apply</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-2354781\\"><a href=\\"https://www.boston.gov/career-center\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Work for the City</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-885866\\"><a href=\\"https://www.boston.gov/events\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Events</a></li>
+<li class=\\"nv-m-c-l-i is-l leaf menu-mlid-202946\\"><a href=\\"https://www.boston.gov/news\\" class=\\"nv-m-c-a nv-m-c-a--p\\">News</a></li>
+<li class=\\"nv-m-c-l-i is-e expanded menu-mlid-171731\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Places</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-2354766\\"><a href=\\"https://www.boston.gov/cemeteries\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Cemeteries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354751\\"><a href=\\"https://www.boston.gov/community-centers\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Community centers</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-184086\\"><a href=\\"https://www.boston.gov/departments/landmarks-commission#historic-districts\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Historic Districts</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171801\\"><a href=\\"http://www.bpl.org/general/branch.htm\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Libraries</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354771\\"><a href=\\"https://www.boston.gov/neighborhoods\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Neighborhoods</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-2354761\\"><a href=\\"https://www.boston.gov/parks-and-playgrounds\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Parks and playgrounds</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-652731\\"><a href=\\"http://www.bostonpublicschools.org/Page/628\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Schools</a></li>
+</ul></li>
+<li class=\\"nv-m-c-l-i is-e last expanded menu-mlid-171741\\"><a href=\\"https://www.boston.gov/#\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p nolink\\">Government</a><ul class=\\"nv-m-c-l-l\\"><li class=\\"nv-m-c-bc nv-m-c-b--h\\"><button class=\\"nv-m-c-b\\">Back</button></li><li class=\\"nv-m-c-l-l-i is-l first leaf menu-mlid-171851\\"><a href=\\"https://www.boston.gov/departments/mayors-office\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">The Mayor&apos;s Office</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171856\\"><a href=\\"https://www.boston.gov/departments/city-council\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Council</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171861\\"><a href=\\"https://www.boston.gov/departments/city-clerk\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City Clerk</a></li>
+<li class=\\"nv-m-c-l-l-i is-l leaf menu-mlid-171866\\"><a href=\\"https://www.boston.gov/departments/election\\" title=\\"\\" class=\\"nv-m-c-a nv-m-c-a--p\\">Elections</a></li>
+<li class=\\"nv-m-c-l-l-i is-l last leaf menu-mlid-178041\\"><a href=\\"https://www.boston.gov/departments/311/city-boston-government\\" class=\\"nv-m-c-a nv-m-c-a--p\\">City government</a></li>
+</ul></li>
+</ul>  </div>
+",
+      }
+    }
   />,
-]
-`;
+  .emotion-1 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 
-exports[`Storyshots Marriage Intention/Form Pages Step 5. Review/Person Info View 1`] = `
 .emotion-0 {
+  color: #d22d23;
+}
+
+.emotion-12 fieldset + fieldset {
+  margin-top: 2rem;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-12 fieldset + fieldset {
+    margin-top: 4rem;
+  }
+
+  .emotion-12 fieldset + fieldset .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-14 {
+  text-align: center;
+}
+
+@media screen and (min-width:480px) {
+  .emotion-14 {
+    margin-top: 2.5rem;
+    text-align: left;
+  }
+
+  .emotion-14 > div {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-14 > div.ta-r > button {
+    margin-left: auto;
+  }
+
+  .emotion-14 .lnk {
+    padding-left: 0;
+  }
+}
+
+.emotion-13 {
+  padding: 1.25rem !important;
+  padding-left: 0 !important;
+}
+
+.emotion-2 {
+  padding-right: 0;
+}
+
+@media screen and (min-width:980px) {
+  .emotion-2 {
+    font-size: 34px;
+  }
+}
+
+.emotion-3 {
+  display: grid;
+  margin: auto;
+  margin-top: 0.75rem;
+  grid-auto-columns: 1fr;
+  grid-auto-rows: 1fr;
+}
+
+.emotion-3 .progressbar {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  overflow: hidden;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 1em 0;
-  color: #fff;
+  width: 100%;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
 }
 
-.emotion-0 .wrapper-title {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+.emotion-3 .progressbar .nav {
+  display: table;
+  table-layout: fixed;
+  text-align: center;
+  line-height: normal;
+  font-style: normal;
+  font-weight: bold;
+  font-family: Montserrat,Arial,sans-serif;
+  text-transform: uppercase;
+  color: '#58585B';
 }
 
-.emotion-0 .wrapper-title h1,
-.emotion-0 .wrapper-title h2 {
-  color: #091f2f;
-  font-size: 1.5625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-family: Montserrat,Arial,sans-serif;
-  line-height: 1.875em;
+.emotion-3 .progressbar .nav a {
+  display: table-cell;
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  border-left-width: 0;
+  padding: 0.85em 0.5em;
+  color: black;
+  background: #fff;
+  width: 2%;
+  font-size: 0.85em;
+  vertical-align: middle;
 }
 
-.emotion-0 .wrapper-title h2 {
-  font-size: 1.125rem;
+.emotion-3 .progressbar .nav a:last-child {
+  grid-column-start: 2;
 }
 
-.emotion-0 .wrapper-btn .btn {
-  color: #091f2f;
-  background: #fff;
-  border: 2px solid #091f2f;
+.emotion-3 .progressbar .nav a:first-child {
+  border-left-width: 1px;
 }
 
-.emotion-0 .wrapper-btn .btn:hover {
+.emotion-3 .progressbar .nav a.completed,
+.emotion-3 .progressbar .nav a.completed.current {
+  cursor: pointer;
   color: #fff;
   background: #1871bd;
 }
 
-@media screen and (max-width:480px) {
-  .emotion-0 .wrapper-title h1 {
-    line-height: 1.25em;
+.emotion-3 .progressbar .nav a.uncompleted {
+  background: #C8C8C8;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused.current {
+  color: #000;
+  cursor: pointer;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.focused,
+.emotion-3 .progressbar .nav a.completed:hover {
+  color: #000;
+  cursor: pointer;
+  background: #b0d9ff;
+}
+
+.emotion-3 .progressbar .nav a.done,
+.emotion-3 .progressbar .nav a.done:hover,
+.emotion-3 .progressbar .nav a.completed.focused.done.current {
+  color: #000;
+  cursor: default;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .nav a.completed.current {
+  color: #000;
+  background: #f2f2f2;
+}
+
+.emotion-3 .progressbar .progress-text {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  font-style: italic;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+
+.emotion-3 .progressbar .progress-text .mobile {
+  display: none;
+}
+
+@media screen and (max-width:540px) {
+  .emotion-3 {
+    max-width: 25.875em;
+  }
+
+  .emotion-3 .progressbar .nav a {
+    overflow: hidden;
+    min-width: 10px;
+    padding: 0.5em 0;
+    text-indent: -500px;
+    line-height: 0;
+  }
+
+  .emotion-3 .progressbar .progress-text .mobile {
+    display: inline-block;
   }
 }
 
-.emotion-1 .section-wrapper {
-  font-size: 0.9375rem;
-  font-family: Montserrat,Arial,sans-serif;
-  margin-bottom: 1em;
+@media (min-width:541px) and (max-width:1024px) {
+  .emotion-3 .progressbar .nav a {
+    padding: 0.85em 0;
+    font-size: 0.55rem;
+  }
 }
 
-.emotion-1 .section-wrapper h2 {
-  color: #091f2f;
-  font-size: 1.125rem;
+.emotion-15 {
+  padding: 0px;
+}
+
+.emotion-11 {
+  font-size: 1.5em;
+  line-height: 1.5em;
+  margin-top: 1em;
+  font-size: 0.9378em;
+}
+
+.emotion-11 h2 {
+  font-size: 1.5rem;
+}
+
+.emotion-11 h4 {
+  font-size: 1.25rem;
+}
+
+.emotion-11 label {
   font-weight: bold;
-  text-transform: uppercase;
-  margin-bottom: 0.5em;
 }
 
-.emotion-1 .section-wrapper .field-value-pair .field {
-  color: #58585b;
-  font-size: 0.9375rem;
+.emotion-4 {
+  font-size: 0.9378rem;
+  margin-bottom: 2em;
+  line-height: 1.4em;
+  color: #091f2f;
+  font-family: Lora;
+}
+
+.emotion-4 H1 {
   font-weight: 700;
+  font-size: 1.88em;
   text-transform: uppercase;
+  font-family: Montserrat !important;
+  line-height: 1.21em;
+  margin-bottom: 0em;
 }
 
-.emotion-1 .section-wrapper .field-value-pair .value {
-  font-weight: normal;
-}
-
-<div>
-  <div
-    className="emotion-0"
-  >
-    <div
-      className="wrapper-title"
-    >
-      <h1>
-        Person A
-      </h1>
-    </div>
-    <div
-      className="wrapper-btn"
-    >
-      <button
-        className="btn btn--b-sm"
-        onClick={[Function]}
-        type="button"
-      >
-        Edit This Page
-      </button>
-    </div>
-  </div>
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="section-wrapper"
-    >
-      <h2>
-        Personal Information
-      </h2>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Legal Name
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Phillip Kelly
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Last Name to be Used After Marriage
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Kelly
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Occupation
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Developer
-        </span>
-      </div>
-    </div>
-    <div
-      className="section-wrapper"
-    >
-      <h2>
-        Date and Place of Birth
-      </h2>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Date of Birth
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Sep 23, 1982
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          BirthPlace
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          La Ceiba,  HONDURAS
-        </span>
-      </div>
-    </div>
-    <div
-      className="section-wrapper"
-    >
-      <h2>
-        Residence
-      </h2>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Address
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          
-          100 Howard Ave. Apt 2,
-          Boston
-          MA 
-          02125 
-           USA
-        
-        </span>
-      </div>
-    </div>
-    <div
-      className="section-wrapper"
-    >
-      <h2>
-        Marriage
-      </h2>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          If Applicable, Blood Relation To Current Partner
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Yes
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Blood Relation Description
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Third Cousin's Removed
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Marriage Number
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          2nd
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          If Applicable, Status of Last Marriage
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Void or annulled by court order
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          If Applicable, Status of Civil Union or Domestic Partnership
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Yes
-        </span>
-      </div>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          If Applicable, State of Civil Union or Domestic Partnership
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Domestic Partnership
-        </span>
-      </div>
-    </div>
+.emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 1em 0;
+  color: #fff;
+}
+
+.emotion-5 .wrapper-title {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.emotion-5 .wrapper-title h1,
+.emotion-5 .wrapper-title h2 {
+  color: #091f2f;
+  font-size: 1.5625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: Montserrat,Arial,sans-serif;
+  line-height: 1.875em;
+}
+
+.emotion-5 .wrapper-title h2 {
+  font-size: 1.125rem;
+}
+
+.emotion-5 .wrapper-btn .btn {
+  color: #091f2f;
+  background: #fff;
+  border: 2px solid #091f2f;
+}
+
+.emotion-5 .wrapper-btn .btn:hover {
+  color: #fff;
+  background: #1871bd;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-5 .wrapper-title h1 {
+    line-height: 1.25em;
+  }
+}
+
+.emotion-6 .section-wrapper {
+  font-size: 0.9375rem;
+  font-family: Montserrat,Arial,sans-serif;
+  margin-bottom: 2em;
+}
+
+.emotion-6 .section-wrapper h2 {
+  color: #091f2f;
+  font-size: 1.125rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 0.5em;
+}
+
+.emotion-6 .section-wrapper .field-value-pair {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: 1em;
+}
+
+.emotion-6 .section-wrapper .field-value-pair label {
+  font-weight: normal;
+}
+
+.emotion-6 .section-wrapper .field-value-pair .field {
+  display: inline-block;
+  width: 60%;
+  color: #58585b;
+  font-size: 0.9375rem;
+  text-transform: uppercase;
+}
+
+.emotion-6 .section-wrapper .field-value-pair .value {
+  display: inline-block;
+  width: 40%;
+  font-weight: normal;
+}
+
+<div
+    className="mn--full-ie"
+  >
     <div
-      className="section-wrapper"
+      className="mn mn--full "
     >
-      <h2>
-        Parents
-      </h2>
-      <div
-        className="field-value-pair"
-      >
-        <label
-          className="field"
-        >
-          Parent 1
-          : 
-        </label>
-        <span
-          className="value"
-        >
-          Mother F. Mother L.
-        </span>
-      </div>
+      <input
+        aria-hidden="true"
+        className="s-tr"
+        id="s-tr"
+        type="checkbox"
+      />
+      <header
+        className="h"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+  <label for=\\"brg-tr\\" class=\\"brg-b\\">
+    <div class=\\"brg\\">
+      <span class=\\"brg-c\\">
+        <span class=\\"brg-c-i\\"></span>
+      </span>
+      <span class=\\"brg-t\\"><span class=\\"a11y--h\\">Toggle </span>Menu</span>
+    </div>
+  </label>
+
+  <div class=\\"lo lo--abs\\">
+    <div class=\\"lo-l\\">
+      <a href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\">
+        <img src=\\"https://patterns.boston.gov/images/public/logo.svg\\" alt=\\"Home | Boston.gov\\" class=\\"lo-i\\">
+      </a>
+      <span class=\\"lo-t\\"><a href=\\"https://www.boston.gov/mayor\\">Mayor Michelle Wu</a></span>
+    </div>
+  </div>
+  <a id=\\"seal\\" href=\\"https://www.boston.gov/\\" title=\\"Home | Boston.gov\\" rel=\\"home\\" class=\\"s\\">
+  <img src=\\"https://patterns.boston.gov/images/public/seal.svg\\" alt=\\"Home | Boston.gov\\" class=\\"s-i\\" />
+</a>
+
+<nav class=\\"nv-h\\">
+  <ul class=\\"nv-h-l\\">
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/pay-and-apply\\" title=\\"Pay and apply\\" class=\\"nv-h-l-a\\">Pay and apply</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"https://www.boston.gov/public-notices\\" title=\\"Public notices\\" class=\\"nv-h-l-a\\">Public notices</a></li>
+    <li class=\\"nv-h-l-i\\"><a href=\\"mailto:feedback@boston.gov\\" title=\\"Feedback\\" class=\\"nv-h-l-a\\" onClick=\\"document.getElementById(&quot;contactForm&quot;).show(); return false;\\">Feedback</a></li>
+    <li class=\\"tr nv-h-l-i\\">
+      <a href=\\"https://www.boston.gov/#translate\\" title=\\"Translate\\" class=\\"nv-h-l-a nv-h-l-a--k--s tr-link\\">Translate</a>
+      <ul class=\\"tr-dd\\">
+        <li><span class=\\"notranslate tr-dd-link tr-dd-link--message\\">Loading...</span></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"ht\\">Krey&#xF2;l Ayisyen</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"pt\\">Portugese</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"es\\">Espa&#xF1;ol</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link\\" data-ln=\\"vi\\">Ti&#x1EBF;ng Vi&#x1EC7;t</a></li>
+        <li><a href=\\"https://www.boston.gov/#\\" class=\\"notranslate tr-dd-link tr-dd-link--hidden\\" data-ln=\\"en\\">English</a></li>
+      </ul>
+    </li>
+    <li class=\\"nv-h-l-i\\">
+      <label for=\\"s-tr\\" title=\\"Search\\" class=\\"nv-h-l-a nv-h-l-a--k nv-h-l-a-ic\\" id=\\"searchIcon\\">
+        <svg id=\\"Layer_2\\" aria-label=\\"Search\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 40 41\\"><title>Search</title><path class=\\"nv-h-l-a-i\\" d=\\"M24.2.6C15.8.6 9 7.4 9 15.8c0 3.7 1.4 7.2 3.6 9.8L1.2 37c-.8.8-.8 2 0 2.8.4.4.9.6 1.4.6s1-.2 1.4-.6l11.5-11.5C18 30 21 31 24.2 31c8.4 0 15.2-6.8 15.2-15.2C39.4 7.4 32.6.6 24.2.6zm0 26.5c-6.2 0-11.2-5-11.2-11.2S18 4.6 24.2 4.6s11.2 5 11.2 11.2-5 11.3-11.2 11.3z\\"/></svg>
+      </label>
+    </li>
+  </ul>
+</nav>
+
+<div class=\\"h-s\\">
+  <form class=\\"sf\\" action=\\"https://www.boston.gov/search\\" accept-charset=\\"UTF-8\\" method=\\"get\\">
+    <input name=\\"utf8\\" type=\\"hidden\\" value=\\"&#x2713;\\">
+    <div class=\\"sf-i\\">
+      <input type=\\"text\\" name=\\"query\\" id=\\"query\\" value=\\"\\" placeholder=\\"Search&#x2026;\\" class=\\"sf-i-f\\" autocomplete=\\"off\\" aria-label=\\"Search\\">
+      <button class=\\"sf-i-b\\">Search</button>
+    </div>
+  </form>
+</div>
+  ",
+          }
+        }
+        role="banner"
+      />
       <div
-        className="field-value-pair"
+        className="p-t300"
       >
-        <label
-          className="field"
-        >
-          Parent 2
-          : 
-        </label>
-        <span
-          className="value"
+        <nav
+          aria-label="Breadcrumbs"
+          className="brc p-a300 emotion-1"
         >
-          Father F. Father L.
-        </span>
+          <ul
+            className="brc-l"
+          >
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/"
+              >
+                Home
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments"
+              >
+                Departments
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                href="https://www.boston.gov/departments/registry"
+              >
+                Registry: Birth, death, and marriage and marriage intention
+              </a>
+              <span
+                aria-hidden="true"
+                className="brc-s"
+                style={
+                  Object {
+                    "cursor": "default",
+                  }
+                }
+              >
+                 
+                ›
+                 
+              </span>
+            </li>
+            <li
+              className="brc-l-i"
+            >
+              <a
+                aria-current="page"
+                className="emotion-0"
+                href="/marriageintention"
+              >
+                Marriage Intention
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
       <div
-        className="field-value-pair"
+        className="a11y--content-start"
+        id="content-start"
+      />
+      <main
+        className="b-ff"
       >
-        <label
-          className="field"
-        >
-          Status of Marriage at Time of Birth
-          : 
-        </label>
-        <span
-          className="value"
+        <div
+          aria-live="polite"
+          className="b-c"
         >
-          No
-        </span>
-      </div>
+          <h1
+            className="sh-title emotion-2"
+          >
+            Marriage Intention Application
+          </h1>
+          <div
+            className="emotion-3"
+          >
+            <div
+              className="progressbar"
+            >
+              <div
+                className="nav"
+              >
+                <a
+                  aria-label="Getting Started"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Getting Started"
+                >
+                  Getting Started
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 1"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Person 1"
+                >
+                  Person 1
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Person 2"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Person 2"
+                >
+                  Person 2
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Contact Info"
+                  className="completed"
+                  onClick={[Function]}
+                  title="Contact Info"
+                >
+                  Contact Info
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Review"
+                  className="completed focused current"
+                  onClick={[Function]}
+                  title="Review"
+                >
+                  Review
+                  <span
+                    className="arrow"
+                  />
+                </a>
+                <a
+                  aria-label="Submit"
+                  className="uncompleted"
+                  onClick={[Function]}
+                  title="Submit"
+                >
+                  Submit
+                  <span
+                    className="arrow"
+                  />
+                </a>
+              </div>
+              <div
+                className="progress-text"
+              >
+                <span>
+                  Step 5 of 6
+                </span>
+                <span
+                  className="mobile"
+                >
+                  : 
+                   
+                  Review
+                </span>
+              </div>
+            </div>
+          </div>
+          <section
+            className="m-t500"
+          >
+            <div
+              className="b-c b-c--nbp emotion-15"
+            >
+              <div
+                className="emotion-12"
+              >
+                <div
+                  className="emotion-11"
+                >
+                  <div
+                    className="emotion-4"
+                  >
+                    <h1>
+                      Review Your Information
+                    </h1>
+                    <p>
+                      <label>
+                        Before you submit your application, please check your responses.
+                      </label>
+                       
+                      If you need to make any changes, you can go back and edit the previous pages. Please make sure your information is accurate. During your appointment, we will review and finalize the information you share here and make sure everything’s set before it is printed onto your marriage intention form.
+                    </p>
+                  </div>
+                  <div>
+                    <div
+                      className="emotion-5"
+                    >
+                      <div
+                        className="wrapper-title"
+                      >
+                        <h1>
+                          Person 1
+                        </h1>
+                      </div>
+                      <div
+                        className="wrapper-btn"
+                      >
+                        <button
+                          className="btn btn--b-sm"
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          Edit This Page
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-6"
+                    >
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Personal Information
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Legal Name
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                             
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Last Name to be Used After Marriage
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Occupation
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Date and Place of Birth
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Date of Birth
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            BirthPlace
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            , 
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Residence
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Address
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+              ,
+              
+               
+               
+              
+            
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Marriage
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Blood Relation To Current Partner
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Marriage Number
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Last Marriage
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Civil Union or Domestic Partnership
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+              
+            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, State of Civil Union or Domestic Partnership
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Parents
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Parent 1
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Parent 2
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Status of Marriage at Time of Birth
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <div
+                      className="emotion-5"
+                    >
+                      <div
+                        className="wrapper-title"
+                      >
+                        <h1>
+                          Person 2
+                        </h1>
+                      </div>
+                      <div
+                        className="wrapper-btn"
+                      >
+                        <button
+                          className="btn btn--b-sm"
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          Edit This Page
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-6"
+                    >
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Personal Information
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Legal Name
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                             
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Last Name to be Used After Marriage
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Occupation
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Date and Place of Birth
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Date of Birth
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            BirthPlace
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            , 
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Residence
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Address
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+              ,
+              
+               
+               
+              
+            
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Marriage
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Blood Relation To Current Partner
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Marriage Number
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Last Marriage
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, Status of Civil Union or Domestic Partnership
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+              
+            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            If Applicable, State of Civil Union or Domestic Partnership
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Parents
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Parent 1
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Parent 2
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            /
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Status of Marriage at Time of Birth
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <div
+                      className="emotion-5"
+                    >
+                      <div
+                        className="wrapper-title"
+                      >
+                        <h1>
+                          Contact Information
+                        </h1>
+                      </div>
+                      <div
+                        className="wrapper-btn"
+                      >
+                        <button
+                          className="btn btn--b-sm"
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          Edit This Page
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      className="emotion-6"
+                    >
+                      <div
+                        className="section-wrapper"
+                      >
+                        <h2>
+                          Personal Information
+                        </h2>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Email
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Phone #
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                        <div
+                          className="field-value-pair"
+                        >
+                          <label
+                            className="field"
+                          >
+                            Appointment Date
+                            : 
+                          </label>
+                          <span
+                            className="value"
+                          >
+                            
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="g g--mr emotion-14"
+              >
+                <div
+                  className="t--info g--6 m-b500"
+                >
+                  <button
+                    className="lnk emotion-13"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      style={
+                        Object {
+                          "fontStyle": "italic",
+                          "whiteSpace": "nowrap",
+                        }
+                      }
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={
+                          Object {
+                            "fontStyle": "normal",
+                          }
+                        }
+                      >
+                        ←
+                      </span>
+                       
+                      Back
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="g--6 ta-r m-b500"
+                >
+                  <button
+                    className="btn btn--b-sm"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    Submit
+                  </button>
+                </div>
+              </div>
+              <div
+                className="m-v700"
+              >
+                Questions? Email the Registry Department at
+                 
+                <a
+                  href="mailto:marriage@boston.gov"
+                  onClick={[Function]}
+                >
+                  marriage@boston.gov
+                </a>
+                .
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
     </div>
-  </div>
+  </div>,
+  <footer
+    className="ft"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "
+<div class=\\"ft-c ft-ite\\">
+  <ul class=\\"ft-ll ft-ite-links\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        BOS:311 - Report an issue
+      </a>
+    </li>
+
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/innovation-and-technology/privacy-and-security-statement\\" target=\\"_blank\\" title=\\"\\" class=\\"ft-ll-a\\">Privacy Policy</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/mayors-office/contact-boston-city-hall\\" title=\\"\\" class=\\"ft-ll-a\\">Contact us</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/digital-team/city-boston-alerts-and-notifications\\" title=\\"\\" class=\\"ft-ll-a\\">Alerts and notifications</a>
+    </li>
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"https://www.boston.gov/departments/public-records\\" title=\\"\\" class=\\"ft-ll-a\\">Public records requests</a>
+    </li>
+  </ul>
+
+  <ul class=\\"ft-ll ft-ite-311\\">
+    <li class=\\"ft-ll-i\\">
+      <a href=\\"http://www.cityofboston.gov/311/\\" class=\\"ft-ll-a lnk--yellow\\">
+        <span class=\\"ft-ll-311\\">BOS:311</span>
+        <span class=\\"tablet--hidden\\"> - </span>
+        Report an issue
+      </a>
+    </li>
+  </ul>
 </div>
+",
+      }
+    }
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 2,
+      }
+    }
+  />,
+]
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Step 6. Submit 1`] = `
+exports[`Storyshots Marriage Intention/Form Step 6. Submit 1`] = `
 Array [
   <a
     className="btn a11y--h a11y--f"
@@ -87487,6 +87826,7 @@ Array [
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-3 .progressbar .nav a:last-child {
@@ -87992,107 +88332,6 @@ Array [
 ]
 `;
 
-exports[`Storyshots Marriage Intention/Form Pages Tool-Tip 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
-}
-
-.emotion-0 .icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
-}
-
-.emotion-0 .icon::before {
-  content: '?';
-}
-
-.emotion-0 .tt--info {
-  text-transform: lowercase;
-  padding-left: 3.5px;
-}
-
-.emotion-0 .tt--info::before {
-  content: 'i';
-}
-
-.emotion-0 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
-  padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
-  font-weight: 300;
-  font-style: italic;
-  text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
-}
-
-.emotion-0 .icon:hover + .msg {
-  visibility: visible;
-}
-
-.emotion-2 {
-  margin-top: 4em;
-}
-
-<div>
-  <div>
-    <span
-      className="tool-tip__wrapper emotion-0"
-    >
-      <div
-        className="icon"
-      />
-      <div
-        className="msg"
-      >
-        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
-      </div>
-    </span>
-  </div>
-  <div
-    className="emotion-2"
-  >
-    <span
-      className="tool-tip__wrapper emotion-0"
-    >
-      <div
-        className="icon"
-      />
-      <div
-        className="msg"
-      >
-        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
-      </div>
-    </span>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (default) 1`] = `
 .emotion-0 {
   display: grid;
@@ -88140,6 +88379,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 1: Getting Started (defa
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -88376,6 +88616,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 2: Person 1 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -88612,6 +88853,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 3: Person 2 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -88848,6 +89090,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info - Nav on
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -89084,6 +89327,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 4: Contact Info 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -89320,6 +89564,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 5: Review 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
@@ -89556,6 +89801,7 @@ exports[`Storyshots Marriage Intention/ProgressNav Step 6: Submit 1`] = `
   background: #fff;
   width: 2%;
   font-size: 0.85em;
+  vertical-align: middle;
 }
 
 .emotion-0 .progressbar .nav a:last-child {
diff --git a/services-js/registry-certs/client/common/question-components/styling.tsx b/services-js/registry-certs/client/common/question-components/styling.tsx
index e4751c601..4c6c6fc9e 100644
--- a/services-js/registry-certs/client/common/question-components/styling.tsx
+++ b/services-js/registry-certs/client/common/question-components/styling.tsx
@@ -159,6 +159,10 @@ export const NAME_FIELDS_BASIC_CONTAINER_STYLING = css({
     marginRight: 'auto',
   },
 
+  '.ra-l': {
+    fontSize: '0.9375em',
+  },
+
   '> div': {
     textAlign: 'left',
 
@@ -373,6 +377,8 @@ export const NOTE_BOX_CLASSNAME = 'm-v500 p-a300 br br-a200 br--r lh--300';
 export const SUPPORTING_TEXT_CLASSNAME = 'lh--400 t--s400 m-b500';
 
 export const MARRIAGEINTENTION = css({
+  lineHeight: '1.38em',
+
   h1: {
     paddingBottom: '0.25rem',
     marginBottom: '0',
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
index fd51f0d27..78e7da3e9 100644
--- a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -144,7 +144,7 @@ export const handleChange = (event): void => {
   );
 };
 
-storiesOf('Marriage Intention/Form Pages', module)
+storiesOf('Marriage Intention/Form', module)
   .add('Step 1. Instructions', () => (
     <IndexPage
       currentStep="instructions"
@@ -163,6 +163,44 @@ storiesOf('Marriage Intention/Form Pages', module)
       completedSteps={new Set([0, 1])}
     />
   ))
+  .add('Step 3. Person 2', () => (
+    <IndexPage
+      currentStep="partnerFormB"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2])}
+    />
+  ))
+  .add('Step 4. Contact Info', () => (
+    <IndexPage
+      currentStep="contactInfo"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2, 3])}
+    />
+  ))
+  .add('Step 5. Review/Full Form', () => (
+    <IndexPage
+      currentStep="reviewForms"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2, 3, 4])}
+    />
+  ))
+  .add('Step 6. Submit', () => (
+    <IndexPage
+      currentStep="reviewRequest"
+      siteAnalytics={new GaSiteAnalytics()}
+      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
+      marriageIntentionDao={new MarriageIntentionDao(null as any)}
+      completedSteps={new Set([0, 1, 2, 3, 4, 5])}
+    />
+  ));
+
+storiesOf('Marriage Intention/Form Components', module)
   .add('Step 2. Person 1 - Naming Fields, no surname', () => {
     return (
       <>
@@ -299,33 +337,6 @@ storiesOf('Marriage Intention/Form Pages', module)
       </>
     );
   })
-  .add('Step 3. Person 2', () => (
-    <IndexPage
-      currentStep="partnerFormB"
-      siteAnalytics={new GaSiteAnalytics()}
-      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
-      marriageIntentionDao={new MarriageIntentionDao(null as any)}
-      completedSteps={new Set([0, 1, 2])}
-    />
-  ))
-  .add('Step 4. Contact Info', () => (
-    <IndexPage
-      currentStep="contactInfo"
-      siteAnalytics={new GaSiteAnalytics()}
-      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
-      marriageIntentionDao={new MarriageIntentionDao(null as any)}
-      completedSteps={new Set([0, 1, 2, 3])}
-    />
-  ))
-  .add('Step 5. Review/Full Form', () => (
-    <IndexPage
-      currentStep="reviewForms"
-      siteAnalytics={new GaSiteAnalytics()}
-      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
-      marriageIntentionDao={new MarriageIntentionDao(null as any)}
-      completedSteps={new Set([0, 1, 2, 3, 4])}
-    />
-  ))
   .add('Step 5. Review/Person Info View', () => {
     const marriageIntentionCertificateRequest = makeMarriageIntentionCertificateRequest();
     const bckMethod = (val: boolean): any => {
@@ -338,24 +349,24 @@ storiesOf('Marriage Intention/Form Pages', module)
           marriageIntentionCertificateRequest
         }
         partnerLabel={'A'}
-        firstName={`Phillip`}
-        lastName={`Kelly`}
+        firstName={`Thomas`}
+        lastName={`Menino`}
         suffix={``}
-        middleName={`Benton`}
-        surName={`Kelly`}
-        dob={formatDate(new Date(`1982-09-23T00:00:00.000Z`))}
-        age={`41`}
-        occupation={`Developer`}
+        middleName={`Michael`}
+        surName={`Menino`}
+        dob={formatDate(new Date(`1933-01-01T00:00:00.000Z`))}
+        age={`91`}
+        occupation={`Mayor`}
         address={`
-          ${`100 Howard Ave. Apt 2`},
+          ${`1 City Hall Plaza`},
           ${`Boston`}
           ${getStateFullName(`MA`)} 
-          ${`02125`} 
+          ${`02201-1020`} 
           ${getCountryFullName(`USA`)}
         `}
-        birthCity={`La Ceiba`}
-        birthState={getStateFullName(`Atlantida`)}
-        birthCountry={getCountryFullName(`HND`)}
+        birthCity={`Boston`}
+        birthState={getStateFullName(`MA`)}
+        birthCountry={getCountryFullName(`USA`)}
         marriageNumb={`2nd`}
         lastMarriageStatus={`CRT`}
         partnerShipType={`DOM`}
@@ -389,15 +400,6 @@ storiesOf('Marriage Intention/Form Pages', module)
       />
     );
   })
-  .add('Step 6. Submit', () => (
-    <IndexPage
-      currentStep="reviewRequest"
-      siteAnalytics={new GaSiteAnalytics()}
-      marriageIntentionCertificateRequest={makeMarriageIntentionCertificateRequest()}
-      marriageIntentionDao={new MarriageIntentionDao(null as any)}
-      completedSteps={new Set([0, 1, 2, 3, 4, 5])}
-    />
-  ))
   .add('Tool-Tip', () => {
     const spacing = css(`margin-top: 4em;`);
     const elem = ToolTip({
diff --git a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
index 969dd00b4..660505b97 100644
--- a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
@@ -10,6 +10,8 @@ import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCe
 import QuestionComponent from '../../common/question-components/QuestionComponent';
 
 import { MARRIAGEINTENTION } from '../../common/question-components/styling';
+// import { INSTRUCTIONS_NOTE } from '../styling';
+import { INSTRUCTIONS_NOTE } from './styling';
 
 interface Props {
   marriageIntentionCertificateRequest: MarriageIntentionCertificateRequest;
@@ -70,9 +72,10 @@ export default class Instructions extends Component<Props> {
           </ul>
         </div>
 
-        <div>
-          * If you edit your information you must click save and continue to
-          save your changes
+        <div css={INSTRUCTIONS_NOTE}>
+          <span className="note">Note:</span>
+          If you edit your information, you must click the "save and continue"
+          button to save your changes.
         </div>
       </div>
     );
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
index 249fe6439..12c9fc37e 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
@@ -76,7 +76,7 @@ export const REVIEW_FORM_STYLING = css(`
   .section-wrapper {
     font-size: 0.9375rem;
     font-family: ${SANS};
-    margin-bottom: 1em;
+    margin-bottom: 2em;
 
     h2 {
       color: ${CHARLES_BLUE};
@@ -87,14 +87,22 @@ export const REVIEW_FORM_STYLING = css(`
     }
 
     .field-value-pair {
+      display: flex;
+      margin-bottom: 1em;
+
+      label { font-weight: normal; }
+
       .field {
+        display: inline-block;
+        width: 60%;
         color: ${DEFAULT_TEXT};
         font-size: 0.9375rem;
-        font-weight: 700;
         text-transform: uppercase;
       }
 
       .value {
+        display: inline-block;
+        width: 40%;
         font-weight: normal;
       }
     }
diff --git a/services-js/registry-certs/client/marriageintention/forms/styling.tsx b/services-js/registry-certs/client/marriageintention/forms/styling.tsx
index 1c0e4a4f0..8b577796b 100644
--- a/services-js/registry-certs/client/marriageintention/forms/styling.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/styling.tsx
@@ -1,6 +1,21 @@
 import { css } from '@emotion/core';
 
-import { MEDIA_MEDIUM } from '@cityofboston/react-fleet';
+import { MEDIA_MEDIUM, SANS } from '@cityofboston/react-fleet';
+
+export const INSTRUCTIONS_NOTE = css(`
+  background: #FFE5A0;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.35em 0.75em;
+  // font-family: 'Montserrat';
+  font-family: ${SANS};
+  font-size: 0.95em;
+
+  .note {
+    font-weight: bold;
+    padding-right: 0.25em;
+  }
+`);
 
 export const MI_REVIEW_STYLING = css({
   fontSize: '0.9378em',
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index defa748d1..fbcc82ba3 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -600,7 +600,7 @@ export default class IndexPage extends React.Component<Props, State> {
             >
               <p className="t--s500">
                 If you edit your information you must click the `Save and
-                Continue` button save your changes
+                Continue` button to save your changes
               </p>
             </StatusModal>
           )}

From b0f50e1c70a8aa119e454a9e767204108682ac08 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 7 May 2024 14:49:35 -0400
Subject: [PATCH 19/28] DIG-3256: Marriage Intention UI/UX Updates (EPIC) -
 Update snapshot

---
 .../src/__snapshots__/Storyshots.test.ts.snap |   18 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 4228 +++++++++--------
 2 files changed, 2191 insertions(+), 2055 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index e8b5c3a00..868c54b13 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -3207,7 +3207,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -3256,7 +3256,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -3520,7 +3520,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -3990,7 +3990,7 @@ exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -4110,7 +4110,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -5906,7 +5906,7 @@ exports[`Storyshots ProgressBar default 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -5967,7 +5967,7 @@ exports[`Storyshots ProgressBar first step (interactive demo) 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -6028,7 +6028,7 @@ exports[`Storyshots ProgressBar last step (interactive demo) 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
@@ -6089,7 +6089,7 @@ exports[`Storyshots ProgressBar with task name 1`] = `
   style={
     Object {
       "margin": "2rem auto",
-      "maxWidth": "600px",
+      "maxWidth": "768px",
     }
   }
 >
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 358ad0fa7..589c0aa20 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -9989,330 +9989,376 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
   font-weight: bold;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-7"
   >
-    <div
-      className="emotion-7"
+    <fieldset
+      className=" emotion-2"
     >
-      <fieldset
-        className=" emotion-2"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What was 
-            their
-             name at birth?
-          </h2>
-        </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
+      <legend>
+        <h2
+          className="emotion-0"
         >
-          If 
-          they
-           changed 
+          What was 
           their
-           
-          name at some point, please use the name 
-          they
-           
-          were given at birth. If 
-          they
-           were adopted, use
-           
-          their
-           post-adoption name. Please note, we do not need 
-          their
-           middle name to process your request.
-        </p>
-        <div
-          className="emotion-1"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2048906072"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+           name at birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        If 
+        they
+         changed 
+        their
+         
+        name at some point, please use the name 
+        they
+         
+        were given at birth. If 
+        they
+         were adopted, use
+         
+        their
+         post-adoption name. Please note, we do not need 
+        their
+         middle name to process your request.
+      </p>
+      <div
+        className="emotion-1"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2048906072"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                First Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2048906072"
-              name="firstName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              First Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f   "
+            id="input-2048906072"
+            name="firstName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-1103291528"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+        </div>
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-1103291528"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Last Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-1103291528"
-              name="lastName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Last Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f   "
+            id="input-1103291528"
+            name="lastName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-        <div
-          className="m-t700"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2099238988"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+      </div>
+      <div
+        className="m-t700"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2099238988"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Alternative spelling
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2099238988"
-              name="altSpelling"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Alternative spelling
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f   "
+            id="input-2099238988"
+            name="altSpelling"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-      </fieldset>
-      <div
-        className="m-v700"
+      </div>
+    </fieldset>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-5"
       >
-        <fieldset
-          className="emotion-5"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
+              When were 
+              they
+               born?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-4"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-month"
               >
-                When were 
-                they
-                 born?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-4"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-month"
+                Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value="5"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-day"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dob-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value="5"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-day"
+              >
+                Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value="12"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-year"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dob-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value="12"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-year"
+              >
+                Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-year"
-                  max={2023}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value="1990"
-                />
-              </div>
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dob-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value="1990"
+              />
             </div>
-            
           </div>
-        </fieldset>
-      </div>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
+          
+        </div>
+      </fieldset>
+    </div>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
         }
+      }
+    >
+      <h2
+        className="h3 tt-u"
       >
-        <h2
-          className="h3 tt-u"
+        Birth Certificate is Being Processed
+      </h2>
+      <p>
+        Birth information takes up to two weeks to arrive from a hospital to the City of Boston. Please submit an order after
+         
+        <span
+          className="emotion-6"
         >
-          Birth Certificate is Being Processed
-        </h2>
-        <p>
-          Birth information takes up to two weeks to arrive from a hospital to the City of Boston. Please submit an order after
-           
-          <span
-            className="emotion-6"
-          >
-            5/12/1990
-          </span>
-          . We apologize for the inconvenience. If you have any questions or concerns, please
-           
-          <a
-            href="https://www.boston.gov/still-have-questions-registry"
-            target="_blank"
-          >
-            contact us online
-          </a>
-          , by phone at 617-635-4175, or visit City Hall in person Monday Friday, from 9 a.m. - 4 p.m.
-        </p>
-      </div>
+          5/12/1990
+        </span>
+        . We apologize for the inconvenience. If you have any questions or concerns, please
+         
+        <a
+          href="https://www.boston.gov/still-have-questions-registry"
+          target="_blank"
+        >
+          contact us online
+        </a>
+        , by phone at 617-635-4175, or visit City Hall in person Monday Friday, from 9 a.m. - 4 p.m.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-9"
+  >
     <div
-      className="g g--mr emotion-9"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-8"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-8"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -10500,297 +10546,343 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
   cursor: not-allowed;
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-6"
   >
-    <div
-      className="emotion-6"
+    <fieldset
+      className=" emotion-2"
     >
-      <fieldset
-        className=" emotion-2"
-      >
-        <legend>
-          <h2
-            className="emotion-0"
-          >
-            What was 
-            their
-             name at birth?
-          </h2>
-        </legend>
-        <p
-          className="lh--400 t--s400 m-b500"
+      <legend>
+        <h2
+          className="emotion-0"
         >
-          If 
-          they
-           changed 
+          What was 
           their
-           
-          name at some point, please use the name 
-          they
-           
-          were given at birth. If 
-          they
-           were adopted, use
-           
-          their
-           post-adoption name. Please note, we do not need 
-          their
-           middle name to process your request.
-        </p>
-        <div
-          className="emotion-1"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2048906072"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+           name at birth?
+        </h2>
+      </legend>
+      <p
+        className="lh--400 t--s400 m-b500"
+      >
+        If 
+        they
+         changed 
+        their
+         
+        name at some point, please use the name 
+        they
+         
+        were given at birth. If 
+        they
+         were adopted, use
+         
+        their
+         post-adoption name. Please note, we do not need 
+        their
+         middle name to process your request.
+      </p>
+      <div
+        className="emotion-1"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2048906072"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                First Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2048906072"
-              name="firstName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              First Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f   "
+            id="input-2048906072"
+            name="firstName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-1103291528"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+        </div>
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-1103291528"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Last Name
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-1103291528"
-              name="lastName"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Last Name
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f   "
+            id="input-1103291528"
+            name="lastName"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-        <div
-          className="m-t700"
-        >
-          <div>
-            <label
-              className="txt-l "
-              htmlFor="input-2099238988"
-              style={Object {}}
-            >
-              <span
-                style={
-                  Object {
-                    "marginRight": "0.5em",
-                    "whiteSpace": "nowrap",
-                  }
+      </div>
+      <div
+        className="m-t700"
+      >
+        <div>
+          <label
+            className="txt-l "
+            htmlFor="input-2099238988"
+            style={
+              Object {
+                "display": "flex",
+              }
+            }
+          >
+            <span
+              style={
+                Object {
+                  "display": "flex",
+                  "marginRight": "0.5em",
+                  "whiteSpace": "nowrap",
                 }
-              >
-                Alternative spelling
-              </span>
-            </label>
-            <input
-              aria-label=""
-              className="txt-f  "
-              id="input-2099238988"
-              name="altSpelling"
-              onChange={[Function]}
-              type="text"
-              value=""
-            />
-            <div
-              className="t--subinfo t--err m-b100 m-t100"
+              }
             >
-               
-            </div>
+              Alternative spelling
+            </span>
+          </label>
+          <input
+            aria-label=""
+            className="txt-f   "
+            id="input-2099238988"
+            name="altSpelling"
+            onChange={[Function]}
+            type="text"
+            value=""
+          />
+          <div
+            className="t--subinfo t--err m-b100 m-t100"
+          >
+             
           </div>
         </div>
-      </fieldset>
-      <div
-        className="m-v700"
+      </div>
+    </fieldset>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-5"
       >
-        <fieldset
-          className="emotion-5"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
+              When were 
+              they
+               born?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-4"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-month"
               >
-                When were 
-                they
-                 born?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-4"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-month"
+                Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-day"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dob-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-day"
+              >
+                Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dob-year"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dob-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value=""
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dob-year"
+              >
+                Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dob-year"
-                  max={2023}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dob-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
-        </fieldset>
-      </div>
+        </div>
+      </fieldset>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-8"
+  >
     <div
-      className="g g--mr emotion-8"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-7"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-7"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={true}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={true}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -39464,131 +39556,129 @@ exports[`Storyshots Common Components/DateRangePicker default 1`] = `
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className=" emotion-2"
   >
     <div
-      className=" emotion-2"
+      className="date-component"
     >
       <div
-        className="date-component"
+        aria-label="date 1"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 1"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date1month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date1year"
-              max={2023}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date1month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date1year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
       <div
-        className="to"
+        className="t--err"
       >
-        to
+         
       </div>
+    </div>
+    <div
+      className="to"
+    >
+      to
+    </div>
+    <div
+      className="date-component"
+    >
       <div
-        className="date-component"
+        aria-label="date 2"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 2"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date2month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date2year"
-              max={2023}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date2month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date2year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
+      <div
+        className="t--err"
+      >
+         
+      </div>
     </div>
   </div>
 </div>
@@ -39677,131 +39767,129 @@ exports[`Storyshots Common Components/DateRangePicker range too vast 1`] = `
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className=" emotion-2"
   >
     <div
-      className=" emotion-2"
+      className="date-component"
     >
       <div
-        className="date-component"
+        aria-label="date 1"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 1"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date1month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date1year"
-              max={2023}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date1month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date1year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
       <div
-        className="to"
+        className="t--err"
       >
-        to
+         
       </div>
+    </div>
+    <div
+      className="to"
+    >
+      to
+    </div>
+    <div
+      className="date-component"
+    >
       <div
-        className="date-component"
+        aria-label="date 2"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 2"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date2month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date2year"
-              max={2023}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date2month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date2year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
+      <div
+        className="t--err"
+      >
+         
+      </div>
     </div>
   </div>
 </div>
@@ -39890,131 +39978,129 @@ exports[`Storyshots Common Components/DateRangePicker with values 1`] = `
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className=" emotion-2"
   >
     <div
-      className=" emotion-2"
+      className="date-component"
     >
       <div
-        className="date-component"
+        aria-label="date 1"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 1"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date1month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date1year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date1year"
-              max={2023}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date1month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date1year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date1year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
       <div
-        className="to"
+        className="t--err"
       >
-        to
+         
       </div>
+    </div>
+    <div
+      className="to"
+    >
+      to
+    </div>
+    <div
+      className="date-component"
+    >
       <div
-        className="date-component"
+        aria-label="date 2"
+        className="emotion-0"
+        role="group"
       >
-        <div
-          aria-label="date 2"
-          className="emotion-0"
-          role="group"
-        >
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2month"
-            >
-              Month
-            </label>
-            <input
-              className="txt-f "
-              id="date2month"
-              max="12"
-              min="1"
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="MM"
-              type="number"
-              value=""
-            />
-          </div>
-          <div>
-            <label
-              className="txt-l"
-              htmlFor="date2year"
-            >
-              Year
-            </label>
-            <input
-              className="year-field txt-f "
-              id="date2year"
-              max={2023}
-              min={1870}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="YYYY"
-              type="number"
-              value=""
-            />
-          </div>
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2month"
+          >
+            Month
+          </label>
+          <input
+            className="txt-f "
+            id="date2month"
+            max="12"
+            min="1"
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="MM"
+            type="number"
+            value=""
+          />
         </div>
-        <div
-          className="t--err"
-        >
-           
+        <div>
+          <label
+            className="txt-l"
+            htmlFor="date2year"
+          >
+            Year
+          </label>
+          <input
+            className="year-field txt-f "
+            id="date2year"
+            max={2024}
+            min={1870}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="YYYY"
+            type="number"
+            value=""
+          />
         </div>
       </div>
+      <div
+        className="t--err"
+      >
+         
+      </div>
     </div>
   </div>
 </div>
@@ -40056,69 +40142,67 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent default 1`]
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className="date-component"
   >
     <div
-      className="date-component"
+      aria-label="date 1"
+      className="emotion-0"
+      role="group"
     >
-      <div
-        aria-label="date 1"
-        className="emotion-0"
-        role="group"
-      >
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="date1month"
-          >
-            Month
-          </label>
-          <input
-            className="txt-f "
-            id="date1month"
-            max="12"
-            min="1"
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="MM"
-            type="number"
-            value=""
-          />
-        </div>
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="date1year"
-          >
-            Year
-          </label>
-          <input
-            className="year-field txt-f "
-            id="date1year"
-            max={2023}
-            min={1870}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="YYYY"
-            type="number"
-            value=""
-          />
-        </div>
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date1month"
+        >
+          Month
+        </label>
+        <input
+          className="txt-f "
+          id="date1month"
+          max="12"
+          min="1"
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="MM"
+          type="number"
+          value=""
+        />
       </div>
-      <div
-        className="t--err"
-      >
-         
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date1year"
+        >
+          Year
+        </label>
+        <input
+          className="year-field txt-f "
+          id="date1year"
+          max={2024}
+          min={1870}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="YYYY"
+          type="number"
+          value=""
+        />
       </div>
     </div>
+    <div
+      className="t--err"
+    >
+       
+    </div>
   </div>
 </div>
 `;
@@ -40159,69 +40243,67 @@ exports[`Storyshots Common Components/DateRangePicker/DateComponent with values
   display: none;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <div
+    className="date-component"
   >
     <div
-      className="date-component"
+      aria-label="date 2"
+      className="emotion-0"
+      role="group"
     >
-      <div
-        aria-label="date 2"
-        className="emotion-0"
-        role="group"
-      >
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="date2month"
-          >
-            Month
-          </label>
-          <input
-            className="txt-f "
-            id="date2month"
-            max="12"
-            min="1"
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="MM"
-            type="number"
-            value=""
-          />
-        </div>
-        <div>
-          <label
-            className="txt-l"
-            htmlFor="date2year"
-          >
-            Year
-          </label>
-          <input
-            className="year-field txt-f "
-            id="date2year"
-            max={2023}
-            min={1870}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="YYYY"
-            type="number"
-            value=""
-          />
-        </div>
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date2month"
+        >
+          Month
+        </label>
+        <input
+          className="txt-f "
+          id="date2month"
+          max="12"
+          min="1"
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="MM"
+          type="number"
+          value=""
+        />
       </div>
-      <div
-        className="t--err"
-      >
-         
+      <div>
+        <label
+          className="txt-l"
+          htmlFor="date2year"
+        >
+          Year
+        </label>
+        <input
+          className="year-field txt-f "
+          id="date2year"
+          max={2024}
+          min={1870}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="YYYY"
+          type="number"
+          value=""
+        />
       </div>
     </div>
+    <div
+      className="t--err"
+    >
+       
+    </div>
   </div>
 </div>
 `;
@@ -41939,95 +42021,93 @@ exports[`Storyshots Common Components/Question Components/AltSpellings default 1
   stroke: #fff;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <h3
+    className="txt-l"
+    id="altSpellings"
   >
-    <h3
-      className="txt-l"
-      id="altSpellings"
-    >
-      Alternate spellings 
-      <span
-        style={
-          Object {
-            "fontSize": "90%",
-          }
+    Alternate spellings 
+    <span
+      style={
+        Object {
+          "fontSize": "90%",
         }
-      >
-        (if any)
-      </span>
-    </h3>
-    <ul
-      aria-labelledby="altSpellings"
-      className="emotion-0"
+      }
     >
-      <li
-        style={
-          Object {
-            "marginBottom": "1em",
-          }
+      (if any)
+    </span>
+  </h3>
+  <ul
+    aria-labelledby="altSpellings"
+    className="emotion-0"
+  >
+    <li
+      style={
+        Object {
+          "marginBottom": "1em",
         }
-      >
-        <input
-          aria-label="Spelling option 1"
-          className="txt-f"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="text"
-          value=""
-        />
-      </li>
-    </ul>
-    <button
-      className="emotion-2"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+      }
     >
-      <svg
-        aria-hidden="true"
-        className="emotion-1"
-        focusable="false"
-        viewBox="0 0 10 10"
-      >
-        <circle
-          cx="5"
-          cy="5"
-          r="4"
-          stroke="none"
+      <input
+        aria-label="Spelling option 1"
+        className="txt-f"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </li>
+  </ul>
+  <button
+    className="emotion-2"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="emotion-1"
+      focusable="false"
+      viewBox="0 0 10 10"
+    >
+      <circle
+        cx="5"
+        cy="5"
+        r="4"
+        stroke="none"
+      />
+      <g>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="5"
+          x2="5"
+          y1="2.5"
+          y2="7.5"
         />
-        <g>
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="5"
-            x2="5"
-            y1="2.5"
-            y2="7.5"
-          />
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="2.5"
-            x2="7.5"
-            y1="5"
-            y2="5"
-          />
-        </g>
-      </svg>
-      <span>
-        Add another option
-      </span>
-    </button>
-  </div>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="2.5"
+          x2="7.5"
+          y1="5"
+          y2="5"
+        />
+      </g>
+    </svg>
+    <span>
+      Add another option
+    </span>
+  </button>
 </div>
 `;
 
@@ -42088,95 +42168,93 @@ exports[`Storyshots Common Components/Question Components/AltSpellings with exis
   stroke: #fff;
 }
 
-<div>
-  <div
-    style={
-      Object {
-        "margin": "2rem auto",
-        "maxWidth": "768px",
-      }
+<div
+  style={
+    Object {
+      "margin": "2rem auto",
+      "maxWidth": "768px",
     }
+  }
+>
+  <h3
+    className="txt-l"
+    id="altSpellings"
   >
-    <h3
-      className="txt-l"
-      id="altSpellings"
-    >
-      Alternate spellings 
-      <span
-        style={
-          Object {
-            "fontSize": "90%",
-          }
+    Alternate spellings 
+    <span
+      style={
+        Object {
+          "fontSize": "90%",
         }
-      >
-        (if any)
-      </span>
-    </h3>
-    <ul
-      aria-labelledby="altSpellings"
-      className="emotion-0"
+      }
     >
-      <li
-        style={
-          Object {
-            "marginBottom": "1em",
-          }
+      (if any)
+    </span>
+  </h3>
+  <ul
+    aria-labelledby="altSpellings"
+    className="emotion-0"
+  >
+    <li
+      style={
+        Object {
+          "marginBottom": "1em",
         }
-      >
-        <input
-          aria-label="Spelling option 1"
-          className="txt-f"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="text"
-          value=""
-        />
-      </li>
-    </ul>
-    <button
-      className="emotion-2"
-      disabled={true}
-      onClick={[Function]}
-      type="button"
+      }
     >
-      <svg
-        aria-hidden="true"
-        className="emotion-1"
-        focusable="false"
-        viewBox="0 0 10 10"
-      >
-        <circle
-          cx="5"
-          cy="5"
-          r="4"
-          stroke="none"
+      <input
+        aria-label="Spelling option 1"
+        className="txt-f"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </li>
+  </ul>
+  <button
+    className="emotion-2"
+    disabled={true}
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      className="emotion-1"
+      focusable="false"
+      viewBox="0 0 10 10"
+    >
+      <circle
+        cx="5"
+        cy="5"
+        r="4"
+        stroke="none"
+      />
+      <g>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="5"
+          x2="5"
+          y1="2.5"
+          y2="7.5"
         />
-        <g>
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="5"
-            x2="5"
-            y1="2.5"
-            y2="7.5"
-          />
-          <line
-            fill="none"
-            strokeLinecap="round"
-            strokeWidth="1"
-            x1="2.5"
-            x2="7.5"
-            y1="5"
-            y2="5"
-          />
-        </g>
-      </svg>
-      <span>
-        Add another option
-      </span>
-    </button>
-  </div>
+        <line
+          fill="none"
+          strokeLinecap="round"
+          strokeWidth="1"
+          x1="2.5"
+          x2="7.5"
+          y1="5"
+          y2="5"
+        />
+      </g>
+    </svg>
+    <span>
+      Add another option
+    </span>
+  </button>
 </div>
 `;
 
@@ -94360,283 +94438,281 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage date range too v
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-10"
   >
-    <div
-      className="emotion-10"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className=" inactive emotion-2"
       >
-        <label
-          className=" inactive emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className="selected  emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className="selected  emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <h2
+        className="emotion-0"
+      >
+        Please enter a date range.
+      </h2>
+      <p>
+        The two dates should be within a five year period.
+      </p>
       <div
-        className="m-v700"
+        className=" emotion-9"
       >
-        <h2
-          className="emotion-0"
-        >
-          Please enter a date range.
-        </h2>
-        <p>
-          The two dates should be within a five year period.
-        </p>
         <div
-          className=" emotion-9"
+          className="date-component"
         >
           <div
-            className="date-component"
+            aria-label="date 1"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 1"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date1month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date1year"
-                  max={2023}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date1month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date1year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
           <div
-            className="to"
+            className="t--err"
           >
-            to
+             
           </div>
+        </div>
+        <div
+          className="to"
+        >
+          to
+        </div>
+        <div
+          className="date-component"
+        >
           <div
-            className="date-component"
+            aria-label="date 2"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 2"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date2month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date2year"
-                  max={2023}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date2month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date2year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
+          <div
+            className="t--err"
+          >
+             
+          </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-12"
+  >
     <div
-      className="g g--mr emotion-12"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-11"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-11"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -95305,253 +95381,284 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className="selected  emotion-2"
       >
-        <label
-          className="selected  emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className=" inactive emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className=" inactive emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
-      <div
-        className="m-v700"
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-8"
       >
-        <fieldset
-          className="emotion-8"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
-                  }
-                }
+              What was the date of the marriage?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-7"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-month"
               >
-                What was the date of the marriage?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-7"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-month"
+                Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value="4"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-day"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value="4"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-day"
+              >
+                Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value="23"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-year"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value="23"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-year"
+              >
+                Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-year"
-                  max={2023}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value="2008"
-                />
-              </div>
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value="2008"
+              />
             </div>
-            
           </div>
-        </fieldset>
-      </div>
+          
+        </div>
+      </fieldset>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -95843,277 +95950,308 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-9"
   >
-    <div
-      className="emotion-9"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className="selected  emotion-2"
       >
-        <label
-          className="selected  emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className=" inactive emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className=" inactive emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
-      <div
-        className="m-v700"
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <fieldset
+        className="emotion-8"
       >
-        <fieldset
-          className="emotion-8"
-        >
-          <div>
-            <legend
+        <div>
+          <legend
+            style={
+              Object {
+                "width": "100%",
+              }
+            }
+          >
+            <h2
+              className="emotion-0"
               style={
                 Object {
-                  "width": "100%",
+                  "marginBottom": "1.5rem",
                 }
               }
             >
-              <h2
-                className="emotion-0"
-                style={
-                  Object {
-                    "marginBottom": "1.5rem",
+              What was the date of the marriage?
+            </h2>
+          </legend>
+          <div
+            className=" emotion-7"
+          >
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-month"
+              >
+                Month
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
                   }
-                }
-              >
-                What was the date of the marriage?
-              </h2>
-            </legend>
-            <div
-              className=" emotion-7"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-month"
                 >
-                  Month
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-month"
-                  max="12"
-                  maxLength={2}
-                  min="1"
-                  name="month"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value="4"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-day"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-month"
+                max="12"
+                maxLength={2}
+                min="1"
+                name="month"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value="4"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-day"
+              >
+                Day
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Day
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-day"
-                  max="31"
-                  maxLength={2}
-                  min="1"
-                  name="day"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="DD"
-                  type="number"
-                  value="23"
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="dateOfMarriageStart-year"
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-day"
+                max="31"
+                maxLength={2}
+                min="1"
+                name="day"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="DD"
+                type="number"
+                value="23"
+              />
+            </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="dateOfMarriageStart-year"
+              >
+                Year
+                <span
+                  aria-hidden="true"
+                  className="t--req"
+                  style={
+                    Object {
+                      "marginLeft": "0.35em",
+                    }
+                  }
                 >
-                  Year
-                </label>
-                <input
-                  className="txt-f"
-                  id="dateOfMarriageStart-year"
-                  max={2023}
-                  maxLength={4}
-                  min={1870}
-                  name="year"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value="2008"
-                />
-              </div>
+                  Required
+                </span>
+              </label>
+              <input
+                className="txt-f"
+                id="dateOfMarriageStart-year"
+                max={2024}
+                maxLength={4}
+                min={1870}
+                name="year"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value="2008"
+              />
             </div>
-            
           </div>
-        </fieldset>
-      </div>
-      <div
-        className="m-v500 p-a300 br br-a200 br--r lh--300"
-        style={
-          Object {
-            "paddingBottom": 0,
-          }
+          
+        </div>
+      </fieldset>
+    </div>
+    <div
+      className="m-v500 p-a300 br br-a200 br--r lh--300"
+      style={
+        Object {
+          "paddingBottom": 0,
         }
+      }
+    >
+      <h2
+        className="h3 tt-u"
       >
-        <h2
-          className="h3 tt-u"
-        >
-          We might not have the marriage certificate yet
-        </h2>
-        <p>
-          <strong>
-            We recommend waiting at least two weeks before you request a marriage certificate.
-          </strong>
-           
-          Once a marriage license has been filed, it generally takes two weeks for the marriage certificate to be issued.
-        </p>
-        <p>
-          If you order too early, we can only hold your request for seven days while we wait for the marriage certificate. If we don’t receive the record in time, your request will be canceled automatically and your card will not be charged. You’ll have to resubmit your request.
-        </p>
-      </div>
+        We might not have the marriage certificate yet
+      </h2>
+      <p>
+        <strong>
+          We recommend waiting at least two weeks before you request a marriage certificate.
+        </strong>
+         
+        Once a marriage license has been filed, it generally takes two weeks for the marriage certificate to be issued.
+      </p>
+      <p>
+        If you order too early, we can only hold your request for seven days while we wait for the marriage certificate. If we don’t receive the record in time, your request will be canceled automatically and your card will not be charged. You’ll have to resubmit your request.
+      </p>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-11"
+  >
     <div
-      className="g g--mr emotion-11"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-10"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-10"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>
@@ -96427,283 +96565,281 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage unsure of date 1
   }
 }
 
-<div>
+<div
+  className="b-c b-c--hsm"
+>
   <div
-    className="b-c b-c--hsm"
+    className="emotion-10"
   >
-    <div
-      className="emotion-10"
-    >
-      <h2
-        className="emotion-0"
-        id="exactDateQuestion"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+    <h2
+      className="emotion-0"
+      id="exactDateQuestion"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
-      >
-        Do you know the exact date of the marriage?
-      </h2>
-      <div
-        aria-labelledby="exactDateQuestion"
-        className="emotion-5"
-        role="radiogroup"
-        style={
-          Object {
-            "marginBottom": "1.5rem",
-          }
+      }
+    >
+      Do you know the exact date of the marriage?
+    </h2>
+    <div
+      aria-labelledby="exactDateQuestion"
+      className="emotion-5"
+      role="radiogroup"
+      style={
+        Object {
+          "marginBottom": "1.5rem",
         }
+      }
+    >
+      <label
+        className=" inactive emotion-2"
       >
-        <label
-          className=" inactive emotion-2"
+        <svg
+          aria-hidden="true"
+          className="checkMark emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="checkMark emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
-            />
-            <path
-              d="M50.937,26.2,30.069,47.068,21,38.791"
-              transform="translate(-5.591 -6.213)"
-            />
-          </svg>
-          <input
-            checked={false}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="yes"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
           />
-          <span>
-            yes
-          </span>
-        </label>
-        <label
-          className="selected  emotion-2"
+          <path
+            d="M50.937,26.2,30.069,47.068,21,38.791"
+            transform="translate(-5.591 -6.213)"
+          />
+        </svg>
+        <input
+          checked={false}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="yes"
+        />
+        <span>
+          yes
+        </span>
+      </label>
+      <label
+        className="selected  emotion-2"
+      >
+        <svg
+          aria-hidden="true"
+          className="xSymbol emotion-1"
+          focusable="false"
+          viewBox="-2.5 -2.5 66 66"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            className="xSymbol emotion-1"
-            focusable="false"
-            viewBox="-2.5 -2.5 66 66"
-            xmlns="http://www.w3.org/2000/svg"
+          <ellipse
+            cx="30.377"
+            cy="30.377"
+            rx="30.377"
+            ry="30.377"
+          />
+          <g
+            transform="translate(19.107 19.107)"
           >
-            <ellipse
-              cx="30.377"
-              cy="30.377"
-              rx="30.377"
-              ry="30.377"
+            <line
+              x2="22.629"
+              y2="22.629"
             />
-            <g
-              transform="translate(19.107 19.107)"
-            >
-              <line
-                x2="22.629"
-                y2="22.629"
-              />
-              <line
-                x2="22.629"
-                y1="22.629"
-              />
-            </g>
-          </svg>
-          <input
-            checked={true}
-            name="dateOfMarriage"
-            onChange={[Function]}
-            type="radio"
-            value="no"
-          />
-          <span>
-            no
-          </span>
-        </label>
-      </div>
+            <line
+              x2="22.629"
+              y1="22.629"
+            />
+          </g>
+        </svg>
+        <input
+          checked={true}
+          name="dateOfMarriage"
+          onChange={[Function]}
+          type="radio"
+          value="no"
+        />
+        <span>
+          no
+        </span>
+      </label>
+    </div>
+    <div
+      className="m-v700"
+    >
+      <h2
+        className="emotion-0"
+      >
+        Please enter a date range.
+      </h2>
+      <p>
+        The two dates should be within a five year period.
+      </p>
       <div
-        className="m-v700"
+        className=" emotion-9"
       >
-        <h2
-          className="emotion-0"
-        >
-          Please enter a date range.
-        </h2>
-        <p>
-          The two dates should be within a five year period.
-        </p>
         <div
-          className=" emotion-9"
+          className="date-component"
         >
           <div
-            className="date-component"
+            aria-label="date 1"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 1"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date1month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date1year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date1year"
-                  max={2023}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date1month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date1year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date1year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
           <div
-            className="to"
+            className="t--err"
           >
-            to
+             
           </div>
+        </div>
+        <div
+          className="to"
+        >
+          to
+        </div>
+        <div
+          className="date-component"
+        >
           <div
-            className="date-component"
+            aria-label="date 2"
+            className="emotion-7"
+            role="group"
           >
-            <div
-              aria-label="date 2"
-              className="emotion-7"
-              role="group"
-            >
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2month"
-                >
-                  Month
-                </label>
-                <input
-                  className="txt-f "
-                  id="date2month"
-                  max="12"
-                  min="1"
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="MM"
-                  type="number"
-                  value=""
-                />
-              </div>
-              <div>
-                <label
-                  className="txt-l"
-                  htmlFor="date2year"
-                >
-                  Year
-                </label>
-                <input
-                  className="year-field txt-f "
-                  id="date2year"
-                  max={2023}
-                  min={1870}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  placeholder="YYYY"
-                  type="number"
-                  value=""
-                />
-              </div>
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2month"
+              >
+                Month
+              </label>
+              <input
+                className="txt-f "
+                id="date2month"
+                max="12"
+                min="1"
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="MM"
+                type="number"
+                value=""
+              />
             </div>
-            <div
-              className="t--err"
-            >
-               
+            <div>
+              <label
+                className="txt-l"
+                htmlFor="date2year"
+              >
+                Year
+              </label>
+              <input
+                className="year-field txt-f "
+                id="date2year"
+                max={2024}
+                min={1870}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="YYYY"
+                type="number"
+                value=""
+              />
             </div>
           </div>
+          <div
+            className="t--err"
+          >
+             
+          </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    className="g g--mr emotion-12"
+  >
     <div
-      className="g g--mr emotion-12"
+      className="t--info g--6 m-b500"
     >
-      <div
-        className="t--info g--6 m-b500"
+      <button
+        className="lnk emotion-11"
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="lnk emotion-11"
-          onClick={[Function]}
-          type="button"
+        <span
+          style={
+            Object {
+              "fontStyle": "italic",
+              "whiteSpace": "nowrap",
+            }
+          }
         >
           <span
+            aria-hidden="true"
             style={
               Object {
-                "fontStyle": "italic",
-                "whiteSpace": "nowrap",
+                "fontStyle": "normal",
               }
             }
           >
-            <span
-              aria-hidden="true"
-              style={
-                Object {
-                  "fontStyle": "normal",
-                }
-              }
-            >
-              ←
-            </span>
-             
-            Back
+            ←
           </span>
-        </button>
-      </div>
-      <div
-        className="g--6 ta-r m-b500"
+           
+          Back
+        </span>
+      </button>
+    </div>
+    <div
+      className="g--6 ta-r m-b500"
+    >
+      <button
+        className="btn btn--b-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <button
-          className="btn btn--b-sm"
-          disabled={false}
-          onClick={[Function]}
-          type="button"
-        >
-          Next question
-        </button>
-      </div>
+        Next question
+      </button>
     </div>
   </div>
 </div>

From 301fa8e030cdbff17fb15e858dd02a890bb0c584 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Wed, 15 May 2024 14:49:43 -0400
Subject: [PATCH 20/28] DIG-4409: Final Marriage Intention fixes before
 Registry review

---
 .../src/__snapshots__/Storyshots.test.ts.snap | 262 +++++++----
 .../src/components/StatusModal.stories.tsx    |   4 +-
 .../inputs/MemorableDateInput.tsx             |  16 +-
 .../react-fleet/src/utilities/constants.ts    |   1 +
 .../react-fleet/templates/stylesheets.json    |   2 +-
 .../__snapshots__/Storyshots.test.ts.snap     |   4 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 430 ++++++++++++------
 .../common/question-components/styling.tsx    |   5 +-
 .../marriageintention/forms/contactInfo.tsx   |   7 +-
 .../forms/contactUI/contactFormStyling.tsx    |  18 +-
 .../marriageintention/forms/instructions.tsx  |   2 +-
 .../marriageintention/forms/partnerFormA.tsx  |  26 +-
 .../marriageintention/forms/partnerFormUI.tsx |   3 +
 .../forms/reviewUI/reviewStying.tsx           |  25 +-
 .../client/marriageintention/index.tsx        |   4 +-
 15 files changed, 537 insertions(+), 272 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index 868c54b13..ca3e5ef6c 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -905,16 +905,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput default 1`] = `
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -941,6 +943,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput default 1`] = `
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -1088,16 +1096,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput earliestDate: 9/7/16
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -1124,6 +1134,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput earliestDate: 9/7/16
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -1271,16 +1287,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput invalid initialDate
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -1307,6 +1325,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput invalid initialDate
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -1459,16 +1483,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput latestDate: 12/31/20
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -1495,6 +1521,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput latestDate: 12/31/20
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -1642,16 +1674,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -1678,6 +1712,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture 1`]
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -1825,16 +1865,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -1861,6 +1903,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -2008,16 +2056,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -2044,6 +2094,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -2191,16 +2247,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -2227,6 +2285,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowFuture and
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -2374,16 +2438,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -2410,6 +2476,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput onlyAllowPast 1`] =
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -2557,16 +2629,18 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
   transition: opacity 0.1s;
 }
 
-.emotion-0 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-0 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-0 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-0 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-0 input {
@@ -2593,6 +2667,12 @@ exports[`Storyshots Form Elements|Inputs/MemorableDateInput with an initialDate
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-0 {
+    display: block;
+  }
+}
+
 <fieldset
   className="emotion-1"
 >
@@ -5864,7 +5944,7 @@ exports[`Storyshots Notifications|Modals/StatusModal hide top border decoration
       <p
         className="t--s400"
       >
-        If you edit your information you must click save and continue to save your changes
+        If you edit your information, you must click the \`Save and Continue\` button to save your changes.
       </p>
     </div>
   </div>
diff --git a/modules-js/react-fleet/src/components/StatusModal.stories.tsx b/modules-js/react-fleet/src/components/StatusModal.stories.tsx
index 20b926466..9c6f778e1 100644
--- a/modules-js/react-fleet/src/components/StatusModal.stories.tsx
+++ b/modules-js/react-fleet/src/components/StatusModal.stories.tsx
@@ -32,8 +32,8 @@ storiesOf('Notifications|Modals/StatusModal', module)
       absoluteCloseBtn={action('close')}
     >
       <p className="t--s400">
-        If you edit your information you must click save and continue to save
-        your changes
+        If you edit your information, you must click the `Save and Continue`
+        button to save your changes.
       </p>
     </StatusModal>
   ));
diff --git a/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx
index 48cfcc649..c6fdc0d4d 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/MemorableDateInput.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 
 import { css, jsx } from '@emotion/core';
 
+import { MEDIA_SMALL, MEDIA_SMALL_MAX } from '../../utilities/constants';
+
 type Fields = {
   year: string;
   month: string;
@@ -705,11 +707,13 @@ const FIELDS_CONTAINER_STYLING = css({
   justifyContent: 'space-between',
   transition: 'opacity 0.1s',
 
-  '> div': {
-    flex: '0 0 24%',
+  [MEDIA_SMALL]: {
+    '> div': {
+      flex: '0 0 24%',
 
-    '&:last-of-type': {
-      flex: '0 0 50%',
+      '&:last-of-type': {
+        flex: '0 0 50%',
+      },
     },
   },
 
@@ -736,4 +740,8 @@ const FIELDS_CONTAINER_STYLING = css({
       cursor: 'not-allowed',
     },
   },
+
+  [MEDIA_SMALL_MAX]: {
+    display: 'block',
+  },
 });
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index 22e0a7679..4dd118532 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -40,6 +40,7 @@ export const MONTSERRAT_SRC =
 export const SANS = 'Montserrat, Arial, sans-serif';
 export const SERIF = 'Lora, Georgia, serif';
 
+export const MEDIA_X_SMALL = '@media screen and (max-width: 330px)';
 export const MEDIA_SMALL = '@media screen and (min-width: 480px)';
 export const MEDIA_SMALL_MAX = '@media screen and (max-width: 480px)';
 export const MEDIA_MEDIUM = '@media screen and (min-width: 768px)';
diff --git a/modules-js/react-fleet/templates/stylesheets.json b/modules-js/react-fleet/templates/stylesheets.json
index 302e7e0b7..4e5700798 100644
--- a/modules-js/react-fleet/templates/stylesheets.json
+++ b/modules-js/react-fleet/templates/stylesheets.json
@@ -1,3 +1,3 @@
 [
-  "https://patterns-stg.boston.gov/css/public.css"
+  "https://patterns.boston.gov/css/public.css"
 ]
\ No newline at end of file
diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
index 24a70bba3..67963ac9b 100644
--- a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -3519,7 +3519,7 @@ exports[`Storyshots Confirm-Identity Review 1`] = `
                     Data of Birth (MM/DD/YYYY)
                   </legend>
                   <div
-                    className="disabled css-1wyga37"
+                    className="disabled css-zu1hcp"
                   >
                     <div>
                       <label
@@ -3982,7 +3982,7 @@ exports[`Storyshots Confirm-Identity Validate 1`] = `
                     Data of Birth (MM/DD/YYYY)
                   </legend>
                   <div
-                    className=" css-1wyga37"
+                    className=" css-zu1hcp"
                   >
                     <div>
                       <label
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 589c0aa20..f12fcdebe 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -9949,16 +9949,18 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
   transition: opacity 0.1s;
 }
 
-.emotion-4 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-4 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-4 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-4 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-4 input {
@@ -9985,6 +9987,12 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-4 {
+    display: block;
+  }
+}
+
 .emotion-6 {
   font-weight: bold;
 }
@@ -10510,16 +10518,18 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
   transition: opacity 0.1s;
 }
 
-.emotion-4 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-4 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-4 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-4 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-4 input {
@@ -10546,6 +10556,12 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-4 {
+    display: block;
+  }
+}
+
 <div
   className="b-c b-c--hsm"
 >
@@ -13917,16 +13933,18 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-8 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-8 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-8 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-8 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-8 input {
@@ -13953,6 +13971,12 @@ Array [
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-8 {
+    display: block;
+  }
+}
+
 <div
     className="mn--full-ie"
   >
@@ -63433,16 +63457,18 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   transition: opacity 0.1s;
 }
 
-.emotion-1 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-1 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-1 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-1 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-1 input {
@@ -63469,6 +63495,12 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-1 {
+    display: block;
+  }
+}
+
 .css-1aiow01 .emotion-5:after {
   content: '&nbsp;';
   opacity: 0;
@@ -65145,16 +65177,18 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   transition: opacity 0.1s;
 }
 
-.emotion-1 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-1 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-1 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-1 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-1 input {
@@ -65181,6 +65215,12 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-1 {
+    display: block;
+  }
+}
+
 .css-1aiow01 .emotion-7:after {
   content: '&nbsp;';
   opacity: 0;
@@ -67203,16 +67243,18 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   transition: opacity 0.1s;
 }
 
-.emotion-1 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-1 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-1 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-1 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-1 input {
@@ -67239,6 +67281,12 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-1 {
+    display: block;
+  }
+}
+
 .emotion-4 {
   margin-bottom: 2em;
 }
@@ -73271,21 +73319,18 @@ exports[`Storyshots Marriage Intention/Form Components Step 5. Review - Contact
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   margin: 1em 0;
   color: #fff;
 }
 
-.emotion-0 .wrapper-title {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
 .emotion-0 .wrapper-title h1,
 .emotion-0 .wrapper-title h2 {
   color: #091f2f;
-  font-size: 1.5625rem;
+  font-size: 1.0rem;
   font-weight: 700;
   text-transform: uppercase;
   font-family: Montserrat,Arial,sans-serif;
@@ -73307,10 +73352,31 @@ exports[`Storyshots Marriage Intention/Form Components Step 5. Review - Contact
   background: #1871bd;
 }
 
+@media screen and (min-width:480px) {
+  .emotion-0 .wrapper-title {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+
+  .emotion-0 .wrapper-title h1,
+  .emotion-0 .wrapper-title h2 {
+    color: #091f2f;
+    font-size: 1.5625rem;
+    line-height: 1.875em;
+  }
+}
+
 @media screen and (max-width:480px) {
   .emotion-0 .wrapper-title h1 {
     line-height: 1.25em;
   }
+
+  .emotion-0 .wrapper-btn .btn {
+    font-size: 12px;
+    padding: 1em;
+  }
 }
 
 .emotion-1 .section-wrapper {
@@ -73450,21 +73516,18 @@ exports[`Storyshots Marriage Intention/Form Components Step 5. Review/Person Inf
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   margin: 1em 0;
   color: #fff;
 }
 
-.emotion-0 .wrapper-title {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
 .emotion-0 .wrapper-title h1,
 .emotion-0 .wrapper-title h2 {
   color: #091f2f;
-  font-size: 1.5625rem;
+  font-size: 1.0rem;
   font-weight: 700;
   text-transform: uppercase;
   font-family: Montserrat,Arial,sans-serif;
@@ -73486,10 +73549,31 @@ exports[`Storyshots Marriage Intention/Form Components Step 5. Review/Person Inf
   background: #1871bd;
 }
 
+@media screen and (min-width:480px) {
+  .emotion-0 .wrapper-title {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+
+  .emotion-0 .wrapper-title h1,
+  .emotion-0 .wrapper-title h2 {
+    color: #091f2f;
+    font-size: 1.5625rem;
+    line-height: 1.875em;
+  }
+}
+
 @media screen and (max-width:480px) {
   .emotion-0 .wrapper-title h1 {
     line-height: 1.25em;
   }
+
+  .emotion-0 .wrapper-btn .btn {
+    font-size: 12px;
+    padding: 1em;
+  }
 }
 
 .emotion-1 .section-wrapper {
@@ -74194,6 +74278,7 @@ Array [
 
 .emotion-5 {
   line-height: 1.38em;
+  margin-bottom: 1em;
 }
 
 .emotion-5 h1 {
@@ -74205,6 +74290,7 @@ Array [
   font-size: 2rem;
   font-style: normal;
   color: #091f2f;
+  line-height: 1em;
 }
 
 .emotion-5 h2 {
@@ -74217,11 +74303,11 @@ Array [
   font-size: 1.5rem;
   font-style: normal;
   color: #091f2f;
+  line-height: 1em;
 }
 
 .emotion-5 .getting-started {
   font-size: 1rem;
-  margin-bottom: 1.5rem;
 }
 
 .emotion-5 .getting-started .emphasis {
@@ -74614,7 +74700,7 @@ Array [
                     >
                       Note:
                     </span>
-                    If you edit your information, you must click the "save and continue" button to save your changes.
+                    If you edit your information, you must click the \`Save and Continue\` button to save your changes.
                   </div>
                 </div>
               </div>
@@ -74879,16 +74965,18 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-15 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-15 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-15 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-15 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-15 input {
@@ -74915,6 +75003,12 @@ Array [
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-15 {
+    display: block;
+  }
+}
+
 .emotion-2 {
   padding-right: 0;
 }
@@ -79956,16 +80050,18 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-15 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-15 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-15 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-15 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-15 input {
@@ -79992,6 +80088,12 @@ Array [
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-15 {
+    display: block;
+  }
+}
+
 .emotion-2 {
   padding-right: 0;
 }
@@ -85033,16 +85135,18 @@ Array [
   transition: opacity 0.1s;
 }
 
-.emotion-9 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-9 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-9 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-9 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-9 input {
@@ -85069,6 +85173,12 @@ Array [
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-9 {
+    display: block;
+  }
+}
+
 .emotion-2 {
   padding-right: 0;
 }
@@ -85356,22 +85466,7 @@ Array [
   opacity: 0;
 }
 
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
 .emotion-6 .contact-fields {
-  width: calc(50% - 10px);
   margin-bottom: 10px;
 }
 
@@ -85383,6 +85478,26 @@ Array [
   width: 100%;
 }
 
+@media screen and (min-width:480px) {
+  .emotion-6 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+
+  .emotion-6 .contact-fields {
+    width: calc(50% - 10px);
+  }
+}
+
 @media screen and (min-width:768px) {
   .emotion-11 {
     margin-left: auto;
@@ -85921,6 +86036,7 @@ Array [
                       className="emotion-11"
                       style={
                         Object {
+                          "marginBottom": "1em",
                           "paddingTop": "1.5rem",
                         }
                       }
@@ -86490,21 +86606,18 @@ Array [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
   margin: 1em 0;
   color: #fff;
 }
 
-.emotion-5 .wrapper-title {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-}
-
 .emotion-5 .wrapper-title h1,
 .emotion-5 .wrapper-title h2 {
   color: #091f2f;
-  font-size: 1.5625rem;
+  font-size: 1.0rem;
   font-weight: 700;
   text-transform: uppercase;
   font-family: Montserrat,Arial,sans-serif;
@@ -86526,10 +86639,31 @@ Array [
   background: #1871bd;
 }
 
+@media screen and (min-width:480px) {
+  .emotion-5 .wrapper-title {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+
+  .emotion-5 .wrapper-title h1,
+  .emotion-5 .wrapper-title h2 {
+    color: #091f2f;
+    font-size: 1.5625rem;
+    line-height: 1.875em;
+  }
+}
+
 @media screen and (max-width:480px) {
   .emotion-5 .wrapper-title h1 {
     line-height: 1.25em;
   }
+
+  .emotion-5 .wrapper-btn .btn {
+    font-size: 12px;
+    padding: 1em;
+  }
 }
 
 .emotion-6 .section-wrapper {
@@ -95310,16 +95444,18 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
   transition: opacity 0.1s;
 }
 
-.emotion-7 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-7 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-7 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-7 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-7 input {
@@ -95346,6 +95482,12 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage knows exact date
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-7 {
+    display: block;
+  }
+}
+
 .emotion-5 {
   margin: 2rem 0 3rem;
 }
@@ -95879,16 +96021,18 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
   transition: opacity 0.1s;
 }
 
-.emotion-7 > div {
-  -webkit-flex: 0 0 24%;
-  -ms-flex: 0 0 24%;
-  flex: 0 0 24%;
-}
+@media screen and (min-width:480px) {
+  .emotion-7 > div {
+    -webkit-flex: 0 0 24%;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
+  }
 
-.emotion-7 > div:last-of-type {
-  -webkit-flex: 0 0 50%;
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
+  .emotion-7 > div:last-of-type {
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+  }
 }
 
 .emotion-7 input {
@@ -95915,6 +96059,12 @@ exports[`Storyshots Marriage/Question Components/DateOfMarriage marriage too rec
   cursor: not-allowed;
 }
 
+@media screen and (max-width:480px) {
+  .emotion-7 {
+    display: block;
+  }
+}
+
 .emotion-5 {
   margin: 2rem 0 3rem;
 }
diff --git a/services-js/registry-certs/client/common/question-components/styling.tsx b/services-js/registry-certs/client/common/question-components/styling.tsx
index 4c6c6fc9e..781264630 100644
--- a/services-js/registry-certs/client/common/question-components/styling.tsx
+++ b/services-js/registry-certs/client/common/question-components/styling.tsx
@@ -354,6 +354,7 @@ export const CONTAINER_STYLING = css({
 
 export const BUTTON_CONTAINER_STYLING = css({
   textAlign: 'center',
+  // marginTop: '1.25em',
 
   [MEDIA_SMALL]: {
     marginTop: '2.5rem',
@@ -378,6 +379,7 @@ export const SUPPORTING_TEXT_CLASSNAME = 'lh--400 t--s400 m-b500';
 
 export const MARRIAGEINTENTION = css({
   lineHeight: '1.38em',
+  marginBottom: '1em',
 
   h1: {
     paddingBottom: '0.25rem',
@@ -388,6 +390,7 @@ export const MARRIAGEINTENTION = css({
     fontSize: '2rem',
     fontStyle: 'normal',
     color: CHARLES_BLUE,
+    lineHeight: '1em',
   },
 
   h2: {
@@ -400,11 +403,11 @@ export const MARRIAGEINTENTION = css({
     fontSize: '1.5rem',
     fontStyle: 'normal',
     color: CHARLES_BLUE,
+    lineHeight: '1em',
   },
 
   '.getting-started': {
     fontSize: '1rem',
-    marginBottom: '1.5rem',
 
     '.emphasis': {
       fontStyle: 'bold',
diff --git a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
index 223fae852..45f999b50 100644
--- a/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/contactInfo.tsx
@@ -217,15 +217,12 @@ export default class ContactInfo extends Component<Props> {
             </div>
             <div
               css={NAME_FIELDS_BASIC_CONTAINER_STYLING}
-              style={{ paddingTop: '1.5rem' }}
+              style={{ paddingTop: '1.5rem', marginBottom: '1em' }}
             >
               <MemorableDateInput
                 legend={
                   <h2
-                    css={[
-                      // SECTION_HEADING_STYLING,
-                      APPT_HEADER_STYLING,
-                    ]}
+                    css={[APPT_HEADER_STYLING]}
                     style={{ marginBottom: '1.5rem' }}
                   >
                     Appointment Date
diff --git a/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx b/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx
index fd1d0e847..ca30211fc 100644
--- a/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/contactUI/contactFormStyling.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/core';
-import { SANS, CHARLES_BLUE } from '@cityofboston/react-fleet';
+import { SANS, CHARLES_BLUE, MEDIA_SMALL } from '@cityofboston/react-fleet';
 import { THICK_BORDER_STYLE } from '../../styling/../../common/question-components/styling';
 
 export const CONTACTFORM_HEADER_STYLING = css(`
@@ -13,14 +13,8 @@ export const CONTACTFORM_HEADER_STYLING = css(`
 `);
 
 export const CONTACTFORM_CONTACT_FIELD_STYLING = css(`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
   .contact-fields {
-    width: calc(50% - 10px); 
     margin-bottom: 10px;
-    // background: green;
 
     label:first-child {
       margin-top: 1em;
@@ -30,4 +24,14 @@ export const CONTACTFORM_CONTACT_FIELD_STYLING = css(`
       width: 100%;
     }
   }
+
+  ${MEDIA_SMALL} {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .contact-fields {
+      width: calc(50% - 10px);
+    }
+  }
 `);
diff --git a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
index 660505b97..d05f2f2b4 100644
--- a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
@@ -74,7 +74,7 @@ export default class Instructions extends Component<Props> {
 
         <div css={INSTRUCTIONS_NOTE}>
           <span className="note">Note:</span>
-          If you edit your information, you must click the "save and continue"
+          If you edit your information, you must click the `Save and Continue`
           button to save your changes.
         </div>
       </div>
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index de43bd6ca..bdd52b65d 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -16,10 +16,10 @@ import { BOSTON_NEIGHBORHOODS } from './inputData';
 
 import {
   nameFields,
-  datePlaceOfBirth,
   residence,
   marriageBlock,
   parents,
+  datePlaceOfBirth,
   PARTNERFORM_HEADER_STYLING,
 } from './partnerFormUI';
 
@@ -76,7 +76,7 @@ export default class PartnerForm extends Component<Props> {
     });
   };
 
-  private handleUseSurnameChange = (
+  public handleUseSurnameChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     handleUseSurnameChange$({
@@ -87,7 +87,7 @@ export default class PartnerForm extends Component<Props> {
     });
   };
 
-  private handleAdditionalParentChange = (
+  public handleAdditionalParentChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     handleAdditionalParentChange$({
@@ -99,7 +99,7 @@ export default class PartnerForm extends Component<Props> {
     });
   };
 
-  private handleBloodRelDescChange = (
+  public handleBloodRelDescChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     handleBloodRelDescChange$({
@@ -110,7 +110,7 @@ export default class PartnerForm extends Component<Props> {
     });
   };
 
-  private handleBloodRelChange = (
+  public handleBloodRelChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     handleBloodRelChange$({
@@ -123,7 +123,7 @@ export default class PartnerForm extends Component<Props> {
     });
   };
 
-  private handleMarriedBeforeChange = (
+  public handleMarriedBeforeChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
@@ -143,7 +143,7 @@ export default class PartnerForm extends Component<Props> {
     }
   };
 
-  private handleBirthDateChange = (newDate): void => {
+  public handleBirthDateChange = (newDate): void => {
     const isDate = this.isDateObj(newDate);
     let age = '';
     if (isDate) {
@@ -158,7 +158,7 @@ export default class PartnerForm extends Component<Props> {
     );
   };
 
-  private handleBirthplaceCountryChange = (
+  public handleBirthplaceCountryChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
@@ -178,7 +178,7 @@ export default class PartnerForm extends Component<Props> {
     }
   };
 
-  private handleResidenceCountryChange = (
+  public handleResidenceCountryChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
@@ -205,9 +205,7 @@ export default class PartnerForm extends Component<Props> {
     }
   };
 
-  private handleZipCodeChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
+  public handleZipCodeChange = (event: ChangeEvent<HTMLInputElement>): void => {
     const val = event.target.value
       .replace(/[^0-9]/g, '')
       .replace(/(\..*)\./g, '$1');
@@ -220,7 +218,7 @@ export default class PartnerForm extends Component<Props> {
     );
   };
 
-  private handleResidenceStateChange = (
+  public handleResidenceStateChange = (
     event: ChangeEvent<HTMLInputElement>
   ): void => {
     const { marriageIntentionCertificateRequest } = this.props;
@@ -281,7 +279,7 @@ export default class PartnerForm extends Component<Props> {
     }
   };
 
-  private checkBirthCityForNeighborhood = (): void => {
+  public checkBirthCityForNeighborhood = (): void => {
     const { marriageIntentionCertificateRequest } = this.props;
     const {
       partnerA_birthCountry,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index 912bda8cc..e44c951f7 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -39,7 +39,9 @@ import {
   PARTNERSHIP_TYPE_DISSOLVED,
   PARTNERSHIP_TYPE2,
 } from './inputData';
+
 import { COUNTRIES, US_STATES } from '../../../utils/data';
+
 import { ToolTip } from '@cityofboston/react-fleet';
 
 export const PARTNERFORM_HEADER_STYLING = css(`
@@ -204,6 +206,7 @@ export const nameFields = (data: {
       </h1>
 
       {refs && <span ref={refs} />}
+
       <TextInput
         label="First Name"
         name={`partner${partnerFlag}_firstName`}
diff --git a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
index 12c9fc37e..622d50762 100644
--- a/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/reviewUI/reviewStying.tsx
@@ -5,6 +5,7 @@ import {
   WHITE,
   SANS,
   MEDIA_SMALL_MAX,
+  MEDIA_SMALL,
   DEFAULT_TEXT,
 } from '@cityofboston/react-fleet';
 
@@ -30,15 +31,16 @@ export const REVIEW_CONTROL_STYLING = css(`
   overflow: hidden;
   align-items: center;
   align-items: center;
+  justify-content: space-between;
   margin: 1em 0;
   color: #fff;
 
   .wrapper-title {
-    flex-grow: 1;
+    // flex-grow: 1;
     
     h1, h2 {
       color: ${CHARLES_BLUE};
-      font-size: 1.5625rem;
+      font-size: 1.0rem;
       font-weight: 700;
       text-transform: uppercase;
       font-family: ${SANS};
@@ -63,12 +65,31 @@ export const REVIEW_CONTROL_STYLING = css(`
     }
   }
 
+  ${MEDIA_SMALL} {
+    .wrapper-title {
+      flex-grow: 1;
+
+      h1, h2 {
+        color: ${CHARLES_BLUE};
+        font-size: 1.5625rem;
+        line-height: 1.875em;
+      }
+    }
+  }
+
   ${MEDIA_SMALL_MAX} {
     .wrapper-title {
       h1 {
         line-height: 1.25em;
       }
     }
+
+    .wrapper-btn {
+      .btn {
+        font-size: 12px;
+        padding: 1em;
+      }
+    }
   }
 `);
 
diff --git a/services-js/registry-certs/client/marriageintention/index.tsx b/services-js/registry-certs/client/marriageintention/index.tsx
index fbcc82ba3..aea86f24a 100644
--- a/services-js/registry-certs/client/marriageintention/index.tsx
+++ b/services-js/registry-certs/client/marriageintention/index.tsx
@@ -599,8 +599,8 @@ export default class IndexPage extends React.Component<Props, State> {
               confirmBtnText={`Confirm`}
             >
               <p className="t--s500">
-                If you edit your information you must click the `Save and
-                Continue` button to save your changes
+                If you edit your information, you must click the `Save and
+                Continue` button to save your changes.
               </p>
             </StatusModal>
           )}

From 8a57c917e35c509153df6947617f7082f5274413 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Mon, 20 May 2024 19:29:31 -0400
Subject: [PATCH 21/28] DIG-4409B: Final Marriage Intention fixes before
 Registry review

---
 .../src/__snapshots__/Storyshots.test.ts.snap |   25 +-
 .../src/form-elements/SelectDropdown.tsx      |   15 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 3066 ++++++++++++++---
 3 files changed, 2607 insertions(+), 499 deletions(-)

diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index ca3e5ef6c..f93579043 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -4125,6 +4125,10 @@ exports[`Storyshots Form Elements|SelectDropdown default 1`] = `
 
 exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
 .emotion-0 {
+  color: #091f2f;
+}
+
+.emotion-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4136,7 +4140,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   position: relative;
 }
 
-.emotion-0 .icon {
+.emotion-3 .icon {
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -4149,20 +4153,20 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   color: white;
 }
 
-.emotion-0 .icon::before {
+.emotion-3 .icon::before {
   content: '?';
 }
 
-.emotion-0 .tt--info {
+.emotion-3 .tt--info {
   text-transform: lowercase;
   padding-left: 3.5px;
 }
 
-.emotion-0 .tt--info::before {
+.emotion-3 .tt--info::before {
   content: 'i';
 }
 
-.emotion-0 .msg {
+.emotion-3 .msg {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -4182,7 +4186,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
   top: calc(-30% + 1px);
 }
 
-.emotion-0 .icon:hover + .msg {
+.emotion-3 .icon:hover + .msg {
   visibility: visible;
 }
 
@@ -4389,16 +4393,19 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
         required={true}
       >
         <option
+          className="emotion-0"
           value="Does Not Apply"
         >
           Does Not Apply
         </option>
         <option
+          className="emotion-0"
           value="Civil Unions"
         >
           Civil Unions
         </option>
         <option
+          className="emotion-0"
           value="Domestic Partnership"
         >
           Domestic Partnership
@@ -4438,7 +4445,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
       >
         Required
         <span
-          className="tool-tip__wrapper emotion-0"
+          className="tool-tip__wrapper emotion-3"
         >
           <div
             className="icon"
@@ -4505,7 +4512,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
       >
         Required
         <span
-          className="tool-tip__wrapper emotion-0"
+          className="tool-tip__wrapper emotion-3"
         >
           <div
             className="icon"
@@ -4570,7 +4577,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
       >
         Required
         <span
-          className="tool-tip__wrapper emotion-0"
+          className="tool-tip__wrapper emotion-3"
         >
           <div
             className="icon"
diff --git a/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx b/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx
index 000abb170..5cffc393b 100644
--- a/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx
+++ b/modules-js/react-fleet/src/form-elements/SelectDropdown.tsx
@@ -1,6 +1,11 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+
 import React from 'react';
 import hash from 'string-hash';
 
+import { CHARLES_BLUE } from '../utilities/constants';
+
 interface Options {
   label: string;
   value: string;
@@ -66,7 +71,11 @@ export default function SelectDropdown(props: Props): JSX.Element {
   const opts = (_options: any) => {
     if (typeof _options[0] === 'object') {
       return _options.map((option: { value: any; label: React.ReactNode }) => (
-        <option key={`${id}_${option.value}`} value={option.value}>
+        <option
+          key={`${id}_${option.value}`}
+          value={option.value}
+          css={OPT_STYLING}
+        >
           {option.label}
         </option>
       ));
@@ -181,3 +190,7 @@ export default function SelectDropdown(props: Props): JSX.Element {
     </div>
   );
 }
+
+const OPT_STYLING = css(`
+  color: ${CHARLES_BLUE};
+`);
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index f12fcdebe..fb03bc12a 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -63501,32 +63501,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.css-1aiow01 .emotion-5:after {
+.css-1aiow01 .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-4 {
+.emotion-244 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-4 {
+  .emotion-244 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-4 .ra-l {
+.emotion-244 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-4 > div {
+.emotion-244 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-4 > div {
+  .emotion-244 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -63534,17 +63534,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-4 > .RADIOGROUP label {
+.emotion-244 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-4 h3 {
+.emotion-244 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-4 .notice {
+.emotion-244 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -63554,58 +63554,62 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   line-height: 1.5em;
 }
 
-.emotion-4 .emotion-5:after {
+.emotion-244 .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-4 .sel-c {
+.emotion-244 .sel-c {
   display: block;
 }
 
-.emotion-6 {
+.emotion-4 {
+  color: #091f2f;
+}
+
+.emotion-246 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-6 label {
+.emotion-246 label {
   margin-top: 0em;
 }
 
-.emotion-6 .spacingTop {
+.emotion-246 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-6 label.inputHeading {
+.emotion-246 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-6 label.inputHeading .t--req {
+.emotion-246 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-6 .t--opt {
+.emotion-246 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-6 {
+  .emotion-246 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-6 .ra-l {
+.emotion-246 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-6 > div {
+.emotion-246 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-6 > div {
+  .emotion-246 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -63613,17 +63617,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-6 > .RADIOGROUP label {
+.emotion-246 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-6 h3 {
+.emotion-246 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-6 .notice {
+.emotion-246 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -63633,7 +63637,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   line-height: 1.5em;
 }
 
-.emotion-6 .emotion-5:after {
+.emotion-246 .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -63675,43 +63679,43 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   margin-bottom: 2.25em;
 }
 
-.css-vfjwkx .emotion-5:after {
+.css-vfjwkx .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-wvkemw .emotion-5:after {
+.css-wvkemw .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1ahsdhq .emotion-5:after {
+.css-1ahsdhq .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1nb9jwk .emotion-5:after {
+.css-1nb9jwk .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-12yp9t2 .emotion-5:after {
+.css-12yp9t2 .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1ttcwo2 .emotion-5:after {
+.css-1ttcwo2 .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-99cy70 .emotion-5:after {
+.css-99cy70 .emotion-245:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
 <div
-  className="emotion-6"
+  className="emotion-246"
 >
   <h1
     className="emotion-0"
@@ -63841,7 +63845,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
     </div>
   </fieldset>
   <div
-    className="emotion-4"
+    className="emotion-244"
   >
     <div>
       <label
@@ -63889,1201 +63893,1441 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         >
           <option />
           <option
+            className="emotion-4"
             value="USA"
           >
             United States of America
           </option>
           <option
+            className="emotion-4"
             value="VIR"
           >
             United States Virgin Islands
           </option>
           <option
+            className="emotion-4"
             value="AFG"
           >
             Afghanistan
           </option>
           <option
+            className="emotion-4"
             value="ALA"
           >
             Åland Islands
           </option>
           <option
+            className="emotion-4"
             value="ALB"
           >
             Albania
           </option>
           <option
+            className="emotion-4"
             value="DZA"
           >
             Algeria
           </option>
           <option
+            className="emotion-4"
             value="ASM"
           >
             American Samoa
           </option>
           <option
+            className="emotion-4"
             value="AND"
           >
             Andorra
           </option>
           <option
+            className="emotion-4"
             value="AGO"
           >
             Angola
           </option>
           <option
+            className="emotion-4"
             value="AIA"
           >
             Anguilla
           </option>
           <option
+            className="emotion-4"
             value="ATG"
           >
             Antigua and Barbuda
           </option>
           <option
+            className="emotion-4"
             value="ARG"
           >
             Argentina
           </option>
           <option
+            className="emotion-4"
             value="ARM"
           >
             Armenia
           </option>
           <option
+            className="emotion-4"
             value="ABW"
           >
             Aruba
           </option>
           <option
+            className="emotion-4"
             value="AUS"
           >
             Australia
           </option>
           <option
+            className="emotion-4"
             value="AUT"
           >
             Austria
           </option>
           <option
+            className="emotion-4"
             value="AZE"
           >
             Azerbaijan
           </option>
           <option
+            className="emotion-4"
             value="BHS"
           >
             Bahamas
           </option>
           <option
+            className="emotion-4"
             value="BHR"
           >
             Bahrain
           </option>
           <option
+            className="emotion-4"
             value="BGD"
           >
             Bangladesh
           </option>
           <option
+            className="emotion-4"
             value="BRB"
           >
             Barbados
           </option>
           <option
+            className="emotion-4"
             value="BLR"
           >
             Belarus
           </option>
           <option
+            className="emotion-4"
             value="BEL"
           >
             Belgium
           </option>
           <option
+            className="emotion-4"
             value="BLZ"
           >
             Belize
           </option>
           <option
+            className="emotion-4"
             value="BEN"
           >
             Benin
           </option>
           <option
+            className="emotion-4"
             value="BMU"
           >
             Bermuda
           </option>
           <option
+            className="emotion-4"
             value="BTN"
           >
             Bhutan
           </option>
           <option
+            className="emotion-4"
             value="BOL"
           >
             Bolivia (Plurinational State of)
           </option>
           <option
+            className="emotion-4"
             value="BES"
           >
             Bonaire, Saint Eustatius and Saba
           </option>
           <option
+            className="emotion-4"
             value="BIH"
           >
             Bosnia and Herzegovina
           </option>
           <option
+            className="emotion-4"
             value="BWA"
           >
             Botswana
           </option>
           <option
+            className="emotion-4"
             value="BRA"
           >
             Brazil
           </option>
           <option
+            className="emotion-4"
             value="VGB"
           >
             British Virgin Islands
           </option>
           <option
+            className="emotion-4"
             value="BRN"
           >
             Brunei Darussalam
           </option>
           <option
+            className="emotion-4"
             value="BGR"
           >
             Bulgaria
           </option>
           <option
+            className="emotion-4"
             value="BFA"
           >
             Burkina Faso
           </option>
           <option
+            className="emotion-4"
             value="BDI"
           >
             Burundi
           </option>
           <option
+            className="emotion-4"
             value="CPV"
           >
             Cabo Verde
           </option>
           <option
+            className="emotion-4"
             value="KHM"
           >
             Cambodia
           </option>
           <option
+            className="emotion-4"
             value="CMR"
           >
             Cameroon
           </option>
           <option
+            className="emotion-4"
             value="CAN"
           >
             Canada
           </option>
           <option
+            className="emotion-4"
             value="CYM"
           >
             Cayman Islands
           </option>
           <option
+            className="emotion-4"
             value="CAF"
           >
             Central African Republic
           </option>
           <option
+            className="emotion-4"
             value="TCD"
           >
             Chad
           </option>
           <option
+            className="emotion-4"
             value="CHL"
           >
             Chile
           </option>
           <option
+            className="emotion-4"
             value="CHN"
           >
             China
           </option>
           <option
+            className="emotion-4"
             value="HKG"
           >
             China, Hong Kong Special Administrative Region
           </option>
           <option
+            className="emotion-4"
             value="MAC"
           >
             China, Macao Special Administrative Region
           </option>
           <option
+            className="emotion-4"
             value="COL"
           >
             Colombia
           </option>
           <option
+            className="emotion-4"
             value="COM"
           >
             Comoros
           </option>
           <option
+            className="emotion-4"
             value="COG"
           >
             Congo
           </option>
           <option
+            className="emotion-4"
             value="COK"
           >
             Cook Islands
           </option>
           <option
+            className="emotion-4"
             value="CRI"
           >
             Costa Rica
           </option>
           <option
+            className="emotion-4"
             value="CIV"
           >
             Côte d'Ivoire
           </option>
           <option
+            className="emotion-4"
             value="HRV"
           >
             Croatia
           </option>
           <option
+            className="emotion-4"
             value="CUB"
           >
             Cuba
           </option>
           <option
+            className="emotion-4"
             value="CUW"
           >
             Curaçao
           </option>
           <option
+            className="emotion-4"
             value="CYP"
           >
             Cyprus
           </option>
           <option
+            className="emotion-4"
             value="CZE"
           >
             Czech Republic
           </option>
           <option
+            className="emotion-4"
             value="PRK"
           >
             Democratic People's Republic of Korea
           </option>
           <option
+            className="emotion-4"
             value="COD"
           >
             Democratic Republic of the Congo
           </option>
           <option
+            className="emotion-4"
             value="DNK"
           >
             Denmark
           </option>
           <option
+            className="emotion-4"
             value="DJI"
           >
             Djibouti
           </option>
           <option
+            className="emotion-4"
             value="DMA"
           >
             Dominica
           </option>
           <option
+            className="emotion-4"
             value="DOM"
           >
             Dominican Republic
           </option>
           <option
+            className="emotion-4"
             value="ECU"
           >
             Ecuador
           </option>
           <option
+            className="emotion-4"
             value="EGY"
           >
             Egypt
           </option>
           <option
+            className="emotion-4"
             value="SLV"
           >
             El Salvador
           </option>
           <option
+            className="emotion-4"
             value="GNQ"
           >
             Equatorial Guinea
           </option>
           <option
+            className="emotion-4"
             value="ERI"
           >
             Eritrea
           </option>
           <option
+            className="emotion-4"
             value="EST"
           >
             Estonia
           </option>
           <option
+            className="emotion-4"
             value="ETH"
           >
             Ethiopia
           </option>
           <option
+            className="emotion-4"
             value="FRO"
           >
             Faeroe Islands
           </option>
           <option
+            className="emotion-4"
             value="FLK"
           >
             Falkland Islands (Malvinas)
           </option>
           <option
+            className="emotion-4"
             value="FJI"
           >
             Fiji
           </option>
           <option
+            className="emotion-4"
             value="FIN"
           >
             Finland
           </option>
           <option
+            className="emotion-4"
             value="FRA"
           >
             France
           </option>
           <option
+            className="emotion-4"
             value="GUF"
           >
             French Guiana
           </option>
           <option
+            className="emotion-4"
             value="PYF"
           >
             French Polynesia
           </option>
           <option
+            className="emotion-4"
             value="GAB"
           >
             Gabon
           </option>
           <option
+            className="emotion-4"
             value="GMB"
           >
             Gambia
           </option>
           <option
+            className="emotion-4"
             value="GEO"
           >
             Georgia
           </option>
           <option
+            className="emotion-4"
             value="DEU"
           >
             Germany
           </option>
           <option
+            className="emotion-4"
             value="GHA"
           >
             Ghana
           </option>
           <option
+            className="emotion-4"
             value="GIB"
           >
             Gibraltar
           </option>
           <option
+            className="emotion-4"
             value="GRC"
           >
             Greece
           </option>
           <option
+            className="emotion-4"
             value="GRL"
           >
             Greenland
           </option>
           <option
+            className="emotion-4"
             value="GRD"
           >
             Grenada
           </option>
           <option
+            className="emotion-4"
             value="GLP"
           >
             Guadeloupe
           </option>
           <option
+            className="emotion-4"
             value="GUM"
           >
             Guam
           </option>
           <option
+            className="emotion-4"
             value="GTM"
           >
             Guatemala
           </option>
           <option
+            className="emotion-4"
             value="GGY"
           >
             Guernsey
           </option>
           <option
+            className="emotion-4"
             value="GIN"
           >
             Guinea
           </option>
           <option
+            className="emotion-4"
             value="GNB"
           >
             Guinea-Bissau
           </option>
           <option
+            className="emotion-4"
             value="GUY"
           >
             Guyana
           </option>
           <option
+            className="emotion-4"
             value="HTI"
           >
             Haiti
           </option>
           <option
+            className="emotion-4"
             value="VAT"
           >
             Holy See
           </option>
           <option
+            className="emotion-4"
             value="HND"
           >
             Honduras
           </option>
           <option
+            className="emotion-4"
             value="HUN"
           >
             Hungary
           </option>
           <option
+            className="emotion-4"
             value="ISL"
           >
             Iceland
           </option>
           <option
+            className="emotion-4"
             value="IND"
           >
             India
           </option>
           <option
+            className="emotion-4"
             value="IDN"
           >
             Indonesia
           </option>
           <option
+            className="emotion-4"
             value="IRN"
           >
             Iran (Islamic Republic of)
           </option>
           <option
+            className="emotion-4"
             value="IRQ"
           >
             Iraq
           </option>
           <option
+            className="emotion-4"
             value="IRL"
           >
             Ireland
           </option>
           <option
+            className="emotion-4"
             value="IMN"
           >
             Isle of Man
           </option>
           <option
+            className="emotion-4"
             value="ISR"
           >
             Israel
           </option>
           <option
+            className="emotion-4"
             value="ITA"
           >
             Italy
           </option>
           <option
+            className="emotion-4"
             value="JAM"
           >
             Jamaica
           </option>
           <option
+            className="emotion-4"
             value="JPN"
           >
             Japan
           </option>
           <option
+            className="emotion-4"
             value="JEY"
           >
             Jersey
           </option>
           <option
+            className="emotion-4"
             value="JOR"
           >
             Jordan
           </option>
           <option
+            className="emotion-4"
             value="KAZ"
           >
             Kazakhstan
           </option>
           <option
+            className="emotion-4"
             value="KEN"
           >
             Kenya
           </option>
           <option
+            className="emotion-4"
             value="KIR"
           >
             Kiribati
           </option>
           <option
+            className="emotion-4"
             value="KWT"
           >
             Kuwait
           </option>
           <option
+            className="emotion-4"
             value="KGZ"
           >
             Kyrgyzstan
           </option>
           <option
+            className="emotion-4"
             value="LAO"
           >
             Lao People's Democratic Republic
           </option>
           <option
+            className="emotion-4"
             value="LVA"
           >
             Latvia
           </option>
           <option
+            className="emotion-4"
             value="LBN"
           >
             Lebanon
           </option>
           <option
+            className="emotion-4"
             value="LSO"
           >
             Lesotho
           </option>
           <option
+            className="emotion-4"
             value="LBR"
           >
             Liberia
           </option>
           <option
+            className="emotion-4"
             value="LBY"
           >
             Libya
           </option>
           <option
+            className="emotion-4"
             value="LIE"
           >
             Liechtenstein
           </option>
           <option
+            className="emotion-4"
             value="LTU"
           >
             Lithuania
           </option>
           <option
+            className="emotion-4"
             value="LUX"
           >
             Luxembourg
           </option>
           <option
+            className="emotion-4"
             value="MDG"
           >
             Madagascar
           </option>
           <option
+            className="emotion-4"
             value="MWI"
           >
             Malawi
           </option>
           <option
+            className="emotion-4"
             value="MYS"
           >
             Malaysia
           </option>
           <option
+            className="emotion-4"
             value="MDV"
           >
             Maldives
           </option>
           <option
+            className="emotion-4"
             value="MLI"
           >
             Mali
           </option>
           <option
+            className="emotion-4"
             value="MLT"
           >
             Malta
           </option>
           <option
+            className="emotion-4"
             value="MHL"
           >
             Marshall Islands
           </option>
           <option
+            className="emotion-4"
             value="MTQ"
           >
             Martinique
           </option>
           <option
+            className="emotion-4"
             value="MRT"
           >
             Mauritania
           </option>
           <option
+            className="emotion-4"
             value="MUS"
           >
             Mauritius
           </option>
           <option
+            className="emotion-4"
             value="MYT"
           >
             Mayotte
           </option>
           <option
+            className="emotion-4"
             value="MEX"
           >
             Mexico
           </option>
           <option
+            className="emotion-4"
             value="FSM"
           >
             Micronesia (Federated States of)
           </option>
           <option
+            className="emotion-4"
             value="MCO"
           >
             Monaco
           </option>
           <option
+            className="emotion-4"
             value="MNG"
           >
             Mongolia
           </option>
           <option
+            className="emotion-4"
             value="MNE"
           >
             Montenegro
           </option>
           <option
+            className="emotion-4"
             value="MSR"
           >
             Montserrat
           </option>
           <option
+            className="emotion-4"
             value="MAR"
           >
             Morocco
           </option>
           <option
+            className="emotion-4"
             value="MOZ"
           >
             Mozambique
           </option>
           <option
+            className="emotion-4"
             value="MMR"
           >
             Myanmar
           </option>
           <option
+            className="emotion-4"
             value="NAM"
           >
             Namibia
           </option>
           <option
+            className="emotion-4"
             value="NRU"
           >
             Nauru
           </option>
           <option
+            className="emotion-4"
             value="NPL"
           >
             Nepal
           </option>
           <option
+            className="emotion-4"
             value="NLD"
           >
             Netherlands
           </option>
           <option
+            className="emotion-4"
             value="NCL"
           >
             New Caledonia
           </option>
           <option
+            className="emotion-4"
             value="NZL"
           >
             New Zealand
           </option>
           <option
+            className="emotion-4"
             value="NIC"
           >
             Nicaragua
           </option>
           <option
+            className="emotion-4"
             value="NER"
           >
             Niger
           </option>
           <option
+            className="emotion-4"
             value="NGA"
           >
             Nigeria
           </option>
           <option
+            className="emotion-4"
             value="NIU"
           >
             Niue
           </option>
           <option
+            className="emotion-4"
             value="NFK"
           >
             Norfolk Island
           </option>
           <option
+            className="emotion-4"
             value="MNP"
           >
             Northern Mariana Islands
           </option>
           <option
+            className="emotion-4"
             value="NOR"
           >
             Norway
           </option>
           <option
+            className="emotion-4"
             value="OMN"
           >
             Oman
           </option>
           <option
+            className="emotion-4"
             value="PAK"
           >
             Pakistan
           </option>
           <option
+            className="emotion-4"
             value="PLW"
           >
             Palau
           </option>
           <option
+            className="emotion-4"
             value="PAN"
           >
             Panama
           </option>
           <option
+            className="emotion-4"
             value="PNG"
           >
             Papua New Guinea
           </option>
           <option
+            className="emotion-4"
             value="PRY"
           >
             Paraguay
           </option>
           <option
+            className="emotion-4"
             value="PER"
           >
             Peru
           </option>
           <option
+            className="emotion-4"
             value="PHL"
           >
             Philippines
           </option>
           <option
+            className="emotion-4"
             value="PCN"
           >
             Pitcairn
           </option>
           <option
+            className="emotion-4"
             value="POL"
           >
             Poland
           </option>
           <option
+            className="emotion-4"
             value="PRT"
           >
             Portugal
           </option>
           <option
+            className="emotion-4"
             value="PRI"
           >
             Puerto Rico
           </option>
           <option
+            className="emotion-4"
             value="QAT"
           >
             Qatar
           </option>
           <option
+            className="emotion-4"
             value="KOR"
           >
             Republic of Korea
           </option>
           <option
+            className="emotion-4"
             value="MDA"
           >
             Republic of Moldova
           </option>
           <option
+            className="emotion-4"
             value="REU"
           >
             Réunion
           </option>
           <option
+            className="emotion-4"
             value="ROU"
           >
             Romania
           </option>
           <option
+            className="emotion-4"
             value="RUS"
           >
             Russian Federation
           </option>
           <option
+            className="emotion-4"
             value="RWA"
           >
             Rwanda
           </option>
           <option
+            className="emotion-4"
             value="BLM"
           >
             Saint-Barthélemy
           </option>
           <option
+            className="emotion-4"
             value="SHN"
           >
             Saint Helena
           </option>
           <option
+            className="emotion-4"
             value="KNA"
           >
             Saint Kitts and Nevis
           </option>
           <option
+            className="emotion-4"
             value="LCA"
           >
             Saint Lucia
           </option>
           <option
+            className="emotion-4"
             value="MAF"
           >
             Saint-Martin (French part)
           </option>
           <option
+            className="emotion-4"
             value="SPM"
           >
             Saint Pierre and Miquelon
           </option>
           <option
+            className="emotion-4"
             value="VCT"
           >
             Saint Vincent and the Grenadines
           </option>
           <option
+            className="emotion-4"
             value="WSM"
           >
             Samoa
           </option>
           <option
+            className="emotion-4"
             value="SMR"
           >
             San Marino
           </option>
           <option
+            className="emotion-4"
             value="STP"
           >
             Sao Tome and Principe
           </option>
           <option
+            className="emotion-4"
             value="SAU"
           >
             Saudi Arabia
           </option>
           <option
+            className="emotion-4"
             value="SEN"
           >
             Senegal
           </option>
           <option
+            className="emotion-4"
             value="SRB"
           >
             Serbia
           </option>
           <option
+            className="emotion-4"
             value="SYC"
           >
             Seychelles
           </option>
           <option
+            className="emotion-4"
             value="SLE"
           >
             Sierra Leone
           </option>
           <option
+            className="emotion-4"
             value="SGP"
           >
             Singapore
           </option>
           <option
+            className="emotion-4"
             value="SXM"
           >
             Sint Maarten (Dutch part)
           </option>
           <option
+            className="emotion-4"
             value="SVK"
           >
             Slovakia
           </option>
           <option
+            className="emotion-4"
             value="SVN"
           >
             Slovenia
           </option>
           <option
+            className="emotion-4"
             value="SLB"
           >
             Solomon Islands
           </option>
           <option
+            className="emotion-4"
             value="SOM"
           >
             Somalia
           </option>
           <option
+            className="emotion-4"
             value="ZAF"
           >
             South Africa
           </option>
           <option
+            className="emotion-4"
             value="SSD"
           >
             South Sudan
           </option>
           <option
+            className="emotion-4"
             value="ESP"
           >
             Spain
           </option>
           <option
+            className="emotion-4"
             value="LKA"
           >
             Sri Lanka
           </option>
           <option
+            className="emotion-4"
             value="PSE"
           >
             State of Palestine
           </option>
           <option
+            className="emotion-4"
             value="SDN"
           >
             Sudan
           </option>
           <option
+            className="emotion-4"
             value="SUR"
           >
             Suriname
           </option>
           <option
+            className="emotion-4"
             value="SJM"
           >
             Svalbard and Jan Mayen Islands
           </option>
           <option
+            className="emotion-4"
             value="SWZ"
           >
             Swaziland
           </option>
           <option
+            className="emotion-4"
             value="SWE"
           >
             Sweden
           </option>
           <option
+            className="emotion-4"
             value="CHE"
           >
             Switzerland
           </option>
           <option
+            className="emotion-4"
             value="SYR"
           >
             Syrian Arab Republic
           </option>
           <option
+            className="emotion-4"
             value="TWAN"
           >
             Taiwan
           </option>
           <option
+            className="emotion-4"
             value="TJK"
           >
             Tajikistan
           </option>
           <option
+            className="emotion-4"
             value="THA"
           >
             Thailand
           </option>
           <option
+            className="emotion-4"
             value="MKD"
           >
             The former Yugoslav Republic of Macedonia
           </option>
           <option
+            className="emotion-4"
             value="TLS"
           >
             Timor-Leste
           </option>
           <option
+            className="emotion-4"
             value="TGO"
           >
             Togo
           </option>
           <option
+            className="emotion-4"
             value="TKL"
           >
             Tokelau
           </option>
           <option
+            className="emotion-4"
             value="TON"
           >
             Tonga
           </option>
           <option
+            className="emotion-4"
             value="TTO"
           >
             Trinidad and Tobago
           </option>
           <option
+            className="emotion-4"
             value="TUN"
           >
             Tunisia
           </option>
           <option
+            className="emotion-4"
             value="TUR"
           >
             Turkey
           </option>
           <option
+            className="emotion-4"
             value="TKM"
           >
             Turkmenistan
           </option>
           <option
+            className="emotion-4"
             value="TCA"
           >
             Turks and Caicos Islands
           </option>
           <option
+            className="emotion-4"
             value="TUV"
           >
             Tuvalu
           </option>
           <option
+            className="emotion-4"
             value="UGA"
           >
             Uganda
           </option>
           <option
+            className="emotion-4"
             value="UKR"
           >
             Ukraine
           </option>
           <option
+            className="emotion-4"
             value="ARE"
           >
             United Arab Emirates
           </option>
           <option
+            className="emotion-4"
             value="GBR"
           >
             United Kingdom of Great Britain and Northern Ireland
           </option>
           <option
+            className="emotion-4"
             value="TZA"
           >
             United Republic of Tanzania
           </option>
           <option
+            className="emotion-4"
             value="URY"
           >
             Uruguay
           </option>
           <option
+            className="emotion-4"
             value="UZB"
           >
             Uzbekistan
           </option>
           <option
+            className="emotion-4"
             value="VUT"
           >
             Vanuatu
           </option>
           <option
+            className="emotion-4"
             value="VEN"
           >
             Venezuela (Bolivarian Republic of)
           </option>
           <option
+            className="emotion-4"
             value="VNM"
           >
             Vietnam
           </option>
           <option
+            className="emotion-4"
             value="WLF"
           >
             Wallis and Futuna Islands
           </option>
           <option
+            className="emotion-4"
             value="ESH"
           >
             Western Sahara
           </option>
           <option
+            className="emotion-4"
             value="YEM"
           >
             Yemen
           </option>
           <option
+            className="emotion-4"
             value="ZMB"
           >
             Zambia
           </option>
           <option
+            className="emotion-4"
             value="ZWE"
           >
             Zimbabwe
@@ -65127,7 +65371,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         </span>
       </label>
       <label
-        className="notice emotion-5"
+        className="notice emotion-245"
       >
         Please list the city/town where the hospital was located, not where your family was living.
       </label>
@@ -65221,32 +65465,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.css-1aiow01 .emotion-7:after {
+.css-1aiow01 .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-4 {
+.emotion-244 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-4 {
+  .emotion-244 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-4 .ra-l {
+.emotion-244 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-4 > div {
+.emotion-244 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-4 > div {
+  .emotion-244 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -65254,17 +65498,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-4 > .RADIOGROUP label {
+.emotion-244 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-4 h3 {
+.emotion-244 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-4 .notice {
+.emotion-244 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -65274,58 +65518,62 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   line-height: 1.5em;
 }
 
-.emotion-4 .emotion-7:after {
+.emotion-244 .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-4 .sel-c {
+.emotion-244 .sel-c {
   display: block;
 }
 
-.emotion-8 {
+.emotion-4 {
+  color: #091f2f;
+}
+
+.emotion-300 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-8 label {
+.emotion-300 label {
   margin-top: 0em;
 }
 
-.emotion-8 .spacingTop {
+.emotion-300 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-8 label.inputHeading {
+.emotion-300 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-8 label.inputHeading .t--req {
+.emotion-300 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-8 .t--opt {
+.emotion-300 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 {
+  .emotion-300 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-8 .ra-l {
+.emotion-300 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-8 > div {
+.emotion-300 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 > div {
+  .emotion-300 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -65333,17 +65581,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-8 > .RADIOGROUP label {
+.emotion-300 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-8 h3 {
+.emotion-300 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-8 .notice {
+.emotion-300 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -65353,7 +65601,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   line-height: 1.5em;
 }
 
-.emotion-8 .emotion-7:after {
+.emotion-300 .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -65395,74 +65643,74 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   margin-bottom: 2.25em;
 }
 
-.css-vfjwkx .emotion-7:after {
+.css-vfjwkx .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-wvkemw .emotion-7:after {
+.css-wvkemw .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1ahsdhq .emotion-7:after {
+.css-1ahsdhq .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1nb9jwk .emotion-7:after {
+.css-1nb9jwk .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-12yp9t2 .emotion-7:after {
+.css-12yp9t2 .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1ttcwo2 .emotion-7:after {
+.css-1ttcwo2 .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-99cy70 .emotion-7:after {
+.css-99cy70 .emotion-299:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-6 {
+.emotion-298 {
   margin-bottom: 3em;
   background: none;
   margin-bottom: 2em;
 }
 
-.emotion-6 label {
+.emotion-298 label {
   margin-top: 0em;
 }
 
-.emotion-6 .spacingTop {
+.emotion-298 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-6 label.inputHeading {
+.emotion-298 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-6 label.inputHeading .t--req {
+.emotion-298 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-6 .t--opt {
+.emotion-298 .t--opt {
   color: #58585b !important;
 }
 
-.emotion-5 .sel-c {
+.emotion-297 .sel-c {
   display: block;
 }
 
 <div
-  className="emotion-8"
+  className="emotion-300"
 >
   <h1
     className="emotion-0"
@@ -65592,7 +65840,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
     </div>
   </fieldset>
   <div
-    className="emotion-4"
+    className="emotion-244"
   >
     <div>
       <label
@@ -65640,1201 +65888,1441 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         >
           <option />
           <option
+            className="emotion-4"
             value="USA"
           >
             United States of America
           </option>
           <option
+            className="emotion-4"
             value="VIR"
           >
             United States Virgin Islands
           </option>
           <option
+            className="emotion-4"
             value="AFG"
           >
             Afghanistan
           </option>
           <option
+            className="emotion-4"
             value="ALA"
           >
             Åland Islands
           </option>
           <option
+            className="emotion-4"
             value="ALB"
           >
             Albania
           </option>
           <option
+            className="emotion-4"
             value="DZA"
           >
             Algeria
           </option>
           <option
+            className="emotion-4"
             value="ASM"
           >
             American Samoa
           </option>
           <option
+            className="emotion-4"
             value="AND"
           >
             Andorra
           </option>
           <option
+            className="emotion-4"
             value="AGO"
           >
             Angola
           </option>
           <option
+            className="emotion-4"
             value="AIA"
           >
             Anguilla
           </option>
           <option
+            className="emotion-4"
             value="ATG"
           >
             Antigua and Barbuda
           </option>
           <option
+            className="emotion-4"
             value="ARG"
           >
             Argentina
           </option>
           <option
+            className="emotion-4"
             value="ARM"
           >
             Armenia
           </option>
           <option
+            className="emotion-4"
             value="ABW"
           >
             Aruba
           </option>
           <option
+            className="emotion-4"
             value="AUS"
           >
             Australia
           </option>
           <option
+            className="emotion-4"
             value="AUT"
           >
             Austria
           </option>
           <option
+            className="emotion-4"
             value="AZE"
           >
             Azerbaijan
           </option>
           <option
+            className="emotion-4"
             value="BHS"
           >
             Bahamas
           </option>
           <option
+            className="emotion-4"
             value="BHR"
           >
             Bahrain
           </option>
           <option
+            className="emotion-4"
             value="BGD"
           >
             Bangladesh
           </option>
           <option
+            className="emotion-4"
             value="BRB"
           >
             Barbados
           </option>
           <option
+            className="emotion-4"
             value="BLR"
           >
             Belarus
           </option>
           <option
+            className="emotion-4"
             value="BEL"
           >
             Belgium
           </option>
           <option
+            className="emotion-4"
             value="BLZ"
           >
             Belize
           </option>
           <option
+            className="emotion-4"
             value="BEN"
           >
             Benin
           </option>
           <option
+            className="emotion-4"
             value="BMU"
           >
             Bermuda
           </option>
           <option
+            className="emotion-4"
             value="BTN"
           >
             Bhutan
           </option>
           <option
+            className="emotion-4"
             value="BOL"
           >
             Bolivia (Plurinational State of)
           </option>
           <option
+            className="emotion-4"
             value="BES"
           >
             Bonaire, Saint Eustatius and Saba
           </option>
           <option
+            className="emotion-4"
             value="BIH"
           >
             Bosnia and Herzegovina
           </option>
           <option
+            className="emotion-4"
             value="BWA"
           >
             Botswana
           </option>
           <option
+            className="emotion-4"
             value="BRA"
           >
             Brazil
           </option>
           <option
+            className="emotion-4"
             value="VGB"
           >
             British Virgin Islands
           </option>
           <option
+            className="emotion-4"
             value="BRN"
           >
             Brunei Darussalam
           </option>
           <option
+            className="emotion-4"
             value="BGR"
           >
             Bulgaria
           </option>
           <option
+            className="emotion-4"
             value="BFA"
           >
             Burkina Faso
           </option>
           <option
+            className="emotion-4"
             value="BDI"
           >
             Burundi
           </option>
           <option
+            className="emotion-4"
             value="CPV"
           >
             Cabo Verde
           </option>
           <option
+            className="emotion-4"
             value="KHM"
           >
             Cambodia
           </option>
           <option
+            className="emotion-4"
             value="CMR"
           >
             Cameroon
           </option>
           <option
+            className="emotion-4"
             value="CAN"
           >
             Canada
           </option>
           <option
+            className="emotion-4"
             value="CYM"
           >
             Cayman Islands
           </option>
           <option
+            className="emotion-4"
             value="CAF"
           >
             Central African Republic
           </option>
           <option
+            className="emotion-4"
             value="TCD"
           >
             Chad
           </option>
           <option
+            className="emotion-4"
             value="CHL"
           >
             Chile
           </option>
           <option
+            className="emotion-4"
             value="CHN"
           >
             China
           </option>
           <option
+            className="emotion-4"
             value="HKG"
           >
             China, Hong Kong Special Administrative Region
           </option>
           <option
+            className="emotion-4"
             value="MAC"
           >
             China, Macao Special Administrative Region
           </option>
           <option
+            className="emotion-4"
             value="COL"
           >
             Colombia
           </option>
           <option
+            className="emotion-4"
             value="COM"
           >
             Comoros
           </option>
           <option
+            className="emotion-4"
             value="COG"
           >
             Congo
           </option>
           <option
+            className="emotion-4"
             value="COK"
           >
             Cook Islands
           </option>
           <option
+            className="emotion-4"
             value="CRI"
           >
             Costa Rica
           </option>
           <option
+            className="emotion-4"
             value="CIV"
           >
             Côte d'Ivoire
           </option>
           <option
+            className="emotion-4"
             value="HRV"
           >
             Croatia
           </option>
           <option
+            className="emotion-4"
             value="CUB"
           >
             Cuba
           </option>
           <option
+            className="emotion-4"
             value="CUW"
           >
             Curaçao
           </option>
           <option
+            className="emotion-4"
             value="CYP"
           >
             Cyprus
           </option>
           <option
+            className="emotion-4"
             value="CZE"
           >
             Czech Republic
           </option>
           <option
+            className="emotion-4"
             value="PRK"
           >
             Democratic People's Republic of Korea
           </option>
           <option
+            className="emotion-4"
             value="COD"
           >
             Democratic Republic of the Congo
           </option>
           <option
+            className="emotion-4"
             value="DNK"
           >
             Denmark
           </option>
           <option
+            className="emotion-4"
             value="DJI"
           >
             Djibouti
           </option>
           <option
+            className="emotion-4"
             value="DMA"
           >
             Dominica
           </option>
           <option
+            className="emotion-4"
             value="DOM"
           >
             Dominican Republic
           </option>
           <option
+            className="emotion-4"
             value="ECU"
           >
             Ecuador
           </option>
           <option
+            className="emotion-4"
             value="EGY"
           >
             Egypt
           </option>
           <option
+            className="emotion-4"
             value="SLV"
           >
             El Salvador
           </option>
           <option
+            className="emotion-4"
             value="GNQ"
           >
             Equatorial Guinea
           </option>
           <option
+            className="emotion-4"
             value="ERI"
           >
             Eritrea
           </option>
           <option
+            className="emotion-4"
             value="EST"
           >
             Estonia
           </option>
           <option
+            className="emotion-4"
             value="ETH"
           >
             Ethiopia
           </option>
           <option
+            className="emotion-4"
             value="FRO"
           >
             Faeroe Islands
           </option>
           <option
+            className="emotion-4"
             value="FLK"
           >
             Falkland Islands (Malvinas)
           </option>
           <option
+            className="emotion-4"
             value="FJI"
           >
             Fiji
           </option>
           <option
+            className="emotion-4"
             value="FIN"
           >
             Finland
           </option>
           <option
+            className="emotion-4"
             value="FRA"
           >
             France
           </option>
           <option
+            className="emotion-4"
             value="GUF"
           >
             French Guiana
           </option>
           <option
+            className="emotion-4"
             value="PYF"
           >
             French Polynesia
           </option>
           <option
+            className="emotion-4"
             value="GAB"
           >
             Gabon
           </option>
           <option
+            className="emotion-4"
             value="GMB"
           >
             Gambia
           </option>
           <option
+            className="emotion-4"
             value="GEO"
           >
             Georgia
           </option>
           <option
+            className="emotion-4"
             value="DEU"
           >
             Germany
           </option>
           <option
+            className="emotion-4"
             value="GHA"
           >
             Ghana
           </option>
           <option
+            className="emotion-4"
             value="GIB"
           >
             Gibraltar
           </option>
           <option
+            className="emotion-4"
             value="GRC"
           >
             Greece
           </option>
           <option
+            className="emotion-4"
             value="GRL"
           >
             Greenland
           </option>
           <option
+            className="emotion-4"
             value="GRD"
           >
             Grenada
           </option>
           <option
+            className="emotion-4"
             value="GLP"
           >
             Guadeloupe
           </option>
           <option
+            className="emotion-4"
             value="GUM"
           >
             Guam
           </option>
           <option
+            className="emotion-4"
             value="GTM"
           >
             Guatemala
           </option>
           <option
+            className="emotion-4"
             value="GGY"
           >
             Guernsey
           </option>
           <option
+            className="emotion-4"
             value="GIN"
           >
             Guinea
           </option>
           <option
+            className="emotion-4"
             value="GNB"
           >
             Guinea-Bissau
           </option>
           <option
+            className="emotion-4"
             value="GUY"
           >
             Guyana
           </option>
           <option
+            className="emotion-4"
             value="HTI"
           >
             Haiti
           </option>
           <option
+            className="emotion-4"
             value="VAT"
           >
             Holy See
           </option>
           <option
+            className="emotion-4"
             value="HND"
           >
             Honduras
           </option>
           <option
+            className="emotion-4"
             value="HUN"
           >
             Hungary
           </option>
           <option
+            className="emotion-4"
             value="ISL"
           >
             Iceland
           </option>
           <option
+            className="emotion-4"
             value="IND"
           >
             India
           </option>
           <option
+            className="emotion-4"
             value="IDN"
           >
             Indonesia
           </option>
           <option
+            className="emotion-4"
             value="IRN"
           >
             Iran (Islamic Republic of)
           </option>
           <option
+            className="emotion-4"
             value="IRQ"
           >
             Iraq
           </option>
           <option
+            className="emotion-4"
             value="IRL"
           >
             Ireland
           </option>
           <option
+            className="emotion-4"
             value="IMN"
           >
             Isle of Man
           </option>
           <option
+            className="emotion-4"
             value="ISR"
           >
             Israel
           </option>
           <option
+            className="emotion-4"
             value="ITA"
           >
             Italy
           </option>
           <option
+            className="emotion-4"
             value="JAM"
           >
             Jamaica
           </option>
           <option
+            className="emotion-4"
             value="JPN"
           >
             Japan
           </option>
           <option
+            className="emotion-4"
             value="JEY"
           >
             Jersey
           </option>
           <option
+            className="emotion-4"
             value="JOR"
           >
             Jordan
           </option>
           <option
+            className="emotion-4"
             value="KAZ"
           >
             Kazakhstan
           </option>
           <option
+            className="emotion-4"
             value="KEN"
           >
             Kenya
           </option>
           <option
+            className="emotion-4"
             value="KIR"
           >
             Kiribati
           </option>
           <option
+            className="emotion-4"
             value="KWT"
           >
             Kuwait
           </option>
           <option
+            className="emotion-4"
             value="KGZ"
           >
             Kyrgyzstan
           </option>
           <option
+            className="emotion-4"
             value="LAO"
           >
             Lao People's Democratic Republic
           </option>
           <option
+            className="emotion-4"
             value="LVA"
           >
             Latvia
           </option>
           <option
+            className="emotion-4"
             value="LBN"
           >
             Lebanon
           </option>
           <option
+            className="emotion-4"
             value="LSO"
           >
             Lesotho
           </option>
           <option
+            className="emotion-4"
             value="LBR"
           >
             Liberia
           </option>
           <option
+            className="emotion-4"
             value="LBY"
           >
             Libya
           </option>
           <option
+            className="emotion-4"
             value="LIE"
           >
             Liechtenstein
           </option>
           <option
+            className="emotion-4"
             value="LTU"
           >
             Lithuania
           </option>
           <option
+            className="emotion-4"
             value="LUX"
           >
             Luxembourg
           </option>
           <option
+            className="emotion-4"
             value="MDG"
           >
             Madagascar
           </option>
           <option
+            className="emotion-4"
             value="MWI"
           >
             Malawi
           </option>
           <option
+            className="emotion-4"
             value="MYS"
           >
             Malaysia
           </option>
           <option
+            className="emotion-4"
             value="MDV"
           >
             Maldives
           </option>
           <option
+            className="emotion-4"
             value="MLI"
           >
             Mali
           </option>
           <option
+            className="emotion-4"
             value="MLT"
           >
             Malta
           </option>
           <option
+            className="emotion-4"
             value="MHL"
           >
             Marshall Islands
           </option>
           <option
+            className="emotion-4"
             value="MTQ"
           >
             Martinique
           </option>
           <option
+            className="emotion-4"
             value="MRT"
           >
             Mauritania
           </option>
           <option
+            className="emotion-4"
             value="MUS"
           >
             Mauritius
           </option>
           <option
+            className="emotion-4"
             value="MYT"
           >
             Mayotte
           </option>
           <option
+            className="emotion-4"
             value="MEX"
           >
             Mexico
           </option>
           <option
+            className="emotion-4"
             value="FSM"
           >
             Micronesia (Federated States of)
           </option>
           <option
+            className="emotion-4"
             value="MCO"
           >
             Monaco
           </option>
           <option
+            className="emotion-4"
             value="MNG"
           >
             Mongolia
           </option>
           <option
+            className="emotion-4"
             value="MNE"
           >
             Montenegro
           </option>
           <option
+            className="emotion-4"
             value="MSR"
           >
             Montserrat
           </option>
           <option
+            className="emotion-4"
             value="MAR"
           >
             Morocco
           </option>
           <option
+            className="emotion-4"
             value="MOZ"
           >
             Mozambique
           </option>
           <option
+            className="emotion-4"
             value="MMR"
           >
             Myanmar
           </option>
           <option
+            className="emotion-4"
             value="NAM"
           >
             Namibia
           </option>
           <option
+            className="emotion-4"
             value="NRU"
           >
             Nauru
           </option>
           <option
+            className="emotion-4"
             value="NPL"
           >
             Nepal
           </option>
           <option
+            className="emotion-4"
             value="NLD"
           >
             Netherlands
           </option>
           <option
+            className="emotion-4"
             value="NCL"
           >
             New Caledonia
           </option>
           <option
+            className="emotion-4"
             value="NZL"
           >
             New Zealand
           </option>
           <option
+            className="emotion-4"
             value="NIC"
           >
             Nicaragua
           </option>
           <option
+            className="emotion-4"
             value="NER"
           >
             Niger
           </option>
           <option
+            className="emotion-4"
             value="NGA"
           >
             Nigeria
           </option>
           <option
+            className="emotion-4"
             value="NIU"
           >
             Niue
           </option>
           <option
+            className="emotion-4"
             value="NFK"
           >
             Norfolk Island
           </option>
           <option
+            className="emotion-4"
             value="MNP"
           >
             Northern Mariana Islands
           </option>
           <option
+            className="emotion-4"
             value="NOR"
           >
             Norway
           </option>
           <option
+            className="emotion-4"
             value="OMN"
           >
             Oman
           </option>
           <option
+            className="emotion-4"
             value="PAK"
           >
             Pakistan
           </option>
           <option
+            className="emotion-4"
             value="PLW"
           >
             Palau
           </option>
           <option
+            className="emotion-4"
             value="PAN"
           >
             Panama
           </option>
           <option
+            className="emotion-4"
             value="PNG"
           >
             Papua New Guinea
           </option>
           <option
+            className="emotion-4"
             value="PRY"
           >
             Paraguay
           </option>
           <option
+            className="emotion-4"
             value="PER"
           >
             Peru
           </option>
           <option
+            className="emotion-4"
             value="PHL"
           >
             Philippines
           </option>
           <option
+            className="emotion-4"
             value="PCN"
           >
             Pitcairn
           </option>
           <option
+            className="emotion-4"
             value="POL"
           >
             Poland
           </option>
           <option
+            className="emotion-4"
             value="PRT"
           >
             Portugal
           </option>
           <option
+            className="emotion-4"
             value="PRI"
           >
             Puerto Rico
           </option>
           <option
+            className="emotion-4"
             value="QAT"
           >
             Qatar
           </option>
           <option
+            className="emotion-4"
             value="KOR"
           >
             Republic of Korea
           </option>
           <option
+            className="emotion-4"
             value="MDA"
           >
             Republic of Moldova
           </option>
           <option
+            className="emotion-4"
             value="REU"
           >
             Réunion
           </option>
           <option
+            className="emotion-4"
             value="ROU"
           >
             Romania
           </option>
           <option
+            className="emotion-4"
             value="RUS"
           >
             Russian Federation
           </option>
           <option
+            className="emotion-4"
             value="RWA"
           >
             Rwanda
           </option>
           <option
+            className="emotion-4"
             value="BLM"
           >
             Saint-Barthélemy
           </option>
           <option
+            className="emotion-4"
             value="SHN"
           >
             Saint Helena
           </option>
           <option
+            className="emotion-4"
             value="KNA"
           >
             Saint Kitts and Nevis
           </option>
           <option
+            className="emotion-4"
             value="LCA"
           >
             Saint Lucia
           </option>
           <option
+            className="emotion-4"
             value="MAF"
           >
             Saint-Martin (French part)
           </option>
           <option
+            className="emotion-4"
             value="SPM"
           >
             Saint Pierre and Miquelon
           </option>
           <option
+            className="emotion-4"
             value="VCT"
           >
             Saint Vincent and the Grenadines
           </option>
           <option
+            className="emotion-4"
             value="WSM"
           >
             Samoa
           </option>
           <option
+            className="emotion-4"
             value="SMR"
           >
             San Marino
           </option>
           <option
+            className="emotion-4"
             value="STP"
           >
             Sao Tome and Principe
           </option>
           <option
+            className="emotion-4"
             value="SAU"
           >
             Saudi Arabia
           </option>
           <option
+            className="emotion-4"
             value="SEN"
           >
             Senegal
           </option>
           <option
+            className="emotion-4"
             value="SRB"
           >
             Serbia
           </option>
           <option
+            className="emotion-4"
             value="SYC"
           >
             Seychelles
           </option>
           <option
+            className="emotion-4"
             value="SLE"
           >
             Sierra Leone
           </option>
           <option
+            className="emotion-4"
             value="SGP"
           >
             Singapore
           </option>
           <option
+            className="emotion-4"
             value="SXM"
           >
             Sint Maarten (Dutch part)
           </option>
           <option
+            className="emotion-4"
             value="SVK"
           >
             Slovakia
           </option>
           <option
+            className="emotion-4"
             value="SVN"
           >
             Slovenia
           </option>
           <option
+            className="emotion-4"
             value="SLB"
           >
             Solomon Islands
           </option>
           <option
+            className="emotion-4"
             value="SOM"
           >
             Somalia
           </option>
           <option
+            className="emotion-4"
             value="ZAF"
           >
             South Africa
           </option>
           <option
+            className="emotion-4"
             value="SSD"
           >
             South Sudan
           </option>
           <option
+            className="emotion-4"
             value="ESP"
           >
             Spain
           </option>
           <option
+            className="emotion-4"
             value="LKA"
           >
             Sri Lanka
           </option>
           <option
+            className="emotion-4"
             value="PSE"
           >
             State of Palestine
           </option>
           <option
+            className="emotion-4"
             value="SDN"
           >
             Sudan
           </option>
           <option
+            className="emotion-4"
             value="SUR"
           >
             Suriname
           </option>
           <option
+            className="emotion-4"
             value="SJM"
           >
             Svalbard and Jan Mayen Islands
           </option>
           <option
+            className="emotion-4"
             value="SWZ"
           >
             Swaziland
           </option>
           <option
+            className="emotion-4"
             value="SWE"
           >
             Sweden
           </option>
           <option
+            className="emotion-4"
             value="CHE"
           >
             Switzerland
           </option>
           <option
+            className="emotion-4"
             value="SYR"
           >
             Syrian Arab Republic
           </option>
           <option
+            className="emotion-4"
             value="TWAN"
           >
             Taiwan
           </option>
           <option
+            className="emotion-4"
             value="TJK"
           >
             Tajikistan
           </option>
           <option
+            className="emotion-4"
             value="THA"
           >
             Thailand
           </option>
           <option
+            className="emotion-4"
             value="MKD"
           >
             The former Yugoslav Republic of Macedonia
           </option>
           <option
+            className="emotion-4"
             value="TLS"
           >
             Timor-Leste
           </option>
           <option
+            className="emotion-4"
             value="TGO"
           >
             Togo
           </option>
           <option
+            className="emotion-4"
             value="TKL"
           >
             Tokelau
           </option>
           <option
+            className="emotion-4"
             value="TON"
           >
             Tonga
           </option>
           <option
+            className="emotion-4"
             value="TTO"
           >
             Trinidad and Tobago
           </option>
           <option
+            className="emotion-4"
             value="TUN"
           >
             Tunisia
           </option>
           <option
+            className="emotion-4"
             value="TUR"
           >
             Turkey
           </option>
           <option
+            className="emotion-4"
             value="TKM"
           >
             Turkmenistan
           </option>
           <option
+            className="emotion-4"
             value="TCA"
           >
             Turks and Caicos Islands
           </option>
           <option
+            className="emotion-4"
             value="TUV"
           >
             Tuvalu
           </option>
           <option
+            className="emotion-4"
             value="UGA"
           >
             Uganda
           </option>
           <option
+            className="emotion-4"
             value="UKR"
           >
             Ukraine
           </option>
           <option
+            className="emotion-4"
             value="ARE"
           >
             United Arab Emirates
           </option>
           <option
+            className="emotion-4"
             value="GBR"
           >
             United Kingdom of Great Britain and Northern Ireland
           </option>
           <option
+            className="emotion-4"
             value="TZA"
           >
             United Republic of Tanzania
           </option>
           <option
+            className="emotion-4"
             value="URY"
           >
             Uruguay
           </option>
           <option
+            className="emotion-4"
             value="UZB"
           >
             Uzbekistan
           </option>
           <option
+            className="emotion-4"
             value="VUT"
           >
             Vanuatu
           </option>
           <option
+            className="emotion-4"
             value="VEN"
           >
             Venezuela (Bolivarian Republic of)
           </option>
           <option
+            className="emotion-4"
             value="VNM"
           >
             Vietnam
           </option>
           <option
+            className="emotion-4"
             value="WLF"
           >
             Wallis and Futuna Islands
           </option>
           <option
+            className="emotion-4"
             value="ESH"
           >
             Western Sahara
           </option>
           <option
+            className="emotion-4"
             value="YEM"
           >
             Yemen
           </option>
           <option
+            className="emotion-4"
             value="ZMB"
           >
             Zambia
           </option>
           <option
+            className="emotion-4"
             value="ZWE"
           >
             Zimbabwe
@@ -66844,10 +67332,10 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
     </div>
   </div>
   <div
-    className="emotion-6"
+    className="emotion-298"
   >
     <div
-      className="emotion-5"
+      className="emotion-297"
     >
       <div>
         <label
@@ -66894,261 +67382,313 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
             value="MA"
           >
             <option
+              className="emotion-4"
               value=""
             >
               --
             </option>
             <option
+              className="emotion-4"
               value="AL"
             >
               AL
             </option>
             <option
+              className="emotion-4"
               value="AK"
             >
               AK
             </option>
             <option
+              className="emotion-4"
               value="AZ"
             >
               AZ
             </option>
             <option
+              className="emotion-4"
               value="AR"
             >
               AR
             </option>
             <option
+              className="emotion-4"
               value="CA"
             >
               CA
             </option>
             <option
+              className="emotion-4"
               value="CO"
             >
               CO
             </option>
             <option
+              className="emotion-4"
               value="CT"
             >
               CT
             </option>
             <option
+              className="emotion-4"
               value="DE"
             >
               DE
             </option>
             <option
+              className="emotion-4"
               value="DC"
             >
               DC
             </option>
             <option
+              className="emotion-4"
               value="FL"
             >
               FL
             </option>
             <option
+              className="emotion-4"
               value="GA"
             >
               GA
             </option>
             <option
+              className="emotion-4"
               value="HI"
             >
               HI
             </option>
             <option
+              className="emotion-4"
               value="ID"
             >
               ID
             </option>
             <option
+              className="emotion-4"
               value="IL"
             >
               IL
             </option>
             <option
+              className="emotion-4"
               value="IN"
             >
               IN
             </option>
             <option
+              className="emotion-4"
               value="IA"
             >
               IA
             </option>
             <option
+              className="emotion-4"
               value="KS"
             >
               KS
             </option>
             <option
+              className="emotion-4"
               value="KY"
             >
               KY
             </option>
             <option
+              className="emotion-4"
               value="LA"
             >
               LA
             </option>
             <option
+              className="emotion-4"
               value="ME"
             >
               ME
             </option>
             <option
+              className="emotion-4"
               value="MD"
             >
               MD
             </option>
             <option
+              className="emotion-4"
               value="MA"
             >
               MA
             </option>
             <option
+              className="emotion-4"
               value="MI"
             >
               MI
             </option>
             <option
+              className="emotion-4"
               value="MN"
             >
               MN
             </option>
             <option
+              className="emotion-4"
               value="MS"
             >
               MS
             </option>
             <option
+              className="emotion-4"
               value="MO"
             >
               MO
             </option>
             <option
+              className="emotion-4"
               value="MT"
             >
               MT
             </option>
             <option
+              className="emotion-4"
               value="NE"
             >
               NE
             </option>
             <option
+              className="emotion-4"
               value="NV"
             >
               NV
             </option>
             <option
+              className="emotion-4"
               value="NH"
             >
               NH
             </option>
             <option
+              className="emotion-4"
               value="NJ"
             >
               NJ
             </option>
             <option
+              className="emotion-4"
               value="NM"
             >
               NM
             </option>
             <option
+              className="emotion-4"
               value="NY"
             >
               NY
             </option>
             <option
+              className="emotion-4"
               value="NC"
             >
               NC
             </option>
             <option
+              className="emotion-4"
               value="ND"
             >
               ND
             </option>
             <option
+              className="emotion-4"
               value="OH"
             >
               OH
             </option>
             <option
+              className="emotion-4"
               value="OK"
             >
               OK
             </option>
             <option
+              className="emotion-4"
               value="OR"
             >
               OR
             </option>
             <option
+              className="emotion-4"
               value="PA"
             >
               PA
             </option>
             <option
+              className="emotion-4"
               value="RI"
             >
               RI
             </option>
             <option
+              className="emotion-4"
               value="SC"
             >
               SC
             </option>
             <option
+              className="emotion-4"
               value="SD"
             >
               SD
             </option>
             <option
+              className="emotion-4"
               value="TN"
             >
               TN
             </option>
             <option
+              className="emotion-4"
               value="TX"
             >
               TX
             </option>
             <option
+              className="emotion-4"
               value="UT"
             >
               UT
             </option>
             <option
+              className="emotion-4"
               value="VT"
             >
               VT
             </option>
             <option
+              className="emotion-4"
               value="VA"
             >
               VA
             </option>
             <option
+              className="emotion-4"
               value="WA"
             >
               WA
             </option>
             <option
+              className="emotion-4"
               value="WV"
             >
               WV
             </option>
             <option
+              className="emotion-4"
               value="WI"
             >
               WI
             </option>
             <option
+              className="emotion-4"
               value="WY"
             >
               WY
@@ -67193,7 +67733,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         </span>
       </label>
       <label
-        className="notice emotion-7"
+        className="notice emotion-299"
       >
         Please list the city/town where the hospital was located, not where your family was living.
       </label>
@@ -67287,27 +67827,27 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-4 {
+.emotion-244 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-4 {
+  .emotion-244 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-4 .ra-l {
+.emotion-244 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-4 > div {
+.emotion-244 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-4 > div {
+  .emotion-244 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -67315,17 +67855,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-4 > .RADIOGROUP label {
+.emotion-244 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-4 h3 {
+.emotion-244 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-4 .notice {
+.emotion-244 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -67335,58 +67875,62 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   line-height: 1.5em;
 }
 
-.emotion-4 .css-content-psedo:after {
+.emotion-244 .css-content-psedo:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-4 .sel-c {
+.emotion-244 .sel-c {
   display: block;
 }
 
-.emotion-5 {
+.emotion-4 {
+  color: #091f2f;
+}
+
+.emotion-245 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-5 label {
+.emotion-245 label {
   margin-top: 0em;
 }
 
-.emotion-5 .spacingTop {
+.emotion-245 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-5 label.inputHeading {
+.emotion-245 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-5 label.inputHeading .t--req {
+.emotion-245 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-5 .t--opt {
+.emotion-245 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-5 {
+  .emotion-245 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-5 .ra-l {
+.emotion-245 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-5 > div {
+.emotion-245 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-5 > div {
+  .emotion-245 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -67394,17 +67938,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   }
 }
 
-.emotion-5 > .RADIOGROUP label {
+.emotion-245 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-5 h3 {
+.emotion-245 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-5 .notice {
+.emotion-245 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -67414,7 +67958,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
   line-height: 1.5em;
 }
 
-.emotion-5 .css-content-psedo:after {
+.emotion-245 .css-content-psedo:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -67457,7 +68001,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
 }
 
 <div
-  className="emotion-5"
+  className="emotion-245"
 >
   <h1
     className="emotion-0"
@@ -67587,7 +68131,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
     </div>
   </fieldset>
   <div
-    className="emotion-4"
+    className="emotion-244"
   >
     <div>
       <label
@@ -67635,1201 +68179,1441 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         >
           <option />
           <option
+            className="emotion-4"
             value="USA"
           >
             United States of America
           </option>
           <option
+            className="emotion-4"
             value="VIR"
           >
             United States Virgin Islands
           </option>
           <option
+            className="emotion-4"
             value="AFG"
           >
             Afghanistan
           </option>
           <option
+            className="emotion-4"
             value="ALA"
           >
             Åland Islands
           </option>
           <option
+            className="emotion-4"
             value="ALB"
           >
             Albania
           </option>
           <option
+            className="emotion-4"
             value="DZA"
           >
             Algeria
           </option>
           <option
+            className="emotion-4"
             value="ASM"
           >
             American Samoa
           </option>
           <option
+            className="emotion-4"
             value="AND"
           >
             Andorra
           </option>
           <option
+            className="emotion-4"
             value="AGO"
           >
             Angola
           </option>
           <option
+            className="emotion-4"
             value="AIA"
           >
             Anguilla
           </option>
           <option
+            className="emotion-4"
             value="ATG"
           >
             Antigua and Barbuda
           </option>
           <option
+            className="emotion-4"
             value="ARG"
           >
             Argentina
           </option>
           <option
+            className="emotion-4"
             value="ARM"
           >
             Armenia
           </option>
           <option
+            className="emotion-4"
             value="ABW"
           >
             Aruba
           </option>
           <option
+            className="emotion-4"
             value="AUS"
           >
             Australia
           </option>
           <option
+            className="emotion-4"
             value="AUT"
           >
             Austria
           </option>
           <option
+            className="emotion-4"
             value="AZE"
           >
             Azerbaijan
           </option>
           <option
+            className="emotion-4"
             value="BHS"
           >
             Bahamas
           </option>
           <option
+            className="emotion-4"
             value="BHR"
           >
             Bahrain
           </option>
           <option
+            className="emotion-4"
             value="BGD"
           >
             Bangladesh
           </option>
           <option
+            className="emotion-4"
             value="BRB"
           >
             Barbados
           </option>
           <option
+            className="emotion-4"
             value="BLR"
           >
             Belarus
           </option>
           <option
+            className="emotion-4"
             value="BEL"
           >
             Belgium
           </option>
           <option
+            className="emotion-4"
             value="BLZ"
           >
             Belize
           </option>
           <option
+            className="emotion-4"
             value="BEN"
           >
             Benin
           </option>
           <option
+            className="emotion-4"
             value="BMU"
           >
             Bermuda
           </option>
           <option
+            className="emotion-4"
             value="BTN"
           >
             Bhutan
           </option>
           <option
+            className="emotion-4"
             value="BOL"
           >
             Bolivia (Plurinational State of)
           </option>
           <option
+            className="emotion-4"
             value="BES"
           >
             Bonaire, Saint Eustatius and Saba
           </option>
           <option
+            className="emotion-4"
             value="BIH"
           >
             Bosnia and Herzegovina
           </option>
           <option
+            className="emotion-4"
             value="BWA"
           >
             Botswana
           </option>
           <option
+            className="emotion-4"
             value="BRA"
           >
             Brazil
           </option>
           <option
+            className="emotion-4"
             value="VGB"
           >
             British Virgin Islands
           </option>
           <option
+            className="emotion-4"
             value="BRN"
           >
             Brunei Darussalam
           </option>
           <option
+            className="emotion-4"
             value="BGR"
           >
             Bulgaria
           </option>
           <option
+            className="emotion-4"
             value="BFA"
           >
             Burkina Faso
           </option>
           <option
+            className="emotion-4"
             value="BDI"
           >
             Burundi
           </option>
           <option
+            className="emotion-4"
             value="CPV"
           >
             Cabo Verde
           </option>
           <option
+            className="emotion-4"
             value="KHM"
           >
             Cambodia
           </option>
           <option
+            className="emotion-4"
             value="CMR"
           >
             Cameroon
           </option>
           <option
+            className="emotion-4"
             value="CAN"
           >
             Canada
           </option>
           <option
+            className="emotion-4"
             value="CYM"
           >
             Cayman Islands
           </option>
           <option
+            className="emotion-4"
             value="CAF"
           >
             Central African Republic
           </option>
           <option
+            className="emotion-4"
             value="TCD"
           >
             Chad
           </option>
           <option
+            className="emotion-4"
             value="CHL"
           >
             Chile
           </option>
           <option
+            className="emotion-4"
             value="CHN"
           >
             China
           </option>
           <option
+            className="emotion-4"
             value="HKG"
           >
             China, Hong Kong Special Administrative Region
           </option>
           <option
+            className="emotion-4"
             value="MAC"
           >
             China, Macao Special Administrative Region
           </option>
           <option
+            className="emotion-4"
             value="COL"
           >
             Colombia
           </option>
           <option
+            className="emotion-4"
             value="COM"
           >
             Comoros
           </option>
           <option
+            className="emotion-4"
             value="COG"
           >
             Congo
           </option>
           <option
+            className="emotion-4"
             value="COK"
           >
             Cook Islands
           </option>
           <option
+            className="emotion-4"
             value="CRI"
           >
             Costa Rica
           </option>
           <option
+            className="emotion-4"
             value="CIV"
           >
             Côte d'Ivoire
           </option>
           <option
+            className="emotion-4"
             value="HRV"
           >
             Croatia
           </option>
           <option
+            className="emotion-4"
             value="CUB"
           >
             Cuba
           </option>
           <option
+            className="emotion-4"
             value="CUW"
           >
             Curaçao
           </option>
           <option
+            className="emotion-4"
             value="CYP"
           >
             Cyprus
           </option>
           <option
+            className="emotion-4"
             value="CZE"
           >
             Czech Republic
           </option>
           <option
+            className="emotion-4"
             value="PRK"
           >
             Democratic People's Republic of Korea
           </option>
           <option
+            className="emotion-4"
             value="COD"
           >
             Democratic Republic of the Congo
           </option>
           <option
+            className="emotion-4"
             value="DNK"
           >
             Denmark
           </option>
           <option
+            className="emotion-4"
             value="DJI"
           >
             Djibouti
           </option>
           <option
+            className="emotion-4"
             value="DMA"
           >
             Dominica
           </option>
           <option
+            className="emotion-4"
             value="DOM"
           >
             Dominican Republic
           </option>
           <option
+            className="emotion-4"
             value="ECU"
           >
             Ecuador
           </option>
           <option
+            className="emotion-4"
             value="EGY"
           >
             Egypt
           </option>
           <option
+            className="emotion-4"
             value="SLV"
           >
             El Salvador
           </option>
           <option
+            className="emotion-4"
             value="GNQ"
           >
             Equatorial Guinea
           </option>
           <option
+            className="emotion-4"
             value="ERI"
           >
             Eritrea
           </option>
           <option
+            className="emotion-4"
             value="EST"
           >
             Estonia
           </option>
           <option
+            className="emotion-4"
             value="ETH"
           >
             Ethiopia
           </option>
           <option
+            className="emotion-4"
             value="FRO"
           >
             Faeroe Islands
           </option>
           <option
+            className="emotion-4"
             value="FLK"
           >
             Falkland Islands (Malvinas)
           </option>
           <option
+            className="emotion-4"
             value="FJI"
           >
             Fiji
           </option>
           <option
+            className="emotion-4"
             value="FIN"
           >
             Finland
           </option>
           <option
+            className="emotion-4"
             value="FRA"
           >
             France
           </option>
           <option
+            className="emotion-4"
             value="GUF"
           >
             French Guiana
           </option>
           <option
+            className="emotion-4"
             value="PYF"
           >
             French Polynesia
           </option>
           <option
+            className="emotion-4"
             value="GAB"
           >
             Gabon
           </option>
           <option
+            className="emotion-4"
             value="GMB"
           >
             Gambia
           </option>
           <option
+            className="emotion-4"
             value="GEO"
           >
             Georgia
           </option>
           <option
+            className="emotion-4"
             value="DEU"
           >
             Germany
           </option>
           <option
+            className="emotion-4"
             value="GHA"
           >
             Ghana
           </option>
           <option
+            className="emotion-4"
             value="GIB"
           >
             Gibraltar
           </option>
           <option
+            className="emotion-4"
             value="GRC"
           >
             Greece
           </option>
           <option
+            className="emotion-4"
             value="GRL"
           >
             Greenland
           </option>
           <option
+            className="emotion-4"
             value="GRD"
           >
             Grenada
           </option>
           <option
+            className="emotion-4"
             value="GLP"
           >
             Guadeloupe
           </option>
           <option
+            className="emotion-4"
             value="GUM"
           >
             Guam
           </option>
           <option
+            className="emotion-4"
             value="GTM"
           >
             Guatemala
           </option>
           <option
+            className="emotion-4"
             value="GGY"
           >
             Guernsey
           </option>
           <option
+            className="emotion-4"
             value="GIN"
           >
             Guinea
           </option>
           <option
+            className="emotion-4"
             value="GNB"
           >
             Guinea-Bissau
           </option>
           <option
+            className="emotion-4"
             value="GUY"
           >
             Guyana
           </option>
           <option
+            className="emotion-4"
             value="HTI"
           >
             Haiti
           </option>
           <option
+            className="emotion-4"
             value="VAT"
           >
             Holy See
           </option>
           <option
+            className="emotion-4"
             value="HND"
           >
             Honduras
           </option>
           <option
+            className="emotion-4"
             value="HUN"
           >
             Hungary
           </option>
           <option
+            className="emotion-4"
             value="ISL"
           >
             Iceland
           </option>
           <option
+            className="emotion-4"
             value="IND"
           >
             India
           </option>
           <option
+            className="emotion-4"
             value="IDN"
           >
             Indonesia
           </option>
           <option
+            className="emotion-4"
             value="IRN"
           >
             Iran (Islamic Republic of)
           </option>
           <option
+            className="emotion-4"
             value="IRQ"
           >
             Iraq
           </option>
           <option
+            className="emotion-4"
             value="IRL"
           >
             Ireland
           </option>
           <option
+            className="emotion-4"
             value="IMN"
           >
             Isle of Man
           </option>
           <option
+            className="emotion-4"
             value="ISR"
           >
             Israel
           </option>
           <option
+            className="emotion-4"
             value="ITA"
           >
             Italy
           </option>
           <option
+            className="emotion-4"
             value="JAM"
           >
             Jamaica
           </option>
           <option
+            className="emotion-4"
             value="JPN"
           >
             Japan
           </option>
           <option
+            className="emotion-4"
             value="JEY"
           >
             Jersey
           </option>
           <option
+            className="emotion-4"
             value="JOR"
           >
             Jordan
           </option>
           <option
+            className="emotion-4"
             value="KAZ"
           >
             Kazakhstan
           </option>
           <option
+            className="emotion-4"
             value="KEN"
           >
             Kenya
           </option>
           <option
+            className="emotion-4"
             value="KIR"
           >
             Kiribati
           </option>
           <option
+            className="emotion-4"
             value="KWT"
           >
             Kuwait
           </option>
           <option
+            className="emotion-4"
             value="KGZ"
           >
             Kyrgyzstan
           </option>
           <option
+            className="emotion-4"
             value="LAO"
           >
             Lao People's Democratic Republic
           </option>
           <option
+            className="emotion-4"
             value="LVA"
           >
             Latvia
           </option>
           <option
+            className="emotion-4"
             value="LBN"
           >
             Lebanon
           </option>
           <option
+            className="emotion-4"
             value="LSO"
           >
             Lesotho
           </option>
           <option
+            className="emotion-4"
             value="LBR"
           >
             Liberia
           </option>
           <option
+            className="emotion-4"
             value="LBY"
           >
             Libya
           </option>
           <option
+            className="emotion-4"
             value="LIE"
           >
             Liechtenstein
           </option>
           <option
+            className="emotion-4"
             value="LTU"
           >
             Lithuania
           </option>
           <option
+            className="emotion-4"
             value="LUX"
           >
             Luxembourg
           </option>
           <option
+            className="emotion-4"
             value="MDG"
           >
             Madagascar
           </option>
           <option
+            className="emotion-4"
             value="MWI"
           >
             Malawi
           </option>
           <option
+            className="emotion-4"
             value="MYS"
           >
             Malaysia
           </option>
           <option
+            className="emotion-4"
             value="MDV"
           >
             Maldives
           </option>
           <option
+            className="emotion-4"
             value="MLI"
           >
             Mali
           </option>
           <option
+            className="emotion-4"
             value="MLT"
           >
             Malta
           </option>
           <option
+            className="emotion-4"
             value="MHL"
           >
             Marshall Islands
           </option>
           <option
+            className="emotion-4"
             value="MTQ"
           >
             Martinique
           </option>
           <option
+            className="emotion-4"
             value="MRT"
           >
             Mauritania
           </option>
           <option
+            className="emotion-4"
             value="MUS"
           >
             Mauritius
           </option>
           <option
+            className="emotion-4"
             value="MYT"
           >
             Mayotte
           </option>
           <option
+            className="emotion-4"
             value="MEX"
           >
             Mexico
           </option>
           <option
+            className="emotion-4"
             value="FSM"
           >
             Micronesia (Federated States of)
           </option>
           <option
+            className="emotion-4"
             value="MCO"
           >
             Monaco
           </option>
           <option
+            className="emotion-4"
             value="MNG"
           >
             Mongolia
           </option>
           <option
+            className="emotion-4"
             value="MNE"
           >
             Montenegro
           </option>
           <option
+            className="emotion-4"
             value="MSR"
           >
             Montserrat
           </option>
           <option
+            className="emotion-4"
             value="MAR"
           >
             Morocco
           </option>
           <option
+            className="emotion-4"
             value="MOZ"
           >
             Mozambique
           </option>
           <option
+            className="emotion-4"
             value="MMR"
           >
             Myanmar
           </option>
           <option
+            className="emotion-4"
             value="NAM"
           >
             Namibia
           </option>
           <option
+            className="emotion-4"
             value="NRU"
           >
             Nauru
           </option>
           <option
+            className="emotion-4"
             value="NPL"
           >
             Nepal
           </option>
           <option
+            className="emotion-4"
             value="NLD"
           >
             Netherlands
           </option>
           <option
+            className="emotion-4"
             value="NCL"
           >
             New Caledonia
           </option>
           <option
+            className="emotion-4"
             value="NZL"
           >
             New Zealand
           </option>
           <option
+            className="emotion-4"
             value="NIC"
           >
             Nicaragua
           </option>
           <option
+            className="emotion-4"
             value="NER"
           >
             Niger
           </option>
           <option
+            className="emotion-4"
             value="NGA"
           >
             Nigeria
           </option>
           <option
+            className="emotion-4"
             value="NIU"
           >
             Niue
           </option>
           <option
+            className="emotion-4"
             value="NFK"
           >
             Norfolk Island
           </option>
           <option
+            className="emotion-4"
             value="MNP"
           >
             Northern Mariana Islands
           </option>
           <option
+            className="emotion-4"
             value="NOR"
           >
             Norway
           </option>
           <option
+            className="emotion-4"
             value="OMN"
           >
             Oman
           </option>
           <option
+            className="emotion-4"
             value="PAK"
           >
             Pakistan
           </option>
           <option
+            className="emotion-4"
             value="PLW"
           >
             Palau
           </option>
           <option
+            className="emotion-4"
             value="PAN"
           >
             Panama
           </option>
           <option
+            className="emotion-4"
             value="PNG"
           >
             Papua New Guinea
           </option>
           <option
+            className="emotion-4"
             value="PRY"
           >
             Paraguay
           </option>
           <option
+            className="emotion-4"
             value="PER"
           >
             Peru
           </option>
           <option
+            className="emotion-4"
             value="PHL"
           >
             Philippines
           </option>
           <option
+            className="emotion-4"
             value="PCN"
           >
             Pitcairn
           </option>
           <option
+            className="emotion-4"
             value="POL"
           >
             Poland
           </option>
           <option
+            className="emotion-4"
             value="PRT"
           >
             Portugal
           </option>
           <option
+            className="emotion-4"
             value="PRI"
           >
             Puerto Rico
           </option>
           <option
+            className="emotion-4"
             value="QAT"
           >
             Qatar
           </option>
           <option
+            className="emotion-4"
             value="KOR"
           >
             Republic of Korea
           </option>
           <option
+            className="emotion-4"
             value="MDA"
           >
             Republic of Moldova
           </option>
           <option
+            className="emotion-4"
             value="REU"
           >
             Réunion
           </option>
           <option
+            className="emotion-4"
             value="ROU"
           >
             Romania
           </option>
           <option
+            className="emotion-4"
             value="RUS"
           >
             Russian Federation
           </option>
           <option
+            className="emotion-4"
             value="RWA"
           >
             Rwanda
           </option>
           <option
+            className="emotion-4"
             value="BLM"
           >
             Saint-Barthélemy
           </option>
           <option
+            className="emotion-4"
             value="SHN"
           >
             Saint Helena
           </option>
           <option
+            className="emotion-4"
             value="KNA"
           >
             Saint Kitts and Nevis
           </option>
           <option
+            className="emotion-4"
             value="LCA"
           >
             Saint Lucia
           </option>
           <option
+            className="emotion-4"
             value="MAF"
           >
             Saint-Martin (French part)
           </option>
           <option
+            className="emotion-4"
             value="SPM"
           >
             Saint Pierre and Miquelon
           </option>
           <option
+            className="emotion-4"
             value="VCT"
           >
             Saint Vincent and the Grenadines
           </option>
           <option
+            className="emotion-4"
             value="WSM"
           >
             Samoa
           </option>
           <option
+            className="emotion-4"
             value="SMR"
           >
             San Marino
           </option>
           <option
+            className="emotion-4"
             value="STP"
           >
             Sao Tome and Principe
           </option>
           <option
+            className="emotion-4"
             value="SAU"
           >
             Saudi Arabia
           </option>
           <option
+            className="emotion-4"
             value="SEN"
           >
             Senegal
           </option>
           <option
+            className="emotion-4"
             value="SRB"
           >
             Serbia
           </option>
           <option
+            className="emotion-4"
             value="SYC"
           >
             Seychelles
           </option>
           <option
+            className="emotion-4"
             value="SLE"
           >
             Sierra Leone
           </option>
           <option
+            className="emotion-4"
             value="SGP"
           >
             Singapore
           </option>
           <option
+            className="emotion-4"
             value="SXM"
           >
             Sint Maarten (Dutch part)
           </option>
           <option
+            className="emotion-4"
             value="SVK"
           >
             Slovakia
           </option>
           <option
+            className="emotion-4"
             value="SVN"
           >
             Slovenia
           </option>
           <option
+            className="emotion-4"
             value="SLB"
           >
             Solomon Islands
           </option>
           <option
+            className="emotion-4"
             value="SOM"
           >
             Somalia
           </option>
           <option
+            className="emotion-4"
             value="ZAF"
           >
             South Africa
           </option>
           <option
+            className="emotion-4"
             value="SSD"
           >
             South Sudan
           </option>
           <option
+            className="emotion-4"
             value="ESP"
           >
             Spain
           </option>
           <option
+            className="emotion-4"
             value="LKA"
           >
             Sri Lanka
           </option>
           <option
+            className="emotion-4"
             value="PSE"
           >
             State of Palestine
           </option>
           <option
+            className="emotion-4"
             value="SDN"
           >
             Sudan
           </option>
           <option
+            className="emotion-4"
             value="SUR"
           >
             Suriname
           </option>
           <option
+            className="emotion-4"
             value="SJM"
           >
             Svalbard and Jan Mayen Islands
           </option>
           <option
+            className="emotion-4"
             value="SWZ"
           >
             Swaziland
           </option>
           <option
+            className="emotion-4"
             value="SWE"
           >
             Sweden
           </option>
           <option
+            className="emotion-4"
             value="CHE"
           >
             Switzerland
           </option>
           <option
+            className="emotion-4"
             value="SYR"
           >
             Syrian Arab Republic
           </option>
           <option
+            className="emotion-4"
             value="TWAN"
           >
             Taiwan
           </option>
           <option
+            className="emotion-4"
             value="TJK"
           >
             Tajikistan
           </option>
           <option
+            className="emotion-4"
             value="THA"
           >
             Thailand
           </option>
           <option
+            className="emotion-4"
             value="MKD"
           >
             The former Yugoslav Republic of Macedonia
           </option>
           <option
+            className="emotion-4"
             value="TLS"
           >
             Timor-Leste
           </option>
           <option
+            className="emotion-4"
             value="TGO"
           >
             Togo
           </option>
           <option
+            className="emotion-4"
             value="TKL"
           >
             Tokelau
           </option>
           <option
+            className="emotion-4"
             value="TON"
           >
             Tonga
           </option>
           <option
+            className="emotion-4"
             value="TTO"
           >
             Trinidad and Tobago
           </option>
           <option
+            className="emotion-4"
             value="TUN"
           >
             Tunisia
           </option>
           <option
+            className="emotion-4"
             value="TUR"
           >
             Turkey
           </option>
           <option
+            className="emotion-4"
             value="TKM"
           >
             Turkmenistan
           </option>
           <option
+            className="emotion-4"
             value="TCA"
           >
             Turks and Caicos Islands
           </option>
           <option
+            className="emotion-4"
             value="TUV"
           >
             Tuvalu
           </option>
           <option
+            className="emotion-4"
             value="UGA"
           >
             Uganda
           </option>
           <option
+            className="emotion-4"
             value="UKR"
           >
             Ukraine
           </option>
           <option
+            className="emotion-4"
             value="ARE"
           >
             United Arab Emirates
           </option>
           <option
+            className="emotion-4"
             value="GBR"
           >
             United Kingdom of Great Britain and Northern Ireland
           </option>
           <option
+            className="emotion-4"
             value="TZA"
           >
             United Republic of Tanzania
           </option>
           <option
+            className="emotion-4"
             value="URY"
           >
             Uruguay
           </option>
           <option
+            className="emotion-4"
             value="UZB"
           >
             Uzbekistan
           </option>
           <option
+            className="emotion-4"
             value="VUT"
           >
             Vanuatu
           </option>
           <option
+            className="emotion-4"
             value="VEN"
           >
             Venezuela (Bolivarian Republic of)
           </option>
           <option
+            className="emotion-4"
             value="VNM"
           >
             Vietnam
           </option>
           <option
+            className="emotion-4"
             value="WLF"
           >
             Wallis and Futuna Islands
           </option>
           <option
+            className="emotion-4"
             value="ESH"
           >
             Western Sahara
           </option>
           <option
+            className="emotion-4"
             value="YEM"
           >
             Yemen
           </option>
           <option
+            className="emotion-4"
             value="ZMB"
           >
             Zambia
           </option>
           <option
+            className="emotion-4"
             value="ZWE"
           >
             Zimbabwe
@@ -69722,50 +70506,50 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
 `;
 
 exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming Fields, no surname 1`] = `
-.emotion-8 {
+.emotion-16 {
   margin-bottom: 3em;
   background: none;
   margin-bottom: 1.5em;
 }
 
-.emotion-8 label {
+.emotion-16 label {
   margin-top: 0em;
 }
 
-.emotion-8 .spacingTop {
+.emotion-16 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-8 label.inputHeading {
+.emotion-16 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-8 label.inputHeading .t--req {
+.emotion-16 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-8 .t--opt {
+.emotion-16 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 {
+  .emotion-16 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-8 .ra-l {
+.emotion-16 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-8 > div {
+.emotion-16 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-8 > div {
+  .emotion-16 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -69773,17 +70557,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   }
 }
 
-.emotion-8 > .RADIOGROUP label {
+.emotion-16 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-8 h3 {
+.emotion-16 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-8 .notice {
+.emotion-16 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -69793,7 +70577,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   line-height: 1.5em;
 }
 
-.emotion-8 .emotion-1:after {
+.emotion-16 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -69933,27 +70717,27 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   visibility: visible;
 }
 
-.emotion-6 {
+.emotion-14 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-6 {
+  .emotion-14 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-6 .ra-l {
+.emotion-14 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-6 > div {
+.emotion-14 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-6 > div {
+  .emotion-14 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -69961,17 +70745,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   }
 }
 
-.emotion-6 > .RADIOGROUP label {
+.emotion-14 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-6 h3 {
+.emotion-14 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-6 .notice {
+.emotion-14 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -69981,15 +70765,19 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   line-height: 1.5em;
 }
 
-.emotion-6 .emotion-1:after {
+.emotion-14 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-6 .sel-c {
+.emotion-14 .sel-c {
   display: block;
 }
 
+.emotion-6 {
+  color: #091f2f;
+}
+
 .css-1jy3mvz .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
@@ -70026,7 +70814,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 }
 
 <div
-  className="emotion-8"
+  className="emotion-16"
 >
   <h1
     className="emotion-0"
@@ -70261,7 +71049,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     </div>
   </div>
   <div
-    className="emotion-6"
+    className="emotion-14"
   >
     <div>
       <label
@@ -70313,41 +71101,49 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         >
           <option />
           <option
+            className="emotion-6"
             value="I"
           >
             I
           </option>
           <option
+            className="emotion-6"
             value="II"
           >
             II
           </option>
           <option
+            className="emotion-6"
             value="III"
           >
             III
           </option>
           <option
+            className="emotion-6"
             value="IV"
           >
             IV
           </option>
           <option
+            className="emotion-6"
             value="V"
           >
             V
           </option>
           <option
+            className="emotion-6"
             value="VI"
           >
             VI
           </option>
           <option
+            className="emotion-6"
             value="Jr."
           >
             Jr.
           </option>
           <option
+            className="emotion-6"
             value="Sr."
           >
             Sr.
@@ -70421,50 +71217,50 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 `;
 
 exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming Fields, w/surname 1`] = `
-.emotion-11 {
+.emotion-19 {
   margin-bottom: 3em;
   background: none;
   margin-bottom: 1.5em;
 }
 
-.emotion-11 label {
+.emotion-19 label {
   margin-top: 0em;
 }
 
-.emotion-11 .spacingTop {
+.emotion-19 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-11 label.inputHeading {
+.emotion-19 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-11 label.inputHeading .t--req {
+.emotion-19 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-11 .t--opt {
+.emotion-19 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 {
+  .emotion-19 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-11 .ra-l {
+.emotion-19 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-11 > div {
+.emotion-19 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 > div {
+  .emotion-19 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -70472,17 +71268,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   }
 }
 
-.emotion-11 > .RADIOGROUP label {
+.emotion-19 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-11 h3 {
+.emotion-19 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-11 .notice {
+.emotion-19 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -70492,7 +71288,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   line-height: 1.5em;
 }
 
-.emotion-11 .emotion-1:after {
+.emotion-19 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -70632,27 +71428,27 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   visibility: visible;
 }
 
-.emotion-9 {
+.emotion-17 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-9 {
+  .emotion-17 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-9 .ra-l {
+.emotion-17 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-9 > div {
+.emotion-17 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-9 > div {
+  .emotion-17 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -70660,17 +71456,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   }
 }
 
-.emotion-9 > .RADIOGROUP label {
+.emotion-17 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-9 h3 {
+.emotion-17 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-9 .notice {
+.emotion-17 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -70680,15 +71476,19 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
   line-height: 1.5em;
 }
 
-.emotion-9 .emotion-1:after {
+.emotion-17 .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-9 .sel-c {
+.emotion-17 .sel-c {
   display: block;
 }
 
+.emotion-9 {
+  color: #091f2f;
+}
+
 .css-1jy3mvz .emotion-1:after {
   content: '&nbsp;';
   opacity: 0;
@@ -70778,7 +71578,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 }
 
 <div
-  className="emotion-11"
+  className="emotion-19"
 >
   <h1
     className="emotion-0"
@@ -71084,7 +71884,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     </div>
   </div>
   <div
-    className="emotion-9"
+    className="emotion-17"
   >
     <div>
       <label
@@ -71136,41 +71936,49 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         >
           <option />
           <option
+            className="emotion-9"
             value="I"
           >
             I
           </option>
           <option
+            className="emotion-9"
             value="II"
           >
             II
           </option>
           <option
+            className="emotion-9"
             value="III"
           >
             III
           </option>
           <option
+            className="emotion-9"
             value="IV"
           >
             IV
           </option>
           <option
+            className="emotion-9"
             value="V"
           >
             V
           </option>
           <option
+            className="emotion-9"
             value="VI"
           >
             VI
           </option>
           <option
+            className="emotion-9"
             value="Jr."
           >
             Jr.
           </option>
           <option
+            className="emotion-9"
             value="Sr."
           >
             Sr.
@@ -71244,7 +72052,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 `;
 
 exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Residende, City Hall 1`] = `
-.css-1aiow01 .emotion-4:after {
+.css-1aiow01 .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -71342,27 +72150,27 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   visibility: visible;
 }
 
-.emotion-2 {
+.emotion-242 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-2 {
+  .emotion-242 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-2 .ra-l {
+.emotion-242 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-2 > div {
+.emotion-242 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-2 > div {
+  .emotion-242 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -71370,17 +72178,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   }
 }
 
-.emotion-2 > .RADIOGROUP label {
+.emotion-242 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-2 h3 {
+.emotion-242 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-2 .notice {
+.emotion-242 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -71390,67 +72198,71 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   line-height: 1.5em;
 }
 
-.emotion-2 .emotion-4:after {
+.emotion-242 .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-2 .sel-c {
+.emotion-242 .sel-c {
   display: block;
 }
 
-.css-1jy3mvz .emotion-4:after {
+.emotion-2 {
+  color: #091f2f;
+}
+
+.css-1jy3mvz .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-7 {
+.emotion-299 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-7 label {
+.emotion-299 label {
   margin-top: 0em;
 }
 
-.emotion-7 .spacingTop {
+.emotion-299 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-7 label.inputHeading {
+.emotion-299 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-7 label.inputHeading .t--req {
+.emotion-299 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-7 .t--opt {
+.emotion-299 .t--opt {
   color: #58585b !important;
 }
 
-.emotion-6 {
+.emotion-298 {
   margin-bottom: 2.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-6 {
+  .emotion-298 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-6 .ra-l {
+.emotion-298 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-6 > div {
+.emotion-298 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-6 > div {
+  .emotion-298 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -71458,17 +72270,17 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   }
 }
 
-.emotion-6 > .RADIOGROUP label {
+.emotion-298 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-6 h3 {
+.emotion-298 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-6 .notice {
+.emotion-298 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -71478,47 +72290,47 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   line-height: 1.5em;
 }
 
-.emotion-6 .emotion-4:after {
+.emotion-298 .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-wvkemw .emotion-4:after {
+.css-wvkemw .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1ahsdhq .emotion-4:after {
+.css-1ahsdhq .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1nb9jwk .emotion-4:after {
+.css-1nb9jwk .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-12yp9t2 .emotion-4:after {
+.css-12yp9t2 .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-1ttcwo2 .emotion-4:after {
+.css-1ttcwo2 .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.css-99cy70 .emotion-4:after {
+.css-99cy70 .emotion-296:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-3 {
+.emotion-295 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-3 {
+  .emotion-295 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -71532,12 +72344,12 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   }
 }
 
-.emotion-3 > div {
+.emotion-295 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-3 > div {
+  .emotion-295 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -71545,12 +72357,12 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
   }
 }
 
-.emotion-3 .sel-c {
+.emotion-295 .sel-c {
   display: block;
 }
 
 <div
-  className="emotion-7"
+  className="emotion-299"
 >
   <h1
     className="emotion-0"
@@ -71563,10 +72375,10 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
     </div>
   </h1>
   <div
-    className="emotion-6"
+    className="emotion-298"
   >
     <div
-      className="emotion-2"
+      className="emotion-242"
     >
       <div>
         <label
@@ -71624,1201 +72436,1441 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           >
             <option />
             <option
+              className="emotion-2"
               value="USA"
             >
               United States of America
             </option>
             <option
+              className="emotion-2"
               value="VIR"
             >
               United States Virgin Islands
             </option>
             <option
+              className="emotion-2"
               value="AFG"
             >
               Afghanistan
             </option>
             <option
+              className="emotion-2"
               value="ALA"
             >
               Åland Islands
             </option>
             <option
+              className="emotion-2"
               value="ALB"
             >
               Albania
             </option>
             <option
+              className="emotion-2"
               value="DZA"
             >
               Algeria
             </option>
             <option
+              className="emotion-2"
               value="ASM"
             >
               American Samoa
             </option>
             <option
+              className="emotion-2"
               value="AND"
             >
               Andorra
             </option>
             <option
+              className="emotion-2"
               value="AGO"
             >
               Angola
             </option>
             <option
+              className="emotion-2"
               value="AIA"
             >
               Anguilla
             </option>
             <option
+              className="emotion-2"
               value="ATG"
             >
               Antigua and Barbuda
             </option>
             <option
+              className="emotion-2"
               value="ARG"
             >
               Argentina
             </option>
             <option
+              className="emotion-2"
               value="ARM"
             >
               Armenia
             </option>
             <option
+              className="emotion-2"
               value="ABW"
             >
               Aruba
             </option>
             <option
+              className="emotion-2"
               value="AUS"
             >
               Australia
             </option>
             <option
+              className="emotion-2"
               value="AUT"
             >
               Austria
             </option>
             <option
+              className="emotion-2"
               value="AZE"
             >
               Azerbaijan
             </option>
             <option
+              className="emotion-2"
               value="BHS"
             >
               Bahamas
             </option>
             <option
+              className="emotion-2"
               value="BHR"
             >
               Bahrain
             </option>
             <option
+              className="emotion-2"
               value="BGD"
             >
               Bangladesh
             </option>
             <option
+              className="emotion-2"
               value="BRB"
             >
               Barbados
             </option>
             <option
+              className="emotion-2"
               value="BLR"
             >
               Belarus
             </option>
             <option
+              className="emotion-2"
               value="BEL"
             >
               Belgium
             </option>
             <option
+              className="emotion-2"
               value="BLZ"
             >
               Belize
             </option>
             <option
+              className="emotion-2"
               value="BEN"
             >
               Benin
             </option>
             <option
+              className="emotion-2"
               value="BMU"
             >
               Bermuda
             </option>
             <option
+              className="emotion-2"
               value="BTN"
             >
               Bhutan
             </option>
             <option
+              className="emotion-2"
               value="BOL"
             >
               Bolivia (Plurinational State of)
             </option>
             <option
+              className="emotion-2"
               value="BES"
             >
               Bonaire, Saint Eustatius and Saba
             </option>
             <option
+              className="emotion-2"
               value="BIH"
             >
               Bosnia and Herzegovina
             </option>
             <option
+              className="emotion-2"
               value="BWA"
             >
               Botswana
             </option>
             <option
+              className="emotion-2"
               value="BRA"
             >
               Brazil
             </option>
             <option
+              className="emotion-2"
               value="VGB"
             >
               British Virgin Islands
             </option>
             <option
+              className="emotion-2"
               value="BRN"
             >
               Brunei Darussalam
             </option>
             <option
+              className="emotion-2"
               value="BGR"
             >
               Bulgaria
             </option>
             <option
+              className="emotion-2"
               value="BFA"
             >
               Burkina Faso
             </option>
             <option
+              className="emotion-2"
               value="BDI"
             >
               Burundi
             </option>
             <option
+              className="emotion-2"
               value="CPV"
             >
               Cabo Verde
             </option>
             <option
+              className="emotion-2"
               value="KHM"
             >
               Cambodia
             </option>
             <option
+              className="emotion-2"
               value="CMR"
             >
               Cameroon
             </option>
             <option
+              className="emotion-2"
               value="CAN"
             >
               Canada
             </option>
             <option
+              className="emotion-2"
               value="CYM"
             >
               Cayman Islands
             </option>
             <option
+              className="emotion-2"
               value="CAF"
             >
               Central African Republic
             </option>
             <option
+              className="emotion-2"
               value="TCD"
             >
               Chad
             </option>
             <option
+              className="emotion-2"
               value="CHL"
             >
               Chile
             </option>
             <option
+              className="emotion-2"
               value="CHN"
             >
               China
             </option>
             <option
+              className="emotion-2"
               value="HKG"
             >
               China, Hong Kong Special Administrative Region
             </option>
             <option
+              className="emotion-2"
               value="MAC"
             >
               China, Macao Special Administrative Region
             </option>
             <option
+              className="emotion-2"
               value="COL"
             >
               Colombia
             </option>
             <option
+              className="emotion-2"
               value="COM"
             >
               Comoros
             </option>
             <option
+              className="emotion-2"
               value="COG"
             >
               Congo
             </option>
             <option
+              className="emotion-2"
               value="COK"
             >
               Cook Islands
             </option>
             <option
+              className="emotion-2"
               value="CRI"
             >
               Costa Rica
             </option>
             <option
+              className="emotion-2"
               value="CIV"
             >
               Côte d'Ivoire
             </option>
             <option
+              className="emotion-2"
               value="HRV"
             >
               Croatia
             </option>
             <option
+              className="emotion-2"
               value="CUB"
             >
               Cuba
             </option>
             <option
+              className="emotion-2"
               value="CUW"
             >
               Curaçao
             </option>
             <option
+              className="emotion-2"
               value="CYP"
             >
               Cyprus
             </option>
             <option
+              className="emotion-2"
               value="CZE"
             >
               Czech Republic
             </option>
             <option
+              className="emotion-2"
               value="PRK"
             >
               Democratic People's Republic of Korea
             </option>
             <option
+              className="emotion-2"
               value="COD"
             >
               Democratic Republic of the Congo
             </option>
             <option
+              className="emotion-2"
               value="DNK"
             >
               Denmark
             </option>
             <option
+              className="emotion-2"
               value="DJI"
             >
               Djibouti
             </option>
             <option
+              className="emotion-2"
               value="DMA"
             >
               Dominica
             </option>
             <option
+              className="emotion-2"
               value="DOM"
             >
               Dominican Republic
             </option>
             <option
+              className="emotion-2"
               value="ECU"
             >
               Ecuador
             </option>
             <option
+              className="emotion-2"
               value="EGY"
             >
               Egypt
             </option>
             <option
+              className="emotion-2"
               value="SLV"
             >
               El Salvador
             </option>
             <option
+              className="emotion-2"
               value="GNQ"
             >
               Equatorial Guinea
             </option>
             <option
+              className="emotion-2"
               value="ERI"
             >
               Eritrea
             </option>
             <option
+              className="emotion-2"
               value="EST"
             >
               Estonia
             </option>
             <option
+              className="emotion-2"
               value="ETH"
             >
               Ethiopia
             </option>
             <option
+              className="emotion-2"
               value="FRO"
             >
               Faeroe Islands
             </option>
             <option
+              className="emotion-2"
               value="FLK"
             >
               Falkland Islands (Malvinas)
             </option>
             <option
+              className="emotion-2"
               value="FJI"
             >
               Fiji
             </option>
             <option
+              className="emotion-2"
               value="FIN"
             >
               Finland
             </option>
             <option
+              className="emotion-2"
               value="FRA"
             >
               France
             </option>
             <option
+              className="emotion-2"
               value="GUF"
             >
               French Guiana
             </option>
             <option
+              className="emotion-2"
               value="PYF"
             >
               French Polynesia
             </option>
             <option
+              className="emotion-2"
               value="GAB"
             >
               Gabon
             </option>
             <option
+              className="emotion-2"
               value="GMB"
             >
               Gambia
             </option>
             <option
+              className="emotion-2"
               value="GEO"
             >
               Georgia
             </option>
             <option
+              className="emotion-2"
               value="DEU"
             >
               Germany
             </option>
             <option
+              className="emotion-2"
               value="GHA"
             >
               Ghana
             </option>
             <option
+              className="emotion-2"
               value="GIB"
             >
               Gibraltar
             </option>
             <option
+              className="emotion-2"
               value="GRC"
             >
               Greece
             </option>
             <option
+              className="emotion-2"
               value="GRL"
             >
               Greenland
             </option>
             <option
+              className="emotion-2"
               value="GRD"
             >
               Grenada
             </option>
             <option
+              className="emotion-2"
               value="GLP"
             >
               Guadeloupe
             </option>
             <option
+              className="emotion-2"
               value="GUM"
             >
               Guam
             </option>
             <option
+              className="emotion-2"
               value="GTM"
             >
               Guatemala
             </option>
             <option
+              className="emotion-2"
               value="GGY"
             >
               Guernsey
             </option>
             <option
+              className="emotion-2"
               value="GIN"
             >
               Guinea
             </option>
             <option
+              className="emotion-2"
               value="GNB"
             >
               Guinea-Bissau
             </option>
             <option
+              className="emotion-2"
               value="GUY"
             >
               Guyana
             </option>
             <option
+              className="emotion-2"
               value="HTI"
             >
               Haiti
             </option>
             <option
+              className="emotion-2"
               value="VAT"
             >
               Holy See
             </option>
             <option
+              className="emotion-2"
               value="HND"
             >
               Honduras
             </option>
             <option
+              className="emotion-2"
               value="HUN"
             >
               Hungary
             </option>
             <option
+              className="emotion-2"
               value="ISL"
             >
               Iceland
             </option>
             <option
+              className="emotion-2"
               value="IND"
             >
               India
             </option>
             <option
+              className="emotion-2"
               value="IDN"
             >
               Indonesia
             </option>
             <option
+              className="emotion-2"
               value="IRN"
             >
               Iran (Islamic Republic of)
             </option>
             <option
+              className="emotion-2"
               value="IRQ"
             >
               Iraq
             </option>
             <option
+              className="emotion-2"
               value="IRL"
             >
               Ireland
             </option>
             <option
+              className="emotion-2"
               value="IMN"
             >
               Isle of Man
             </option>
             <option
+              className="emotion-2"
               value="ISR"
             >
               Israel
             </option>
             <option
+              className="emotion-2"
               value="ITA"
             >
               Italy
             </option>
             <option
+              className="emotion-2"
               value="JAM"
             >
               Jamaica
             </option>
             <option
+              className="emotion-2"
               value="JPN"
             >
               Japan
             </option>
             <option
+              className="emotion-2"
               value="JEY"
             >
               Jersey
             </option>
             <option
+              className="emotion-2"
               value="JOR"
             >
               Jordan
             </option>
             <option
+              className="emotion-2"
               value="KAZ"
             >
               Kazakhstan
             </option>
             <option
+              className="emotion-2"
               value="KEN"
             >
               Kenya
             </option>
             <option
+              className="emotion-2"
               value="KIR"
             >
               Kiribati
             </option>
             <option
+              className="emotion-2"
               value="KWT"
             >
               Kuwait
             </option>
             <option
+              className="emotion-2"
               value="KGZ"
             >
               Kyrgyzstan
             </option>
             <option
+              className="emotion-2"
               value="LAO"
             >
               Lao People's Democratic Republic
             </option>
             <option
+              className="emotion-2"
               value="LVA"
             >
               Latvia
             </option>
             <option
+              className="emotion-2"
               value="LBN"
             >
               Lebanon
             </option>
             <option
+              className="emotion-2"
               value="LSO"
             >
               Lesotho
             </option>
             <option
+              className="emotion-2"
               value="LBR"
             >
               Liberia
             </option>
             <option
+              className="emotion-2"
               value="LBY"
             >
               Libya
             </option>
             <option
+              className="emotion-2"
               value="LIE"
             >
               Liechtenstein
             </option>
             <option
+              className="emotion-2"
               value="LTU"
             >
               Lithuania
             </option>
             <option
+              className="emotion-2"
               value="LUX"
             >
               Luxembourg
             </option>
             <option
+              className="emotion-2"
               value="MDG"
             >
               Madagascar
             </option>
             <option
+              className="emotion-2"
               value="MWI"
             >
               Malawi
             </option>
             <option
+              className="emotion-2"
               value="MYS"
             >
               Malaysia
             </option>
             <option
+              className="emotion-2"
               value="MDV"
             >
               Maldives
             </option>
             <option
+              className="emotion-2"
               value="MLI"
             >
               Mali
             </option>
             <option
+              className="emotion-2"
               value="MLT"
             >
               Malta
             </option>
             <option
+              className="emotion-2"
               value="MHL"
             >
               Marshall Islands
             </option>
             <option
+              className="emotion-2"
               value="MTQ"
             >
               Martinique
             </option>
             <option
+              className="emotion-2"
               value="MRT"
             >
               Mauritania
             </option>
             <option
+              className="emotion-2"
               value="MUS"
             >
               Mauritius
             </option>
             <option
+              className="emotion-2"
               value="MYT"
             >
               Mayotte
             </option>
             <option
+              className="emotion-2"
               value="MEX"
             >
               Mexico
             </option>
             <option
+              className="emotion-2"
               value="FSM"
             >
               Micronesia (Federated States of)
             </option>
             <option
+              className="emotion-2"
               value="MCO"
             >
               Monaco
             </option>
             <option
+              className="emotion-2"
               value="MNG"
             >
               Mongolia
             </option>
             <option
+              className="emotion-2"
               value="MNE"
             >
               Montenegro
             </option>
             <option
+              className="emotion-2"
               value="MSR"
             >
               Montserrat
             </option>
             <option
+              className="emotion-2"
               value="MAR"
             >
               Morocco
             </option>
             <option
+              className="emotion-2"
               value="MOZ"
             >
               Mozambique
             </option>
             <option
+              className="emotion-2"
               value="MMR"
             >
               Myanmar
             </option>
             <option
+              className="emotion-2"
               value="NAM"
             >
               Namibia
             </option>
             <option
+              className="emotion-2"
               value="NRU"
             >
               Nauru
             </option>
             <option
+              className="emotion-2"
               value="NPL"
             >
               Nepal
             </option>
             <option
+              className="emotion-2"
               value="NLD"
             >
               Netherlands
             </option>
             <option
+              className="emotion-2"
               value="NCL"
             >
               New Caledonia
             </option>
             <option
+              className="emotion-2"
               value="NZL"
             >
               New Zealand
             </option>
             <option
+              className="emotion-2"
               value="NIC"
             >
               Nicaragua
             </option>
             <option
+              className="emotion-2"
               value="NER"
             >
               Niger
             </option>
             <option
+              className="emotion-2"
               value="NGA"
             >
               Nigeria
             </option>
             <option
+              className="emotion-2"
               value="NIU"
             >
               Niue
             </option>
             <option
+              className="emotion-2"
               value="NFK"
             >
               Norfolk Island
             </option>
             <option
+              className="emotion-2"
               value="MNP"
             >
               Northern Mariana Islands
             </option>
             <option
+              className="emotion-2"
               value="NOR"
             >
               Norway
             </option>
             <option
+              className="emotion-2"
               value="OMN"
             >
               Oman
             </option>
             <option
+              className="emotion-2"
               value="PAK"
             >
               Pakistan
             </option>
             <option
+              className="emotion-2"
               value="PLW"
             >
               Palau
             </option>
             <option
+              className="emotion-2"
               value="PAN"
             >
               Panama
             </option>
             <option
+              className="emotion-2"
               value="PNG"
             >
               Papua New Guinea
             </option>
             <option
+              className="emotion-2"
               value="PRY"
             >
               Paraguay
             </option>
             <option
+              className="emotion-2"
               value="PER"
             >
               Peru
             </option>
             <option
+              className="emotion-2"
               value="PHL"
             >
               Philippines
             </option>
             <option
+              className="emotion-2"
               value="PCN"
             >
               Pitcairn
             </option>
             <option
+              className="emotion-2"
               value="POL"
             >
               Poland
             </option>
             <option
+              className="emotion-2"
               value="PRT"
             >
               Portugal
             </option>
             <option
+              className="emotion-2"
               value="PRI"
             >
               Puerto Rico
             </option>
             <option
+              className="emotion-2"
               value="QAT"
             >
               Qatar
             </option>
             <option
+              className="emotion-2"
               value="KOR"
             >
               Republic of Korea
             </option>
             <option
+              className="emotion-2"
               value="MDA"
             >
               Republic of Moldova
             </option>
             <option
+              className="emotion-2"
               value="REU"
             >
               Réunion
             </option>
             <option
+              className="emotion-2"
               value="ROU"
             >
               Romania
             </option>
             <option
+              className="emotion-2"
               value="RUS"
             >
               Russian Federation
             </option>
             <option
+              className="emotion-2"
               value="RWA"
             >
               Rwanda
             </option>
             <option
+              className="emotion-2"
               value="BLM"
             >
               Saint-Barthélemy
             </option>
             <option
+              className="emotion-2"
               value="SHN"
             >
               Saint Helena
             </option>
             <option
+              className="emotion-2"
               value="KNA"
             >
               Saint Kitts and Nevis
             </option>
             <option
+              className="emotion-2"
               value="LCA"
             >
               Saint Lucia
             </option>
             <option
+              className="emotion-2"
               value="MAF"
             >
               Saint-Martin (French part)
             </option>
             <option
+              className="emotion-2"
               value="SPM"
             >
               Saint Pierre and Miquelon
             </option>
             <option
+              className="emotion-2"
               value="VCT"
             >
               Saint Vincent and the Grenadines
             </option>
             <option
+              className="emotion-2"
               value="WSM"
             >
               Samoa
             </option>
             <option
+              className="emotion-2"
               value="SMR"
             >
               San Marino
             </option>
             <option
+              className="emotion-2"
               value="STP"
             >
               Sao Tome and Principe
             </option>
             <option
+              className="emotion-2"
               value="SAU"
             >
               Saudi Arabia
             </option>
             <option
+              className="emotion-2"
               value="SEN"
             >
               Senegal
             </option>
             <option
+              className="emotion-2"
               value="SRB"
             >
               Serbia
             </option>
             <option
+              className="emotion-2"
               value="SYC"
             >
               Seychelles
             </option>
             <option
+              className="emotion-2"
               value="SLE"
             >
               Sierra Leone
             </option>
             <option
+              className="emotion-2"
               value="SGP"
             >
               Singapore
             </option>
             <option
+              className="emotion-2"
               value="SXM"
             >
               Sint Maarten (Dutch part)
             </option>
             <option
+              className="emotion-2"
               value="SVK"
             >
               Slovakia
             </option>
             <option
+              className="emotion-2"
               value="SVN"
             >
               Slovenia
             </option>
             <option
+              className="emotion-2"
               value="SLB"
             >
               Solomon Islands
             </option>
             <option
+              className="emotion-2"
               value="SOM"
             >
               Somalia
             </option>
             <option
+              className="emotion-2"
               value="ZAF"
             >
               South Africa
             </option>
             <option
+              className="emotion-2"
               value="SSD"
             >
               South Sudan
             </option>
             <option
+              className="emotion-2"
               value="ESP"
             >
               Spain
             </option>
             <option
+              className="emotion-2"
               value="LKA"
             >
               Sri Lanka
             </option>
             <option
+              className="emotion-2"
               value="PSE"
             >
               State of Palestine
             </option>
             <option
+              className="emotion-2"
               value="SDN"
             >
               Sudan
             </option>
             <option
+              className="emotion-2"
               value="SUR"
             >
               Suriname
             </option>
             <option
+              className="emotion-2"
               value="SJM"
             >
               Svalbard and Jan Mayen Islands
             </option>
             <option
+              className="emotion-2"
               value="SWZ"
             >
               Swaziland
             </option>
             <option
+              className="emotion-2"
               value="SWE"
             >
               Sweden
             </option>
             <option
+              className="emotion-2"
               value="CHE"
             >
               Switzerland
             </option>
             <option
+              className="emotion-2"
               value="SYR"
             >
               Syrian Arab Republic
             </option>
             <option
+              className="emotion-2"
               value="TWAN"
             >
               Taiwan
             </option>
             <option
+              className="emotion-2"
               value="TJK"
             >
               Tajikistan
             </option>
             <option
+              className="emotion-2"
               value="THA"
             >
               Thailand
             </option>
             <option
+              className="emotion-2"
               value="MKD"
             >
               The former Yugoslav Republic of Macedonia
             </option>
             <option
+              className="emotion-2"
               value="TLS"
             >
               Timor-Leste
             </option>
             <option
+              className="emotion-2"
               value="TGO"
             >
               Togo
             </option>
             <option
+              className="emotion-2"
               value="TKL"
             >
               Tokelau
             </option>
             <option
+              className="emotion-2"
               value="TON"
             >
               Tonga
             </option>
             <option
+              className="emotion-2"
               value="TTO"
             >
               Trinidad and Tobago
             </option>
             <option
+              className="emotion-2"
               value="TUN"
             >
               Tunisia
             </option>
             <option
+              className="emotion-2"
               value="TUR"
             >
               Turkey
             </option>
             <option
+              className="emotion-2"
               value="TKM"
             >
               Turkmenistan
             </option>
             <option
+              className="emotion-2"
               value="TCA"
             >
               Turks and Caicos Islands
             </option>
             <option
+              className="emotion-2"
               value="TUV"
             >
               Tuvalu
             </option>
             <option
+              className="emotion-2"
               value="UGA"
             >
               Uganda
             </option>
             <option
+              className="emotion-2"
               value="UKR"
             >
               Ukraine
             </option>
             <option
+              className="emotion-2"
               value="ARE"
             >
               United Arab Emirates
             </option>
             <option
+              className="emotion-2"
               value="GBR"
             >
               United Kingdom of Great Britain and Northern Ireland
             </option>
             <option
+              className="emotion-2"
               value="TZA"
             >
               United Republic of Tanzania
             </option>
             <option
+              className="emotion-2"
               value="URY"
             >
               Uruguay
             </option>
             <option
+              className="emotion-2"
               value="UZB"
             >
               Uzbekistan
             </option>
             <option
+              className="emotion-2"
               value="VUT"
             >
               Vanuatu
             </option>
             <option
+              className="emotion-2"
               value="VEN"
             >
               Venezuela (Bolivarian Republic of)
             </option>
             <option
+              className="emotion-2"
               value="VNM"
             >
               Vietnam
             </option>
             <option
+              className="emotion-2"
               value="WLF"
             >
               Wallis and Futuna Islands
             </option>
             <option
+              className="emotion-2"
               value="ESH"
             >
               Western Sahara
             </option>
             <option
+              className="emotion-2"
               value="YEM"
             >
               Yemen
             </option>
             <option
+              className="emotion-2"
               value="ZMB"
             >
               Zambia
             </option>
             <option
+              className="emotion-2"
               value="ZWE"
             >
               Zimbabwe
@@ -72828,7 +73880,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
       </div>
     </div>
     <div
-      className="emotion-3"
+      className="emotion-295"
     >
       <div>
         <label
@@ -72874,261 +73926,313 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
             value="MA"
           >
             <option
+              className="emotion-2"
               value=""
             >
               --
             </option>
             <option
+              className="emotion-2"
               value="AL"
             >
               AL
             </option>
             <option
+              className="emotion-2"
               value="AK"
             >
               AK
             </option>
             <option
+              className="emotion-2"
               value="AZ"
             >
               AZ
             </option>
             <option
+              className="emotion-2"
               value="AR"
             >
               AR
             </option>
             <option
+              className="emotion-2"
               value="CA"
             >
               CA
             </option>
             <option
+              className="emotion-2"
               value="CO"
             >
               CO
             </option>
             <option
+              className="emotion-2"
               value="CT"
             >
               CT
             </option>
             <option
+              className="emotion-2"
               value="DE"
             >
               DE
             </option>
             <option
+              className="emotion-2"
               value="DC"
             >
               DC
             </option>
             <option
+              className="emotion-2"
               value="FL"
             >
               FL
             </option>
             <option
+              className="emotion-2"
               value="GA"
             >
               GA
             </option>
             <option
+              className="emotion-2"
               value="HI"
             >
               HI
             </option>
             <option
+              className="emotion-2"
               value="ID"
             >
               ID
             </option>
             <option
+              className="emotion-2"
               value="IL"
             >
               IL
             </option>
             <option
+              className="emotion-2"
               value="IN"
             >
               IN
             </option>
             <option
+              className="emotion-2"
               value="IA"
             >
               IA
             </option>
             <option
+              className="emotion-2"
               value="KS"
             >
               KS
             </option>
             <option
+              className="emotion-2"
               value="KY"
             >
               KY
             </option>
             <option
+              className="emotion-2"
               value="LA"
             >
               LA
             </option>
             <option
+              className="emotion-2"
               value="ME"
             >
               ME
             </option>
             <option
+              className="emotion-2"
               value="MD"
             >
               MD
             </option>
             <option
+              className="emotion-2"
               value="MA"
             >
               MA
             </option>
             <option
+              className="emotion-2"
               value="MI"
             >
               MI
             </option>
             <option
+              className="emotion-2"
               value="MN"
             >
               MN
             </option>
             <option
+              className="emotion-2"
               value="MS"
             >
               MS
             </option>
             <option
+              className="emotion-2"
               value="MO"
             >
               MO
             </option>
             <option
+              className="emotion-2"
               value="MT"
             >
               MT
             </option>
             <option
+              className="emotion-2"
               value="NE"
             >
               NE
             </option>
             <option
+              className="emotion-2"
               value="NV"
             >
               NV
             </option>
             <option
+              className="emotion-2"
               value="NH"
             >
               NH
             </option>
             <option
+              className="emotion-2"
               value="NJ"
             >
               NJ
             </option>
             <option
+              className="emotion-2"
               value="NM"
             >
               NM
             </option>
             <option
+              className="emotion-2"
               value="NY"
             >
               NY
             </option>
             <option
+              className="emotion-2"
               value="NC"
             >
               NC
             </option>
             <option
+              className="emotion-2"
               value="ND"
             >
               ND
             </option>
             <option
+              className="emotion-2"
               value="OH"
             >
               OH
             </option>
             <option
+              className="emotion-2"
               value="OK"
             >
               OK
             </option>
             <option
+              className="emotion-2"
               value="OR"
             >
               OR
             </option>
             <option
+              className="emotion-2"
               value="PA"
             >
               PA
             </option>
             <option
+              className="emotion-2"
               value="RI"
             >
               RI
             </option>
             <option
+              className="emotion-2"
               value="SC"
             >
               SC
             </option>
             <option
+              className="emotion-2"
               value="SD"
             >
               SD
             </option>
             <option
+              className="emotion-2"
               value="TN"
             >
               TN
             </option>
             <option
+              className="emotion-2"
               value="TX"
             >
               TX
             </option>
             <option
+              className="emotion-2"
               value="UT"
             >
               UT
             </option>
             <option
+              className="emotion-2"
               value="VT"
             >
               VT
             </option>
             <option
+              className="emotion-2"
               value="VA"
             >
               VA
             </option>
             <option
+              className="emotion-2"
               value="WA"
             >
               WA
             </option>
             <option
+              className="emotion-2"
               value="WV"
             >
               WV
             </option>
             <option
+              className="emotion-2"
               value="WI"
             >
               WI
             </option>
             <option
+              className="emotion-2"
               value="WY"
             >
               WY
@@ -73172,7 +74276,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           </span>
         </label>
         <label
-          className="notice emotion-4"
+          className="notice emotion-296"
         >
           For Boston residents: Please put 'Boston' as the City, do not use neighborhood names.
         </label>
@@ -73227,7 +74331,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           </span>
         </label>
         <label
-          className="notice emotion-4"
+          className="notice emotion-296"
         >
           Please include your apartment number if that applies.
         </label>
@@ -74868,40 +75972,40 @@ Array [
   color: #d22d23;
 }
 
-.emotion-48 fieldset + fieldset {
+.emotion-536 fieldset + fieldset {
   margin-top: 2rem;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-48 fieldset + fieldset {
+  .emotion-536 fieldset + fieldset {
     margin-top: 4rem;
   }
 
-  .emotion-48 fieldset + fieldset .lnk {
+  .emotion-536 fieldset + fieldset .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-47 {
+.emotion-535 {
   margin: 0;
   padding: 0;
   border: none;
 }
 
-.emotion-47 legend {
+.emotion-535 legend {
   padding-left: 0;
   padding-right: 0;
   width: 100%;
 }
 
-.emotion-47 h2 {
+.emotion-535 h2 {
   margin-bottom: 0;
   font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   color: #091f2f;
 }
 
-.emotion-47 .desc {
+.emotion-535 .desc {
   margin: 0.5rem 0 0.75rem;
   font-family: Lora,Georgia,serif;
   font-size: 0.9375em;
@@ -74910,49 +76014,49 @@ Array [
   line-height: 1.2em;
 }
 
-.emotion-50 {
+.emotion-538 {
   text-align: center;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-50 {
+  .emotion-538 {
     margin-top: 2.5rem;
     text-align: left;
   }
 
-  .emotion-50 > div {
+  .emotion-538 > div {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 
-  .emotion-50 > div.ta-r > button {
+  .emotion-538 > div.ta-r > button {
     margin-left: auto;
   }
 
-  .emotion-50 .lnk {
+  .emotion-538 .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-49 {
+.emotion-537 {
   padding: 1.25rem !important;
   padding-left: 0 !important;
 }
 
-.emotion-17 {
+.emotion-25 {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-.emotion-17 legend {
+.emotion-25 legend {
   padding-left: 0;
   font-size: 120%;
 }
 
-.emotion-15 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -74966,45 +76070,45 @@ Array [
 }
 
 @media screen and (min-width:480px) {
-  .emotion-15 > div {
+  .emotion-23 > div {
     -webkit-flex: 0 0 24%;
     -ms-flex: 0 0 24%;
     flex: 0 0 24%;
   }
 
-  .emotion-15 > div:last-of-type {
+  .emotion-23 > div:last-of-type {
     -webkit-flex: 0 0 50%;
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
   }
 }
 
-.emotion-15 input {
+.emotion-23 input {
   -moz-appearance: textfield;
 }
 
-.emotion-15 input::-webkit-inner-spin-button {
+.emotion-23 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.emotion-15 input::-ms-clear {
+.emotion-23 input::-ms-clear {
   display: none;
 }
 
-.emotion-15 label {
+.emotion-23 label {
   margin-top: 0.5rem;
 }
 
-.emotion-15.disabled {
+.emotion-23.disabled {
   opacity: 0.4;
 }
 
-.emotion-15.disabled * {
+.emotion-23.disabled * {
   cursor: not-allowed;
 }
 
 @media screen and (max-width:480px) {
-  .emotion-15 {
+  .emotion-23 {
     display: block;
   }
 }
@@ -75152,7 +76256,7 @@ Array [
   }
 }
 
-.emotion-51 {
+.emotion-539 {
   padding: 0px;
 }
 
@@ -75169,50 +76273,50 @@ Array [
   margin-bottom: 3.9375rem;
 }
 
-.emotion-13 {
+.emotion-21 {
   margin-bottom: 3em;
   background: none;
   margin-bottom: 1.5em;
 }
 
-.emotion-13 label {
+.emotion-21 label {
   margin-top: 0em;
 }
 
-.emotion-13 .spacingTop {
+.emotion-21 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-13 label.inputHeading {
+.emotion-21 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-13 label.inputHeading .t--req {
+.emotion-21 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-13 .t--opt {
+.emotion-21 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-13 {
+  .emotion-21 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-13 .ra-l {
+.emotion-21 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-13 > div {
+.emotion-21 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-13 > div {
+  .emotion-21 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75220,17 +76324,17 @@ Array [
   }
 }
 
-.emotion-13 > .RADIOGROUP label {
+.emotion-21 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-13 h3 {
+.emotion-21 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-13 .notice {
+.emotion-21 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75240,7 +76344,7 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-13 .emotion-6:after {
+.emotion-21 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -75380,27 +76484,27 @@ Array [
   visibility: visible;
 }
 
-.emotion-11 {
+.emotion-19 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 {
+  .emotion-19 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-11 .ra-l {
+.emotion-19 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-11 > div {
+.emotion-19 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 > div {
+  .emotion-19 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75408,17 +76512,17 @@ Array [
   }
 }
 
-.emotion-11 > .RADIOGROUP label {
+.emotion-19 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-11 h3 {
+.emotion-19 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-11 .notice {
+.emotion-19 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75428,58 +76532,62 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-11 .emotion-6:after {
+.emotion-19 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-11 .sel-c {
+.emotion-19 .sel-c {
   display: block;
 }
 
-.emotion-19 {
+.emotion-11 {
+  color: #091f2f;
+}
+
+.emotion-267 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-19 label {
+.emotion-267 label {
   margin-top: 0em;
 }
 
-.emotion-19 .spacingTop {
+.emotion-267 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-19 label.inputHeading {
+.emotion-267 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-19 label.inputHeading .t--req {
+.emotion-267 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-19 .t--opt {
+.emotion-267 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-19 {
+  .emotion-267 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-19 .ra-l {
+.emotion-267 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-19 > div {
+.emotion-267 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-19 > div {
+  .emotion-267 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75487,17 +76595,17 @@ Array [
   }
 }
 
-.emotion-19 > .RADIOGROUP label {
+.emotion-267 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-19 h3 {
+.emotion-267 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-19 .notice {
+.emotion-267 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75507,12 +76615,12 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-19 .emotion-6:after {
+.emotion-267 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-14 {
+.emotion-22 {
   color: #091f2f;
   font-weight: 700;
   font-size: 1.125rem;
@@ -75524,11 +76632,11 @@ Array [
   margin-bottom: 1em;
 }
 
-.emotion-14 h1 {
+.emotion-22 h1 {
   border-bottom: 4px solid #091f2f;
 }
 
-.emotion-14 .notice {
+.emotion-22 .notice {
   color: #58585b;
   font-family: Lora,Georgia,serif;
   font-size: 0.9375rem;
@@ -75541,61 +76649,61 @@ Array [
   border-top: 4px solid #091f2f;
 }
 
-.emotion-14 .notice .tool-tip__wrapper {
+.emotion-22 .notice .tool-tip__wrapper {
   display: inline-block;
 }
 
-.emotion-16 {
+.emotion-24 {
   margin-bottom: 2.25em;
 }
 
-.emotion-24 {
+.emotion-512 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-24 label {
+.emotion-512 label {
   margin-top: 0em;
 }
 
-.emotion-24 .spacingTop {
+.emotion-512 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-24 label.inputHeading {
+.emotion-512 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-24 label.inputHeading .t--req {
+.emotion-512 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-24 .t--opt {
+.emotion-512 .t--opt {
   color: #58585b !important;
 }
 
-.emotion-23 {
+.emotion-511 {
   margin-bottom: 2.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-23 {
+  .emotion-511 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-23 .ra-l {
+.emotion-511 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-23 > div {
+.emotion-511 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-23 > div {
+  .emotion-511 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75603,17 +76711,17 @@ Array [
   }
 }
 
-.emotion-23 > .RADIOGROUP label {
+.emotion-511 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-23 h3 {
+.emotion-511 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-23 .notice {
+.emotion-511 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75623,33 +76731,33 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-23 .emotion-6:after {
+.emotion-511 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-33 {
+.emotion-521 {
   margin-top: 1em;
   margin-bottom: 0.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-33 {
+  .emotion-521 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-33 .ra-l {
+.emotion-521 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-33 > div {
+.emotion-521 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-33 > div {
+  .emotion-521 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75657,17 +76765,17 @@ Array [
   }
 }
 
-.emotion-33 > .RADIOGROUP label {
+.emotion-521 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-33 h3 {
+.emotion-521 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-33 .notice {
+.emotion-521 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75677,12 +76785,12 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-33 .emotion-6:after {
+.emotion-521 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-36 {
+.emotion-524 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -75694,7 +76802,7 @@ Array [
   position: relative;
 }
 
-.emotion-36 .icon {
+.emotion-524 .icon {
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -75707,20 +76815,20 @@ Array [
   color: white;
 }
 
-.emotion-36 .icon::before {
+.emotion-524 .icon::before {
   content: '?';
 }
 
-.emotion-36 .tt--info {
+.emotion-524 .tt--info {
   text-transform: lowercase;
   padding-left: 3.5px;
 }
 
-.emotion-36 .tt--info::before {
+.emotion-524 .tt--info::before {
   content: 'i';
 }
 
-.emotion-36 .msg {
+.emotion-524 .msg {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -75740,39 +76848,39 @@ Array [
   top: calc(-30% + 1px);
 }
 
-.emotion-36 .icon:hover + .msg {
+.emotion-524 .icon:hover + .msg {
   visibility: visible;
 }
 
-.emotion-45 {
+.emotion-533 {
   margin-bottom: 2.5em;
 }
 
-.emotion-45 h2 {
+.emotion-533 h2 {
   font-size: 1.5rem;
 }
 
-.emotion-45 h4 {
+.emotion-533 h4 {
   font-size: 1.25rem;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-45 {
+  .emotion-533 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-45 .ra-l {
+.emotion-533 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-45 > div {
+.emotion-533 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-45 > div {
+  .emotion-533 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75780,17 +76888,17 @@ Array [
   }
 }
 
-.emotion-45 > .RADIOGROUP label {
+.emotion-533 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-45 h3 {
+.emotion-533 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-45 .notice {
+.emotion-533 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75800,32 +76908,32 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-45 .emotion-6:after {
+.emotion-533 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-43 {
+.emotion-531 {
   margin-top: 1em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-43 {
+  .emotion-531 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-43 .ra-l {
+.emotion-531 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-43 > div {
+.emotion-531 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-43 > div {
+  .emotion-531 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -75833,17 +76941,17 @@ Array [
   }
 }
 
-.emotion-43 > .RADIOGROUP label {
+.emotion-531 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-43 h3 {
+.emotion-531 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-43 .notice {
+.emotion-531 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -75853,7 +76961,7 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-43 .emotion-6:after {
+.emotion-531 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -76136,13 +77244,13 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-51"
+              className="b-c b-c--nbp emotion-539"
             >
               <div
-                className="emotion-48"
+                className="emotion-536"
               >
                 <fieldset
-                  className=" emotion-47"
+                  className=" emotion-535"
                 >
                   <legend>
                     <h2
@@ -76153,7 +77261,7 @@ Array [
                     </h2>
                   </legend>
                   <div
-                    className="emotion-13"
+                    className="emotion-21"
                   >
                     <h1
                       className="emotion-5"
@@ -76387,7 +77495,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      className="emotion-11"
+                      className="emotion-19"
                     >
                       <div>
                         <label
@@ -76439,41 +77547,49 @@ Array [
                           >
                             <option />
                             <option
+                              className="emotion-11"
                               value="I"
                             >
                               I
                             </option>
                             <option
+                              className="emotion-11"
                               value="II"
                             >
                               II
                             </option>
                             <option
+                              className="emotion-11"
                               value="III"
                             >
                               III
                             </option>
                             <option
+                              className="emotion-11"
                               value="IV"
                             >
                               IV
                             </option>
                             <option
+                              className="emotion-11"
                               value="V"
                             >
                               V
                             </option>
                             <option
+                              className="emotion-11"
                               value="VI"
                             >
                               VI
                             </option>
                             <option
+                              className="emotion-11"
                               value="Jr."
                             >
                               Jr.
                             </option>
                             <option
+                              className="emotion-11"
                               value="Sr."
                             >
                               Sr.
@@ -76545,19 +77661,19 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-19"
+                    className="emotion-267"
                   >
                     <h1
-                      className="emotion-14"
+                      className="emotion-22"
                     >
                       Date and Place of Birth
                     </h1>
                     <span />
                     <fieldset
-                      className="emotion-17"
+                      className="emotion-25"
                     >
                       <div
-                        className="emotion-16"
+                        className="emotion-24"
                       >
                         <legend
                           style={
@@ -76570,7 +77686,7 @@ Array [
                           Person A Date of Birth
                         </legend>
                         <div
-                          className=" emotion-15"
+                          className=" emotion-23"
                         >
                           <div>
                             <label
@@ -76675,7 +77791,7 @@ Array [
                       </div>
                     </fieldset>
                     <div
-                      className="emotion-11"
+                      className="emotion-19"
                     >
                       <div>
                         <label
@@ -76723,1201 +77839,1441 @@ Array [
                           >
                             <option />
                             <option
+                              className="emotion-11"
                               value="USA"
                             >
                               United States of America
                             </option>
                             <option
+                              className="emotion-11"
                               value="VIR"
                             >
                               United States Virgin Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="AFG"
                             >
                               Afghanistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="ALA"
                             >
                               Åland Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="ALB"
                             >
                               Albania
                             </option>
                             <option
+                              className="emotion-11"
                               value="DZA"
                             >
                               Algeria
                             </option>
                             <option
+                              className="emotion-11"
                               value="ASM"
                             >
                               American Samoa
                             </option>
                             <option
+                              className="emotion-11"
                               value="AND"
                             >
                               Andorra
                             </option>
                             <option
+                              className="emotion-11"
                               value="AGO"
                             >
                               Angola
                             </option>
                             <option
+                              className="emotion-11"
                               value="AIA"
                             >
                               Anguilla
                             </option>
                             <option
+                              className="emotion-11"
                               value="ATG"
                             >
                               Antigua and Barbuda
                             </option>
                             <option
+                              className="emotion-11"
                               value="ARG"
                             >
                               Argentina
                             </option>
                             <option
+                              className="emotion-11"
                               value="ARM"
                             >
                               Armenia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ABW"
                             >
                               Aruba
                             </option>
                             <option
+                              className="emotion-11"
                               value="AUS"
                             >
                               Australia
                             </option>
                             <option
+                              className="emotion-11"
                               value="AUT"
                             >
                               Austria
                             </option>
                             <option
+                              className="emotion-11"
                               value="AZE"
                             >
                               Azerbaijan
                             </option>
                             <option
+                              className="emotion-11"
                               value="BHS"
                             >
                               Bahamas
                             </option>
                             <option
+                              className="emotion-11"
                               value="BHR"
                             >
                               Bahrain
                             </option>
                             <option
+                              className="emotion-11"
                               value="BGD"
                             >
                               Bangladesh
                             </option>
                             <option
+                              className="emotion-11"
                               value="BRB"
                             >
                               Barbados
                             </option>
                             <option
+                              className="emotion-11"
                               value="BLR"
                             >
                               Belarus
                             </option>
                             <option
+                              className="emotion-11"
                               value="BEL"
                             >
                               Belgium
                             </option>
                             <option
+                              className="emotion-11"
                               value="BLZ"
                             >
                               Belize
                             </option>
                             <option
+                              className="emotion-11"
                               value="BEN"
                             >
                               Benin
                             </option>
                             <option
+                              className="emotion-11"
                               value="BMU"
                             >
                               Bermuda
                             </option>
                             <option
+                              className="emotion-11"
                               value="BTN"
                             >
                               Bhutan
                             </option>
                             <option
+                              className="emotion-11"
                               value="BOL"
                             >
                               Bolivia (Plurinational State of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="BES"
                             >
                               Bonaire, Saint Eustatius and Saba
                             </option>
                             <option
+                              className="emotion-11"
                               value="BIH"
                             >
                               Bosnia and Herzegovina
                             </option>
                             <option
+                              className="emotion-11"
                               value="BWA"
                             >
                               Botswana
                             </option>
                             <option
+                              className="emotion-11"
                               value="BRA"
                             >
                               Brazil
                             </option>
                             <option
+                              className="emotion-11"
                               value="VGB"
                             >
                               British Virgin Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="BRN"
                             >
                               Brunei Darussalam
                             </option>
                             <option
+                              className="emotion-11"
                               value="BGR"
                             >
                               Bulgaria
                             </option>
                             <option
+                              className="emotion-11"
                               value="BFA"
                             >
                               Burkina Faso
                             </option>
                             <option
+                              className="emotion-11"
                               value="BDI"
                             >
                               Burundi
                             </option>
                             <option
+                              className="emotion-11"
                               value="CPV"
                             >
                               Cabo Verde
                             </option>
                             <option
+                              className="emotion-11"
                               value="KHM"
                             >
                               Cambodia
                             </option>
                             <option
+                              className="emotion-11"
                               value="CMR"
                             >
                               Cameroon
                             </option>
                             <option
+                              className="emotion-11"
                               value="CAN"
                             >
                               Canada
                             </option>
                             <option
+                              className="emotion-11"
                               value="CYM"
                             >
                               Cayman Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="CAF"
                             >
                               Central African Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="TCD"
                             >
                               Chad
                             </option>
                             <option
+                              className="emotion-11"
                               value="CHL"
                             >
                               Chile
                             </option>
                             <option
+                              className="emotion-11"
                               value="CHN"
                             >
                               China
                             </option>
                             <option
+                              className="emotion-11"
                               value="HKG"
                             >
                               China, Hong Kong Special Administrative Region
                             </option>
                             <option
+                              className="emotion-11"
                               value="MAC"
                             >
                               China, Macao Special Administrative Region
                             </option>
                             <option
+                              className="emotion-11"
                               value="COL"
                             >
                               Colombia
                             </option>
                             <option
+                              className="emotion-11"
                               value="COM"
                             >
                               Comoros
                             </option>
                             <option
+                              className="emotion-11"
                               value="COG"
                             >
                               Congo
                             </option>
                             <option
+                              className="emotion-11"
                               value="COK"
                             >
                               Cook Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="CRI"
                             >
                               Costa Rica
                             </option>
                             <option
+                              className="emotion-11"
                               value="CIV"
                             >
                               Côte d'Ivoire
                             </option>
                             <option
+                              className="emotion-11"
                               value="HRV"
                             >
                               Croatia
                             </option>
                             <option
+                              className="emotion-11"
                               value="CUB"
                             >
                               Cuba
                             </option>
                             <option
+                              className="emotion-11"
                               value="CUW"
                             >
                               Curaçao
                             </option>
                             <option
+                              className="emotion-11"
                               value="CYP"
                             >
                               Cyprus
                             </option>
                             <option
+                              className="emotion-11"
                               value="CZE"
                             >
                               Czech Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRK"
                             >
                               Democratic People's Republic of Korea
                             </option>
                             <option
+                              className="emotion-11"
                               value="COD"
                             >
                               Democratic Republic of the Congo
                             </option>
                             <option
+                              className="emotion-11"
                               value="DNK"
                             >
                               Denmark
                             </option>
                             <option
+                              className="emotion-11"
                               value="DJI"
                             >
                               Djibouti
                             </option>
                             <option
+                              className="emotion-11"
                               value="DMA"
                             >
                               Dominica
                             </option>
                             <option
+                              className="emotion-11"
                               value="DOM"
                             >
                               Dominican Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="ECU"
                             >
                               Ecuador
                             </option>
                             <option
+                              className="emotion-11"
                               value="EGY"
                             >
                               Egypt
                             </option>
                             <option
+                              className="emotion-11"
                               value="SLV"
                             >
                               El Salvador
                             </option>
                             <option
+                              className="emotion-11"
                               value="GNQ"
                             >
                               Equatorial Guinea
                             </option>
                             <option
+                              className="emotion-11"
                               value="ERI"
                             >
                               Eritrea
                             </option>
                             <option
+                              className="emotion-11"
                               value="EST"
                             >
                               Estonia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ETH"
                             >
                               Ethiopia
                             </option>
                             <option
+                              className="emotion-11"
                               value="FRO"
                             >
                               Faeroe Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="FLK"
                             >
                               Falkland Islands (Malvinas)
                             </option>
                             <option
+                              className="emotion-11"
                               value="FJI"
                             >
                               Fiji
                             </option>
                             <option
+                              className="emotion-11"
                               value="FIN"
                             >
                               Finland
                             </option>
                             <option
+                              className="emotion-11"
                               value="FRA"
                             >
                               France
                             </option>
                             <option
+                              className="emotion-11"
                               value="GUF"
                             >
                               French Guiana
                             </option>
                             <option
+                              className="emotion-11"
                               value="PYF"
                             >
                               French Polynesia
                             </option>
                             <option
+                              className="emotion-11"
                               value="GAB"
                             >
                               Gabon
                             </option>
                             <option
+                              className="emotion-11"
                               value="GMB"
                             >
                               Gambia
                             </option>
                             <option
+                              className="emotion-11"
                               value="GEO"
                             >
                               Georgia
                             </option>
                             <option
+                              className="emotion-11"
                               value="DEU"
                             >
                               Germany
                             </option>
                             <option
+                              className="emotion-11"
                               value="GHA"
                             >
                               Ghana
                             </option>
                             <option
+                              className="emotion-11"
                               value="GIB"
                             >
                               Gibraltar
                             </option>
                             <option
+                              className="emotion-11"
                               value="GRC"
                             >
                               Greece
                             </option>
                             <option
+                              className="emotion-11"
                               value="GRL"
                             >
                               Greenland
                             </option>
                             <option
+                              className="emotion-11"
                               value="GRD"
                             >
                               Grenada
                             </option>
                             <option
+                              className="emotion-11"
                               value="GLP"
                             >
                               Guadeloupe
                             </option>
                             <option
+                              className="emotion-11"
                               value="GUM"
                             >
                               Guam
                             </option>
                             <option
+                              className="emotion-11"
                               value="GTM"
                             >
                               Guatemala
                             </option>
                             <option
+                              className="emotion-11"
                               value="GGY"
                             >
                               Guernsey
                             </option>
                             <option
+                              className="emotion-11"
                               value="GIN"
                             >
                               Guinea
                             </option>
                             <option
+                              className="emotion-11"
                               value="GNB"
                             >
                               Guinea-Bissau
                             </option>
                             <option
+                              className="emotion-11"
                               value="GUY"
                             >
                               Guyana
                             </option>
                             <option
+                              className="emotion-11"
                               value="HTI"
                             >
                               Haiti
                             </option>
                             <option
+                              className="emotion-11"
                               value="VAT"
                             >
                               Holy See
                             </option>
                             <option
+                              className="emotion-11"
                               value="HND"
                             >
                               Honduras
                             </option>
                             <option
+                              className="emotion-11"
                               value="HUN"
                             >
                               Hungary
                             </option>
                             <option
+                              className="emotion-11"
                               value="ISL"
                             >
                               Iceland
                             </option>
                             <option
+                              className="emotion-11"
                               value="IND"
                             >
                               India
                             </option>
                             <option
+                              className="emotion-11"
                               value="IDN"
                             >
                               Indonesia
                             </option>
                             <option
+                              className="emotion-11"
                               value="IRN"
                             >
                               Iran (Islamic Republic of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="IRQ"
                             >
                               Iraq
                             </option>
                             <option
+                              className="emotion-11"
                               value="IRL"
                             >
                               Ireland
                             </option>
                             <option
+                              className="emotion-11"
                               value="IMN"
                             >
                               Isle of Man
                             </option>
                             <option
+                              className="emotion-11"
                               value="ISR"
                             >
                               Israel
                             </option>
                             <option
+                              className="emotion-11"
                               value="ITA"
                             >
                               Italy
                             </option>
                             <option
+                              className="emotion-11"
                               value="JAM"
                             >
                               Jamaica
                             </option>
                             <option
+                              className="emotion-11"
                               value="JPN"
                             >
                               Japan
                             </option>
                             <option
+                              className="emotion-11"
                               value="JEY"
                             >
                               Jersey
                             </option>
                             <option
+                              className="emotion-11"
                               value="JOR"
                             >
                               Jordan
                             </option>
                             <option
+                              className="emotion-11"
                               value="KAZ"
                             >
                               Kazakhstan
                             </option>
                             <option
+                              className="emotion-11"
                               value="KEN"
                             >
                               Kenya
                             </option>
                             <option
+                              className="emotion-11"
                               value="KIR"
                             >
                               Kiribati
                             </option>
                             <option
+                              className="emotion-11"
                               value="KWT"
                             >
                               Kuwait
                             </option>
                             <option
+                              className="emotion-11"
                               value="KGZ"
                             >
                               Kyrgyzstan
                             </option>
                             <option
+                              className="emotion-11"
                               value="LAO"
                             >
                               Lao People's Democratic Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="LVA"
                             >
                               Latvia
                             </option>
                             <option
+                              className="emotion-11"
                               value="LBN"
                             >
                               Lebanon
                             </option>
                             <option
+                              className="emotion-11"
                               value="LSO"
                             >
                               Lesotho
                             </option>
                             <option
+                              className="emotion-11"
                               value="LBR"
                             >
                               Liberia
                             </option>
                             <option
+                              className="emotion-11"
                               value="LBY"
                             >
                               Libya
                             </option>
                             <option
+                              className="emotion-11"
                               value="LIE"
                             >
                               Liechtenstein
                             </option>
                             <option
+                              className="emotion-11"
                               value="LTU"
                             >
                               Lithuania
                             </option>
                             <option
+                              className="emotion-11"
                               value="LUX"
                             >
                               Luxembourg
                             </option>
                             <option
+                              className="emotion-11"
                               value="MDG"
                             >
                               Madagascar
                             </option>
                             <option
+                              className="emotion-11"
                               value="MWI"
                             >
                               Malawi
                             </option>
                             <option
+                              className="emotion-11"
                               value="MYS"
                             >
                               Malaysia
                             </option>
                             <option
+                              className="emotion-11"
                               value="MDV"
                             >
                               Maldives
                             </option>
                             <option
+                              className="emotion-11"
                               value="MLI"
                             >
                               Mali
                             </option>
                             <option
+                              className="emotion-11"
                               value="MLT"
                             >
                               Malta
                             </option>
                             <option
+                              className="emotion-11"
                               value="MHL"
                             >
                               Marshall Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="MTQ"
                             >
                               Martinique
                             </option>
                             <option
+                              className="emotion-11"
                               value="MRT"
                             >
                               Mauritania
                             </option>
                             <option
+                              className="emotion-11"
                               value="MUS"
                             >
                               Mauritius
                             </option>
                             <option
+                              className="emotion-11"
                               value="MYT"
                             >
                               Mayotte
                             </option>
                             <option
+                              className="emotion-11"
                               value="MEX"
                             >
                               Mexico
                             </option>
                             <option
+                              className="emotion-11"
                               value="FSM"
                             >
                               Micronesia (Federated States of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="MCO"
                             >
                               Monaco
                             </option>
                             <option
+                              className="emotion-11"
                               value="MNG"
                             >
                               Mongolia
                             </option>
                             <option
+                              className="emotion-11"
                               value="MNE"
                             >
                               Montenegro
                             </option>
                             <option
+                              className="emotion-11"
                               value="MSR"
                             >
                               Montserrat
                             </option>
                             <option
+                              className="emotion-11"
                               value="MAR"
                             >
                               Morocco
                             </option>
                             <option
+                              className="emotion-11"
                               value="MOZ"
                             >
                               Mozambique
                             </option>
                             <option
+                              className="emotion-11"
                               value="MMR"
                             >
                               Myanmar
                             </option>
                             <option
+                              className="emotion-11"
                               value="NAM"
                             >
                               Namibia
                             </option>
                             <option
+                              className="emotion-11"
                               value="NRU"
                             >
                               Nauru
                             </option>
                             <option
+                              className="emotion-11"
                               value="NPL"
                             >
                               Nepal
                             </option>
                             <option
+                              className="emotion-11"
                               value="NLD"
                             >
                               Netherlands
                             </option>
                             <option
+                              className="emotion-11"
                               value="NCL"
                             >
                               New Caledonia
                             </option>
                             <option
+                              className="emotion-11"
                               value="NZL"
                             >
                               New Zealand
                             </option>
                             <option
+                              className="emotion-11"
                               value="NIC"
                             >
                               Nicaragua
                             </option>
                             <option
+                              className="emotion-11"
                               value="NER"
                             >
                               Niger
                             </option>
                             <option
+                              className="emotion-11"
                               value="NGA"
                             >
                               Nigeria
                             </option>
                             <option
+                              className="emotion-11"
                               value="NIU"
                             >
                               Niue
                             </option>
                             <option
+                              className="emotion-11"
                               value="NFK"
                             >
                               Norfolk Island
                             </option>
                             <option
+                              className="emotion-11"
                               value="MNP"
                             >
                               Northern Mariana Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="NOR"
                             >
                               Norway
                             </option>
                             <option
+                              className="emotion-11"
                               value="OMN"
                             >
                               Oman
                             </option>
                             <option
+                              className="emotion-11"
                               value="PAK"
                             >
                               Pakistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="PLW"
                             >
                               Palau
                             </option>
                             <option
+                              className="emotion-11"
                               value="PAN"
                             >
                               Panama
                             </option>
                             <option
+                              className="emotion-11"
                               value="PNG"
                             >
                               Papua New Guinea
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRY"
                             >
                               Paraguay
                             </option>
                             <option
+                              className="emotion-11"
                               value="PER"
                             >
                               Peru
                             </option>
                             <option
+                              className="emotion-11"
                               value="PHL"
                             >
                               Philippines
                             </option>
                             <option
+                              className="emotion-11"
                               value="PCN"
                             >
                               Pitcairn
                             </option>
                             <option
+                              className="emotion-11"
                               value="POL"
                             >
                               Poland
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRT"
                             >
                               Portugal
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRI"
                             >
                               Puerto Rico
                             </option>
                             <option
+                              className="emotion-11"
                               value="QAT"
                             >
                               Qatar
                             </option>
                             <option
+                              className="emotion-11"
                               value="KOR"
                             >
                               Republic of Korea
                             </option>
                             <option
+                              className="emotion-11"
                               value="MDA"
                             >
                               Republic of Moldova
                             </option>
                             <option
+                              className="emotion-11"
                               value="REU"
                             >
                               Réunion
                             </option>
                             <option
+                              className="emotion-11"
                               value="ROU"
                             >
                               Romania
                             </option>
                             <option
+                              className="emotion-11"
                               value="RUS"
                             >
                               Russian Federation
                             </option>
                             <option
+                              className="emotion-11"
                               value="RWA"
                             >
                               Rwanda
                             </option>
                             <option
+                              className="emotion-11"
                               value="BLM"
                             >
                               Saint-Barthélemy
                             </option>
                             <option
+                              className="emotion-11"
                               value="SHN"
                             >
                               Saint Helena
                             </option>
                             <option
+                              className="emotion-11"
                               value="KNA"
                             >
                               Saint Kitts and Nevis
                             </option>
                             <option
+                              className="emotion-11"
                               value="LCA"
                             >
                               Saint Lucia
                             </option>
                             <option
+                              className="emotion-11"
                               value="MAF"
                             >
                               Saint-Martin (French part)
                             </option>
                             <option
+                              className="emotion-11"
                               value="SPM"
                             >
                               Saint Pierre and Miquelon
                             </option>
                             <option
+                              className="emotion-11"
                               value="VCT"
                             >
                               Saint Vincent and the Grenadines
                             </option>
                             <option
+                              className="emotion-11"
                               value="WSM"
                             >
                               Samoa
                             </option>
                             <option
+                              className="emotion-11"
                               value="SMR"
                             >
                               San Marino
                             </option>
                             <option
+                              className="emotion-11"
                               value="STP"
                             >
                               Sao Tome and Principe
                             </option>
                             <option
+                              className="emotion-11"
                               value="SAU"
                             >
                               Saudi Arabia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SEN"
                             >
                               Senegal
                             </option>
                             <option
+                              className="emotion-11"
                               value="SRB"
                             >
                               Serbia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SYC"
                             >
                               Seychelles
                             </option>
                             <option
+                              className="emotion-11"
                               value="SLE"
                             >
                               Sierra Leone
                             </option>
                             <option
+                              className="emotion-11"
                               value="SGP"
                             >
                               Singapore
                             </option>
                             <option
+                              className="emotion-11"
                               value="SXM"
                             >
                               Sint Maarten (Dutch part)
                             </option>
                             <option
+                              className="emotion-11"
                               value="SVK"
                             >
                               Slovakia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SVN"
                             >
                               Slovenia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SLB"
                             >
                               Solomon Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="SOM"
                             >
                               Somalia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ZAF"
                             >
                               South Africa
                             </option>
                             <option
+                              className="emotion-11"
                               value="SSD"
                             >
                               South Sudan
                             </option>
                             <option
+                              className="emotion-11"
                               value="ESP"
                             >
                               Spain
                             </option>
                             <option
+                              className="emotion-11"
                               value="LKA"
                             >
                               Sri Lanka
                             </option>
                             <option
+                              className="emotion-11"
                               value="PSE"
                             >
                               State of Palestine
                             </option>
                             <option
+                              className="emotion-11"
                               value="SDN"
                             >
                               Sudan
                             </option>
                             <option
+                              className="emotion-11"
                               value="SUR"
                             >
                               Suriname
                             </option>
                             <option
+                              className="emotion-11"
                               value="SJM"
                             >
                               Svalbard and Jan Mayen Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="SWZ"
                             >
                               Swaziland
                             </option>
                             <option
+                              className="emotion-11"
                               value="SWE"
                             >
                               Sweden
                             </option>
                             <option
+                              className="emotion-11"
                               value="CHE"
                             >
                               Switzerland
                             </option>
                             <option
+                              className="emotion-11"
                               value="SYR"
                             >
                               Syrian Arab Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="TWAN"
                             >
                               Taiwan
                             </option>
                             <option
+                              className="emotion-11"
                               value="TJK"
                             >
                               Tajikistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="THA"
                             >
                               Thailand
                             </option>
                             <option
+                              className="emotion-11"
                               value="MKD"
                             >
                               The former Yugoslav Republic of Macedonia
                             </option>
                             <option
+                              className="emotion-11"
                               value="TLS"
                             >
                               Timor-Leste
                             </option>
                             <option
+                              className="emotion-11"
                               value="TGO"
                             >
                               Togo
                             </option>
                             <option
+                              className="emotion-11"
                               value="TKL"
                             >
                               Tokelau
                             </option>
                             <option
+                              className="emotion-11"
                               value="TON"
                             >
                               Tonga
                             </option>
                             <option
+                              className="emotion-11"
                               value="TTO"
                             >
                               Trinidad and Tobago
                             </option>
                             <option
+                              className="emotion-11"
                               value="TUN"
                             >
                               Tunisia
                             </option>
                             <option
+                              className="emotion-11"
                               value="TUR"
                             >
                               Turkey
                             </option>
                             <option
+                              className="emotion-11"
                               value="TKM"
                             >
                               Turkmenistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="TCA"
                             >
                               Turks and Caicos Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="TUV"
                             >
                               Tuvalu
                             </option>
                             <option
+                              className="emotion-11"
                               value="UGA"
                             >
                               Uganda
                             </option>
                             <option
+                              className="emotion-11"
                               value="UKR"
                             >
                               Ukraine
                             </option>
                             <option
+                              className="emotion-11"
                               value="ARE"
                             >
                               United Arab Emirates
                             </option>
                             <option
+                              className="emotion-11"
                               value="GBR"
                             >
                               United Kingdom of Great Britain and Northern Ireland
                             </option>
                             <option
+                              className="emotion-11"
                               value="TZA"
                             >
                               United Republic of Tanzania
                             </option>
                             <option
+                              className="emotion-11"
                               value="URY"
                             >
                               Uruguay
                             </option>
                             <option
+                              className="emotion-11"
                               value="UZB"
                             >
                               Uzbekistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="VUT"
                             >
                               Vanuatu
                             </option>
                             <option
+                              className="emotion-11"
                               value="VEN"
                             >
                               Venezuela (Bolivarian Republic of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="VNM"
                             >
                               Vietnam
                             </option>
                             <option
+                              className="emotion-11"
                               value="WLF"
                             >
                               Wallis and Futuna Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="ESH"
                             >
                               Western Sahara
                             </option>
                             <option
+                              className="emotion-11"
                               value="YEM"
                             >
                               Yemen
                             </option>
                             <option
+                              className="emotion-11"
                               value="ZMB"
                             >
                               Zambia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ZWE"
                             >
                               Zimbabwe
@@ -77929,7 +79285,7 @@ Array [
                     
                   </div>
                   <div
-                    className="emotion-24"
+                    className="emotion-512"
                   >
                     <h1
                       className="emotion-5"
@@ -77942,10 +79298,10 @@ Array [
                       </div>
                     </h1>
                     <div
-                      className="emotion-23"
+                      className="emotion-511"
                     >
                       <div
-                        className="emotion-11"
+                        className="emotion-19"
                       >
                         <span />
                         <div>
@@ -78004,1201 +79360,1441 @@ Array [
                             >
                               <option />
                               <option
+                                className="emotion-11"
                                 value="USA"
                               >
                                 United States of America
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VIR"
                               >
                                 United States Virgin Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AFG"
                               >
                                 Afghanistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ALA"
                               >
                                 Åland Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ALB"
                               >
                                 Albania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DZA"
                               >
                                 Algeria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ASM"
                               >
                                 American Samoa
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AND"
                               >
                                 Andorra
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AGO"
                               >
                                 Angola
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AIA"
                               >
                                 Anguilla
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ATG"
                               >
                                 Antigua and Barbuda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ARG"
                               >
                                 Argentina
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ARM"
                               >
                                 Armenia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ABW"
                               >
                                 Aruba
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AUS"
                               >
                                 Australia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AUT"
                               >
                                 Austria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AZE"
                               >
                                 Azerbaijan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BHS"
                               >
                                 Bahamas
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BHR"
                               >
                                 Bahrain
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BGD"
                               >
                                 Bangladesh
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BRB"
                               >
                                 Barbados
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BLR"
                               >
                                 Belarus
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BEL"
                               >
                                 Belgium
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BLZ"
                               >
                                 Belize
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BEN"
                               >
                                 Benin
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BMU"
                               >
                                 Bermuda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BTN"
                               >
                                 Bhutan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BOL"
                               >
                                 Bolivia (Plurinational State of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BES"
                               >
                                 Bonaire, Saint Eustatius and Saba
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BIH"
                               >
                                 Bosnia and Herzegovina
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BWA"
                               >
                                 Botswana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BRA"
                               >
                                 Brazil
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VGB"
                               >
                                 British Virgin Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BRN"
                               >
                                 Brunei Darussalam
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BGR"
                               >
                                 Bulgaria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BFA"
                               >
                                 Burkina Faso
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BDI"
                               >
                                 Burundi
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CPV"
                               >
                                 Cabo Verde
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KHM"
                               >
                                 Cambodia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CMR"
                               >
                                 Cameroon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CAN"
                               >
                                 Canada
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CYM"
                               >
                                 Cayman Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CAF"
                               >
                                 Central African Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TCD"
                               >
                                 Chad
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CHL"
                               >
                                 Chile
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CHN"
                               >
                                 China
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HKG"
                               >
                                 China, Hong Kong Special Administrative Region
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MAC"
                               >
                                 China, Macao Special Administrative Region
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COL"
                               >
                                 Colombia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COM"
                               >
                                 Comoros
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COG"
                               >
                                 Congo
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COK"
                               >
                                 Cook Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CRI"
                               >
                                 Costa Rica
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CIV"
                               >
                                 Côte d'Ivoire
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HRV"
                               >
                                 Croatia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CUB"
                               >
                                 Cuba
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CUW"
                               >
                                 Curaçao
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CYP"
                               >
                                 Cyprus
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CZE"
                               >
                                 Czech Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRK"
                               >
                                 Democratic People's Republic of Korea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COD"
                               >
                                 Democratic Republic of the Congo
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DNK"
                               >
                                 Denmark
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DJI"
                               >
                                 Djibouti
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DMA"
                               >
                                 Dominica
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DOM"
                               >
                                 Dominican Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ECU"
                               >
                                 Ecuador
                               </option>
                               <option
+                                className="emotion-11"
                                 value="EGY"
                               >
                                 Egypt
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SLV"
                               >
                                 El Salvador
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GNQ"
                               >
                                 Equatorial Guinea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ERI"
                               >
                                 Eritrea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="EST"
                               >
                                 Estonia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ETH"
                               >
                                 Ethiopia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FRO"
                               >
                                 Faeroe Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FLK"
                               >
                                 Falkland Islands (Malvinas)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FJI"
                               >
                                 Fiji
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FIN"
                               >
                                 Finland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FRA"
                               >
                                 France
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GUF"
                               >
                                 French Guiana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PYF"
                               >
                                 French Polynesia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GAB"
                               >
                                 Gabon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GMB"
                               >
                                 Gambia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GEO"
                               >
                                 Georgia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DEU"
                               >
                                 Germany
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GHA"
                               >
                                 Ghana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GIB"
                               >
                                 Gibraltar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GRC"
                               >
                                 Greece
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GRL"
                               >
                                 Greenland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GRD"
                               >
                                 Grenada
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GLP"
                               >
                                 Guadeloupe
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GUM"
                               >
                                 Guam
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GTM"
                               >
                                 Guatemala
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GGY"
                               >
                                 Guernsey
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GIN"
                               >
                                 Guinea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GNB"
                               >
                                 Guinea-Bissau
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GUY"
                               >
                                 Guyana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HTI"
                               >
                                 Haiti
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VAT"
                               >
                                 Holy See
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HND"
                               >
                                 Honduras
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HUN"
                               >
                                 Hungary
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ISL"
                               >
                                 Iceland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IND"
                               >
                                 India
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IDN"
                               >
                                 Indonesia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IRN"
                               >
                                 Iran (Islamic Republic of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IRQ"
                               >
                                 Iraq
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IRL"
                               >
                                 Ireland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IMN"
                               >
                                 Isle of Man
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ISR"
                               >
                                 Israel
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ITA"
                               >
                                 Italy
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JAM"
                               >
                                 Jamaica
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JPN"
                               >
                                 Japan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JEY"
                               >
                                 Jersey
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JOR"
                               >
                                 Jordan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KAZ"
                               >
                                 Kazakhstan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KEN"
                               >
                                 Kenya
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KIR"
                               >
                                 Kiribati
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KWT"
                               >
                                 Kuwait
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KGZ"
                               >
                                 Kyrgyzstan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LAO"
                               >
                                 Lao People's Democratic Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LVA"
                               >
                                 Latvia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LBN"
                               >
                                 Lebanon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LSO"
                               >
                                 Lesotho
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LBR"
                               >
                                 Liberia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LBY"
                               >
                                 Libya
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LIE"
                               >
                                 Liechtenstein
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LTU"
                               >
                                 Lithuania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LUX"
                               >
                                 Luxembourg
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MDG"
                               >
                                 Madagascar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MWI"
                               >
                                 Malawi
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MYS"
                               >
                                 Malaysia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MDV"
                               >
                                 Maldives
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MLI"
                               >
                                 Mali
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MLT"
                               >
                                 Malta
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MHL"
                               >
                                 Marshall Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MTQ"
                               >
                                 Martinique
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MRT"
                               >
                                 Mauritania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MUS"
                               >
                                 Mauritius
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MYT"
                               >
                                 Mayotte
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MEX"
                               >
                                 Mexico
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FSM"
                               >
                                 Micronesia (Federated States of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MCO"
                               >
                                 Monaco
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MNG"
                               >
                                 Mongolia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MNE"
                               >
                                 Montenegro
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MSR"
                               >
                                 Montserrat
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MAR"
                               >
                                 Morocco
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MOZ"
                               >
                                 Mozambique
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MMR"
                               >
                                 Myanmar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NAM"
                               >
                                 Namibia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NRU"
                               >
                                 Nauru
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NPL"
                               >
                                 Nepal
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NLD"
                               >
                                 Netherlands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NCL"
                               >
                                 New Caledonia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NZL"
                               >
                                 New Zealand
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NIC"
                               >
                                 Nicaragua
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NER"
                               >
                                 Niger
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NGA"
                               >
                                 Nigeria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NIU"
                               >
                                 Niue
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NFK"
                               >
                                 Norfolk Island
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MNP"
                               >
                                 Northern Mariana Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NOR"
                               >
                                 Norway
                               </option>
                               <option
+                                className="emotion-11"
                                 value="OMN"
                               >
                                 Oman
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PAK"
                               >
                                 Pakistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PLW"
                               >
                                 Palau
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PAN"
                               >
                                 Panama
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PNG"
                               >
                                 Papua New Guinea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRY"
                               >
                                 Paraguay
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PER"
                               >
                                 Peru
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PHL"
                               >
                                 Philippines
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PCN"
                               >
                                 Pitcairn
                               </option>
                               <option
+                                className="emotion-11"
                                 value="POL"
                               >
                                 Poland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRT"
                               >
                                 Portugal
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRI"
                               >
                                 Puerto Rico
                               </option>
                               <option
+                                className="emotion-11"
                                 value="QAT"
                               >
                                 Qatar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KOR"
                               >
                                 Republic of Korea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MDA"
                               >
                                 Republic of Moldova
                               </option>
                               <option
+                                className="emotion-11"
                                 value="REU"
                               >
                                 Réunion
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ROU"
                               >
                                 Romania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="RUS"
                               >
                                 Russian Federation
                               </option>
                               <option
+                                className="emotion-11"
                                 value="RWA"
                               >
                                 Rwanda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BLM"
                               >
                                 Saint-Barthélemy
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SHN"
                               >
                                 Saint Helena
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KNA"
                               >
                                 Saint Kitts and Nevis
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LCA"
                               >
                                 Saint Lucia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MAF"
                               >
                                 Saint-Martin (French part)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SPM"
                               >
                                 Saint Pierre and Miquelon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VCT"
                               >
                                 Saint Vincent and the Grenadines
                               </option>
                               <option
+                                className="emotion-11"
                                 value="WSM"
                               >
                                 Samoa
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SMR"
                               >
                                 San Marino
                               </option>
                               <option
+                                className="emotion-11"
                                 value="STP"
                               >
                                 Sao Tome and Principe
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SAU"
                               >
                                 Saudi Arabia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SEN"
                               >
                                 Senegal
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SRB"
                               >
                                 Serbia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SYC"
                               >
                                 Seychelles
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SLE"
                               >
                                 Sierra Leone
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SGP"
                               >
                                 Singapore
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SXM"
                               >
                                 Sint Maarten (Dutch part)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SVK"
                               >
                                 Slovakia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SVN"
                               >
                                 Slovenia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SLB"
                               >
                                 Solomon Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SOM"
                               >
                                 Somalia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ZAF"
                               >
                                 South Africa
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SSD"
                               >
                                 South Sudan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ESP"
                               >
                                 Spain
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LKA"
                               >
                                 Sri Lanka
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PSE"
                               >
                                 State of Palestine
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SDN"
                               >
                                 Sudan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SUR"
                               >
                                 Suriname
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SJM"
                               >
                                 Svalbard and Jan Mayen Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SWZ"
                               >
                                 Swaziland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SWE"
                               >
                                 Sweden
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CHE"
                               >
                                 Switzerland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SYR"
                               >
                                 Syrian Arab Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TWAN"
                               >
                                 Taiwan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TJK"
                               >
                                 Tajikistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="THA"
                               >
                                 Thailand
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MKD"
                               >
                                 The former Yugoslav Republic of Macedonia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TLS"
                               >
                                 Timor-Leste
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TGO"
                               >
                                 Togo
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TKL"
                               >
                                 Tokelau
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TON"
                               >
                                 Tonga
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TTO"
                               >
                                 Trinidad and Tobago
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TUN"
                               >
                                 Tunisia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TUR"
                               >
                                 Turkey
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TKM"
                               >
                                 Turkmenistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TCA"
                               >
                                 Turks and Caicos Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TUV"
                               >
                                 Tuvalu
                               </option>
                               <option
+                                className="emotion-11"
                                 value="UGA"
                               >
                                 Uganda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="UKR"
                               >
                                 Ukraine
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ARE"
                               >
                                 United Arab Emirates
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GBR"
                               >
                                 United Kingdom of Great Britain and Northern Ireland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TZA"
                               >
                                 United Republic of Tanzania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="URY"
                               >
                                 Uruguay
                               </option>
                               <option
+                                className="emotion-11"
                                 value="UZB"
                               >
                                 Uzbekistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VUT"
                               >
                                 Vanuatu
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VEN"
                               >
                                 Venezuela (Bolivarian Republic of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VNM"
                               >
                                 Vietnam
                               </option>
                               <option
+                                className="emotion-11"
                                 value="WLF"
                               >
                                 Wallis and Futuna Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ESH"
                               >
                                 Western Sahara
                               </option>
                               <option
+                                className="emotion-11"
                                 value="YEM"
                               >
                                 Yemen
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ZMB"
                               >
                                 Zambia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ZWE"
                               >
                                 Zimbabwe
@@ -79211,7 +80807,7 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-19"
+                    className="emotion-267"
                   >
                     <h1
                       className="emotion-5"
@@ -79372,10 +80968,10 @@ Array [
                     </div>
                     
                     <div
-                      className="emotion-24"
+                      className="emotion-512"
                     >
                       <div
-                        className="emotion-33"
+                        className="emotion-521"
                       >
                         <div
                           className="emotion-9"
@@ -79474,7 +81070,7 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-24"
+                    className="emotion-512"
                   >
                     <h1
                       className="emotion-5"
@@ -79485,7 +81081,7 @@ Array [
                       >
                         Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
                         <span
-                          className="tool-tip__wrapper emotion-36"
+                          className="tool-tip__wrapper emotion-524"
                         >
                           <div
                             className="icon"
@@ -79500,7 +81096,7 @@ Array [
                     </h1>
                     <span />
                     <div
-                      className="emotion-45"
+                      className="emotion-533"
                     >
                       <div>
                         <label
@@ -79670,10 +81266,10 @@ Array [
                         </div>
                       </div>
                       <div
-                        className="emotion-24"
+                        className="emotion-512"
                       >
                         <div
-                          className="emotion-43"
+                          className="emotion-531"
                         >
                           <div
                             className="emotion-9"
@@ -79762,13 +81358,13 @@ Array [
                 </fieldset>
               </div>
               <div
-                className="g g--mr emotion-50"
+                className="g g--mr emotion-538"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-49"
+                    className="lnk emotion-537"
                     onClick={[Function]}
                     type="button"
                   >
@@ -79953,40 +81549,40 @@ Array [
   color: #d22d23;
 }
 
-.emotion-48 fieldset + fieldset {
+.emotion-536 fieldset + fieldset {
   margin-top: 2rem;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-48 fieldset + fieldset {
+  .emotion-536 fieldset + fieldset {
     margin-top: 4rem;
   }
 
-  .emotion-48 fieldset + fieldset .lnk {
+  .emotion-536 fieldset + fieldset .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-47 {
+.emotion-535 {
   margin: 0;
   padding: 0;
   border: none;
 }
 
-.emotion-47 legend {
+.emotion-535 legend {
   padding-left: 0;
   padding-right: 0;
   width: 100%;
 }
 
-.emotion-47 h2 {
+.emotion-535 h2 {
   margin-bottom: 0;
   font-family: Montserrat,Arial,sans-serif;
   font-weight: 700;
   color: #091f2f;
 }
 
-.emotion-47 .desc {
+.emotion-535 .desc {
   margin: 0.5rem 0 0.75rem;
   font-family: Lora,Georgia,serif;
   font-size: 0.9375em;
@@ -79995,49 +81591,49 @@ Array [
   line-height: 1.2em;
 }
 
-.emotion-50 {
+.emotion-538 {
   text-align: center;
 }
 
 @media screen and (min-width:480px) {
-  .emotion-50 {
+  .emotion-538 {
     margin-top: 2.5rem;
     text-align: left;
   }
 
-  .emotion-50 > div {
+  .emotion-538 > div {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 
-  .emotion-50 > div.ta-r > button {
+  .emotion-538 > div.ta-r > button {
     margin-left: auto;
   }
 
-  .emotion-50 .lnk {
+  .emotion-538 .lnk {
     padding-left: 0;
   }
 }
 
-.emotion-49 {
+.emotion-537 {
   padding: 1.25rem !important;
   padding-left: 0 !important;
 }
 
-.emotion-17 {
+.emotion-25 {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-.emotion-17 legend {
+.emotion-25 legend {
   padding-left: 0;
   font-size: 120%;
 }
 
-.emotion-15 {
+.emotion-23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80051,45 +81647,45 @@ Array [
 }
 
 @media screen and (min-width:480px) {
-  .emotion-15 > div {
+  .emotion-23 > div {
     -webkit-flex: 0 0 24%;
     -ms-flex: 0 0 24%;
     flex: 0 0 24%;
   }
 
-  .emotion-15 > div:last-of-type {
+  .emotion-23 > div:last-of-type {
     -webkit-flex: 0 0 50%;
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
   }
 }
 
-.emotion-15 input {
+.emotion-23 input {
   -moz-appearance: textfield;
 }
 
-.emotion-15 input::-webkit-inner-spin-button {
+.emotion-23 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.emotion-15 input::-ms-clear {
+.emotion-23 input::-ms-clear {
   display: none;
 }
 
-.emotion-15 label {
+.emotion-23 label {
   margin-top: 0.5rem;
 }
 
-.emotion-15.disabled {
+.emotion-23.disabled {
   opacity: 0.4;
 }
 
-.emotion-15.disabled * {
+.emotion-23.disabled * {
   cursor: not-allowed;
 }
 
 @media screen and (max-width:480px) {
-  .emotion-15 {
+  .emotion-23 {
     display: block;
   }
 }
@@ -80237,7 +81833,7 @@ Array [
   }
 }
 
-.emotion-51 {
+.emotion-539 {
   padding: 0px;
 }
 
@@ -80254,50 +81850,50 @@ Array [
   margin-bottom: 3.9375rem;
 }
 
-.emotion-13 {
+.emotion-21 {
   margin-bottom: 3em;
   background: none;
   margin-bottom: 1.5em;
 }
 
-.emotion-13 label {
+.emotion-21 label {
   margin-top: 0em;
 }
 
-.emotion-13 .spacingTop {
+.emotion-21 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-13 label.inputHeading {
+.emotion-21 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-13 label.inputHeading .t--req {
+.emotion-21 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-13 .t--opt {
+.emotion-21 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-13 {
+  .emotion-21 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-13 .ra-l {
+.emotion-21 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-13 > div {
+.emotion-21 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-13 > div {
+  .emotion-21 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80305,17 +81901,17 @@ Array [
   }
 }
 
-.emotion-13 > .RADIOGROUP label {
+.emotion-21 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-13 h3 {
+.emotion-21 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-13 .notice {
+.emotion-21 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80325,7 +81921,7 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-13 .emotion-6:after {
+.emotion-21 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -80465,27 +82061,27 @@ Array [
   visibility: visible;
 }
 
-.emotion-11 {
+.emotion-19 {
   margin-bottom: 2em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 {
+  .emotion-19 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-11 .ra-l {
+.emotion-19 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-11 > div {
+.emotion-19 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-11 > div {
+  .emotion-19 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80493,17 +82089,17 @@ Array [
   }
 }
 
-.emotion-11 > .RADIOGROUP label {
+.emotion-19 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-11 h3 {
+.emotion-19 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-11 .notice {
+.emotion-19 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80513,58 +82109,62 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-11 .emotion-6:after {
+.emotion-19 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-11 .sel-c {
+.emotion-19 .sel-c {
   display: block;
 }
 
-.emotion-19 {
+.emotion-11 {
+  color: #091f2f;
+}
+
+.emotion-267 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-19 label {
+.emotion-267 label {
   margin-top: 0em;
 }
 
-.emotion-19 .spacingTop {
+.emotion-267 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-19 label.inputHeading {
+.emotion-267 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-19 label.inputHeading .t--req {
+.emotion-267 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-19 .t--opt {
+.emotion-267 .t--opt {
   color: #58585b !important;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-19 {
+  .emotion-267 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-19 .ra-l {
+.emotion-267 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-19 > div {
+.emotion-267 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-19 > div {
+  .emotion-267 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80572,17 +82172,17 @@ Array [
   }
 }
 
-.emotion-19 > .RADIOGROUP label {
+.emotion-267 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-19 h3 {
+.emotion-267 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-19 .notice {
+.emotion-267 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80592,12 +82192,12 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-19 .emotion-6:after {
+.emotion-267 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-14 {
+.emotion-22 {
   color: #091f2f;
   font-weight: 700;
   font-size: 1.125rem;
@@ -80609,11 +82209,11 @@ Array [
   margin-bottom: 1em;
 }
 
-.emotion-14 h1 {
+.emotion-22 h1 {
   border-bottom: 4px solid #091f2f;
 }
 
-.emotion-14 .notice {
+.emotion-22 .notice {
   color: #58585b;
   font-family: Lora,Georgia,serif;
   font-size: 0.9375rem;
@@ -80626,61 +82226,61 @@ Array [
   border-top: 4px solid #091f2f;
 }
 
-.emotion-14 .notice .tool-tip__wrapper {
+.emotion-22 .notice .tool-tip__wrapper {
   display: inline-block;
 }
 
-.emotion-16 {
+.emotion-24 {
   margin-bottom: 2.25em;
 }
 
-.emotion-24 {
+.emotion-512 {
   margin-bottom: 3em;
   background: none;
 }
 
-.emotion-24 label {
+.emotion-512 label {
   margin-top: 0em;
 }
 
-.emotion-24 .spacingTop {
+.emotion-512 .spacingTop {
   margin-top: 1.5em;
 }
 
-.emotion-24 label.inputHeading {
+.emotion-512 label.inputHeading {
   font-size: 0.875em;
   text-transform: uppercase;
 }
 
-.emotion-24 label.inputHeading .t--req {
+.emotion-512 label.inputHeading .t--req {
   margin-left: 0.5rem;
 }
 
-.emotion-24 .t--opt {
+.emotion-512 .t--opt {
   color: #58585b !important;
 }
 
-.emotion-23 {
+.emotion-511 {
   margin-bottom: 2.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-23 {
+  .emotion-511 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-23 .ra-l {
+.emotion-511 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-23 > div {
+.emotion-511 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-23 > div {
+  .emotion-511 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80688,17 +82288,17 @@ Array [
   }
 }
 
-.emotion-23 > .RADIOGROUP label {
+.emotion-511 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-23 h3 {
+.emotion-511 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-23 .notice {
+.emotion-511 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80708,33 +82308,33 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-23 .emotion-6:after {
+.emotion-511 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-33 {
+.emotion-521 {
   margin-top: 1em;
   margin-bottom: 0.5em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-33 {
+  .emotion-521 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-33 .ra-l {
+.emotion-521 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-33 > div {
+.emotion-521 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-33 > div {
+  .emotion-521 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80742,17 +82342,17 @@ Array [
   }
 }
 
-.emotion-33 > .RADIOGROUP label {
+.emotion-521 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-33 h3 {
+.emotion-521 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-33 .notice {
+.emotion-521 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80762,12 +82362,12 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-33 .emotion-6:after {
+.emotion-521 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-36 {
+.emotion-524 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -80779,7 +82379,7 @@ Array [
   position: relative;
 }
 
-.emotion-36 .icon {
+.emotion-524 .icon {
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -80792,20 +82392,20 @@ Array [
   color: white;
 }
 
-.emotion-36 .icon::before {
+.emotion-524 .icon::before {
   content: '?';
 }
 
-.emotion-36 .tt--info {
+.emotion-524 .tt--info {
   text-transform: lowercase;
   padding-left: 3.5px;
 }
 
-.emotion-36 .tt--info::before {
+.emotion-524 .tt--info::before {
   content: 'i';
 }
 
-.emotion-36 .msg {
+.emotion-524 .msg {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -80825,39 +82425,39 @@ Array [
   top: calc(-30% + 1px);
 }
 
-.emotion-36 .icon:hover + .msg {
+.emotion-524 .icon:hover + .msg {
   visibility: visible;
 }
 
-.emotion-45 {
+.emotion-533 {
   margin-bottom: 2.5em;
 }
 
-.emotion-45 h2 {
+.emotion-533 h2 {
   font-size: 1.5rem;
 }
 
-.emotion-45 h4 {
+.emotion-533 h4 {
   font-size: 1.25rem;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-45 {
+  .emotion-533 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-45 .ra-l {
+.emotion-533 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-45 > div {
+.emotion-533 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-45 > div {
+  .emotion-533 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80865,17 +82465,17 @@ Array [
   }
 }
 
-.emotion-45 > .RADIOGROUP label {
+.emotion-533 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-45 h3 {
+.emotion-533 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-45 .notice {
+.emotion-533 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80885,32 +82485,32 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-45 .emotion-6:after {
+.emotion-533 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
 
-.emotion-43 {
+.emotion-531 {
   margin-top: 1em;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-43 {
+  .emotion-531 {
     margin-left: auto;
     margin-right: auto;
   }
 }
 
-.emotion-43 .ra-l {
+.emotion-531 .ra-l {
   font-size: 0.9375em;
 }
 
-.emotion-43 > div {
+.emotion-531 > div {
   text-align: left;
 }
 
 @media screen and (min-width:768px) {
-  .emotion-43 > div {
+  .emotion-531 > div {
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     -ms-flex-positive: 1;
@@ -80918,17 +82518,17 @@ Array [
   }
 }
 
-.emotion-43 > .RADIOGROUP label {
+.emotion-531 > .RADIOGROUP label {
   display: block;
 }
 
-.emotion-43 h3 {
+.emotion-531 h3 {
   font-family: Montserrat,Arial,sans-serif !important;
   font-weight: 700;
   font-size: 1rem;
 }
 
-.emotion-43 .notice {
+.emotion-531 .notice {
   font-size: 0.8125em;
   clear: both;
   min-height: 1px;
@@ -80938,7 +82538,7 @@ Array [
   line-height: 1.5em;
 }
 
-.emotion-43 .emotion-6:after {
+.emotion-531 .emotion-6:after {
   content: '&nbsp;';
   opacity: 0;
 }
@@ -81221,13 +82821,13 @@ Array [
             className="m-t500"
           >
             <div
-              className="b-c b-c--nbp emotion-51"
+              className="b-c b-c--nbp emotion-539"
             >
               <div
-                className="emotion-48"
+                className="emotion-536"
               >
                 <fieldset
-                  className=" emotion-47"
+                  className=" emotion-535"
                 >
                   <legend>
                     <h2
@@ -81238,7 +82838,7 @@ Array [
                     </h2>
                   </legend>
                   <div
-                    className="emotion-13"
+                    className="emotion-21"
                   >
                     <h1
                       className="emotion-5"
@@ -81472,7 +83072,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      className="emotion-11"
+                      className="emotion-19"
                     >
                       <div>
                         <label
@@ -81524,41 +83124,49 @@ Array [
                           >
                             <option />
                             <option
+                              className="emotion-11"
                               value="I"
                             >
                               I
                             </option>
                             <option
+                              className="emotion-11"
                               value="II"
                             >
                               II
                             </option>
                             <option
+                              className="emotion-11"
                               value="III"
                             >
                               III
                             </option>
                             <option
+                              className="emotion-11"
                               value="IV"
                             >
                               IV
                             </option>
                             <option
+                              className="emotion-11"
                               value="V"
                             >
                               V
                             </option>
                             <option
+                              className="emotion-11"
                               value="VI"
                             >
                               VI
                             </option>
                             <option
+                              className="emotion-11"
                               value="Jr."
                             >
                               Jr.
                             </option>
                             <option
+                              className="emotion-11"
                               value="Sr."
                             >
                               Sr.
@@ -81630,19 +83238,19 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-19"
+                    className="emotion-267"
                   >
                     <h1
-                      className="emotion-14"
+                      className="emotion-22"
                     >
                       Date and Place of Birth
                     </h1>
                     <span />
                     <fieldset
-                      className="emotion-17"
+                      className="emotion-25"
                     >
                       <div
-                        className="emotion-16"
+                        className="emotion-24"
                       >
                         <legend
                           style={
@@ -81655,7 +83263,7 @@ Array [
                           Person B Date of Birth
                         </legend>
                         <div
-                          className=" emotion-15"
+                          className=" emotion-23"
                         >
                           <div>
                             <label
@@ -81760,7 +83368,7 @@ Array [
                       </div>
                     </fieldset>
                     <div
-                      className="emotion-11"
+                      className="emotion-19"
                     >
                       <div>
                         <label
@@ -81808,1201 +83416,1441 @@ Array [
                           >
                             <option />
                             <option
+                              className="emotion-11"
                               value="USA"
                             >
                               United States of America
                             </option>
                             <option
+                              className="emotion-11"
                               value="VIR"
                             >
                               United States Virgin Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="AFG"
                             >
                               Afghanistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="ALA"
                             >
                               Åland Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="ALB"
                             >
                               Albania
                             </option>
                             <option
+                              className="emotion-11"
                               value="DZA"
                             >
                               Algeria
                             </option>
                             <option
+                              className="emotion-11"
                               value="ASM"
                             >
                               American Samoa
                             </option>
                             <option
+                              className="emotion-11"
                               value="AND"
                             >
                               Andorra
                             </option>
                             <option
+                              className="emotion-11"
                               value="AGO"
                             >
                               Angola
                             </option>
                             <option
+                              className="emotion-11"
                               value="AIA"
                             >
                               Anguilla
                             </option>
                             <option
+                              className="emotion-11"
                               value="ATG"
                             >
                               Antigua and Barbuda
                             </option>
                             <option
+                              className="emotion-11"
                               value="ARG"
                             >
                               Argentina
                             </option>
                             <option
+                              className="emotion-11"
                               value="ARM"
                             >
                               Armenia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ABW"
                             >
                               Aruba
                             </option>
                             <option
+                              className="emotion-11"
                               value="AUS"
                             >
                               Australia
                             </option>
                             <option
+                              className="emotion-11"
                               value="AUT"
                             >
                               Austria
                             </option>
                             <option
+                              className="emotion-11"
                               value="AZE"
                             >
                               Azerbaijan
                             </option>
                             <option
+                              className="emotion-11"
                               value="BHS"
                             >
                               Bahamas
                             </option>
                             <option
+                              className="emotion-11"
                               value="BHR"
                             >
                               Bahrain
                             </option>
                             <option
+                              className="emotion-11"
                               value="BGD"
                             >
                               Bangladesh
                             </option>
                             <option
+                              className="emotion-11"
                               value="BRB"
                             >
                               Barbados
                             </option>
                             <option
+                              className="emotion-11"
                               value="BLR"
                             >
                               Belarus
                             </option>
                             <option
+                              className="emotion-11"
                               value="BEL"
                             >
                               Belgium
                             </option>
                             <option
+                              className="emotion-11"
                               value="BLZ"
                             >
                               Belize
                             </option>
                             <option
+                              className="emotion-11"
                               value="BEN"
                             >
                               Benin
                             </option>
                             <option
+                              className="emotion-11"
                               value="BMU"
                             >
                               Bermuda
                             </option>
                             <option
+                              className="emotion-11"
                               value="BTN"
                             >
                               Bhutan
                             </option>
                             <option
+                              className="emotion-11"
                               value="BOL"
                             >
                               Bolivia (Plurinational State of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="BES"
                             >
                               Bonaire, Saint Eustatius and Saba
                             </option>
                             <option
+                              className="emotion-11"
                               value="BIH"
                             >
                               Bosnia and Herzegovina
                             </option>
                             <option
+                              className="emotion-11"
                               value="BWA"
                             >
                               Botswana
                             </option>
                             <option
+                              className="emotion-11"
                               value="BRA"
                             >
                               Brazil
                             </option>
                             <option
+                              className="emotion-11"
                               value="VGB"
                             >
                               British Virgin Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="BRN"
                             >
                               Brunei Darussalam
                             </option>
                             <option
+                              className="emotion-11"
                               value="BGR"
                             >
                               Bulgaria
                             </option>
                             <option
+                              className="emotion-11"
                               value="BFA"
                             >
                               Burkina Faso
                             </option>
                             <option
+                              className="emotion-11"
                               value="BDI"
                             >
                               Burundi
                             </option>
                             <option
+                              className="emotion-11"
                               value="CPV"
                             >
                               Cabo Verde
                             </option>
                             <option
+                              className="emotion-11"
                               value="KHM"
                             >
                               Cambodia
                             </option>
                             <option
+                              className="emotion-11"
                               value="CMR"
                             >
                               Cameroon
                             </option>
                             <option
+                              className="emotion-11"
                               value="CAN"
                             >
                               Canada
                             </option>
                             <option
+                              className="emotion-11"
                               value="CYM"
                             >
                               Cayman Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="CAF"
                             >
                               Central African Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="TCD"
                             >
                               Chad
                             </option>
                             <option
+                              className="emotion-11"
                               value="CHL"
                             >
                               Chile
                             </option>
                             <option
+                              className="emotion-11"
                               value="CHN"
                             >
                               China
                             </option>
                             <option
+                              className="emotion-11"
                               value="HKG"
                             >
                               China, Hong Kong Special Administrative Region
                             </option>
                             <option
+                              className="emotion-11"
                               value="MAC"
                             >
                               China, Macao Special Administrative Region
                             </option>
                             <option
+                              className="emotion-11"
                               value="COL"
                             >
                               Colombia
                             </option>
                             <option
+                              className="emotion-11"
                               value="COM"
                             >
                               Comoros
                             </option>
                             <option
+                              className="emotion-11"
                               value="COG"
                             >
                               Congo
                             </option>
                             <option
+                              className="emotion-11"
                               value="COK"
                             >
                               Cook Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="CRI"
                             >
                               Costa Rica
                             </option>
                             <option
+                              className="emotion-11"
                               value="CIV"
                             >
                               Côte d'Ivoire
                             </option>
                             <option
+                              className="emotion-11"
                               value="HRV"
                             >
                               Croatia
                             </option>
                             <option
+                              className="emotion-11"
                               value="CUB"
                             >
                               Cuba
                             </option>
                             <option
+                              className="emotion-11"
                               value="CUW"
                             >
                               Curaçao
                             </option>
                             <option
+                              className="emotion-11"
                               value="CYP"
                             >
                               Cyprus
                             </option>
                             <option
+                              className="emotion-11"
                               value="CZE"
                             >
                               Czech Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRK"
                             >
                               Democratic People's Republic of Korea
                             </option>
                             <option
+                              className="emotion-11"
                               value="COD"
                             >
                               Democratic Republic of the Congo
                             </option>
                             <option
+                              className="emotion-11"
                               value="DNK"
                             >
                               Denmark
                             </option>
                             <option
+                              className="emotion-11"
                               value="DJI"
                             >
                               Djibouti
                             </option>
                             <option
+                              className="emotion-11"
                               value="DMA"
                             >
                               Dominica
                             </option>
                             <option
+                              className="emotion-11"
                               value="DOM"
                             >
                               Dominican Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="ECU"
                             >
                               Ecuador
                             </option>
                             <option
+                              className="emotion-11"
                               value="EGY"
                             >
                               Egypt
                             </option>
                             <option
+                              className="emotion-11"
                               value="SLV"
                             >
                               El Salvador
                             </option>
                             <option
+                              className="emotion-11"
                               value="GNQ"
                             >
                               Equatorial Guinea
                             </option>
                             <option
+                              className="emotion-11"
                               value="ERI"
                             >
                               Eritrea
                             </option>
                             <option
+                              className="emotion-11"
                               value="EST"
                             >
                               Estonia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ETH"
                             >
                               Ethiopia
                             </option>
                             <option
+                              className="emotion-11"
                               value="FRO"
                             >
                               Faeroe Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="FLK"
                             >
                               Falkland Islands (Malvinas)
                             </option>
                             <option
+                              className="emotion-11"
                               value="FJI"
                             >
                               Fiji
                             </option>
                             <option
+                              className="emotion-11"
                               value="FIN"
                             >
                               Finland
                             </option>
                             <option
+                              className="emotion-11"
                               value="FRA"
                             >
                               France
                             </option>
                             <option
+                              className="emotion-11"
                               value="GUF"
                             >
                               French Guiana
                             </option>
                             <option
+                              className="emotion-11"
                               value="PYF"
                             >
                               French Polynesia
                             </option>
                             <option
+                              className="emotion-11"
                               value="GAB"
                             >
                               Gabon
                             </option>
                             <option
+                              className="emotion-11"
                               value="GMB"
                             >
                               Gambia
                             </option>
                             <option
+                              className="emotion-11"
                               value="GEO"
                             >
                               Georgia
                             </option>
                             <option
+                              className="emotion-11"
                               value="DEU"
                             >
                               Germany
                             </option>
                             <option
+                              className="emotion-11"
                               value="GHA"
                             >
                               Ghana
                             </option>
                             <option
+                              className="emotion-11"
                               value="GIB"
                             >
                               Gibraltar
                             </option>
                             <option
+                              className="emotion-11"
                               value="GRC"
                             >
                               Greece
                             </option>
                             <option
+                              className="emotion-11"
                               value="GRL"
                             >
                               Greenland
                             </option>
                             <option
+                              className="emotion-11"
                               value="GRD"
                             >
                               Grenada
                             </option>
                             <option
+                              className="emotion-11"
                               value="GLP"
                             >
                               Guadeloupe
                             </option>
                             <option
+                              className="emotion-11"
                               value="GUM"
                             >
                               Guam
                             </option>
                             <option
+                              className="emotion-11"
                               value="GTM"
                             >
                               Guatemala
                             </option>
                             <option
+                              className="emotion-11"
                               value="GGY"
                             >
                               Guernsey
                             </option>
                             <option
+                              className="emotion-11"
                               value="GIN"
                             >
                               Guinea
                             </option>
                             <option
+                              className="emotion-11"
                               value="GNB"
                             >
                               Guinea-Bissau
                             </option>
                             <option
+                              className="emotion-11"
                               value="GUY"
                             >
                               Guyana
                             </option>
                             <option
+                              className="emotion-11"
                               value="HTI"
                             >
                               Haiti
                             </option>
                             <option
+                              className="emotion-11"
                               value="VAT"
                             >
                               Holy See
                             </option>
                             <option
+                              className="emotion-11"
                               value="HND"
                             >
                               Honduras
                             </option>
                             <option
+                              className="emotion-11"
                               value="HUN"
                             >
                               Hungary
                             </option>
                             <option
+                              className="emotion-11"
                               value="ISL"
                             >
                               Iceland
                             </option>
                             <option
+                              className="emotion-11"
                               value="IND"
                             >
                               India
                             </option>
                             <option
+                              className="emotion-11"
                               value="IDN"
                             >
                               Indonesia
                             </option>
                             <option
+                              className="emotion-11"
                               value="IRN"
                             >
                               Iran (Islamic Republic of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="IRQ"
                             >
                               Iraq
                             </option>
                             <option
+                              className="emotion-11"
                               value="IRL"
                             >
                               Ireland
                             </option>
                             <option
+                              className="emotion-11"
                               value="IMN"
                             >
                               Isle of Man
                             </option>
                             <option
+                              className="emotion-11"
                               value="ISR"
                             >
                               Israel
                             </option>
                             <option
+                              className="emotion-11"
                               value="ITA"
                             >
                               Italy
                             </option>
                             <option
+                              className="emotion-11"
                               value="JAM"
                             >
                               Jamaica
                             </option>
                             <option
+                              className="emotion-11"
                               value="JPN"
                             >
                               Japan
                             </option>
                             <option
+                              className="emotion-11"
                               value="JEY"
                             >
                               Jersey
                             </option>
                             <option
+                              className="emotion-11"
                               value="JOR"
                             >
                               Jordan
                             </option>
                             <option
+                              className="emotion-11"
                               value="KAZ"
                             >
                               Kazakhstan
                             </option>
                             <option
+                              className="emotion-11"
                               value="KEN"
                             >
                               Kenya
                             </option>
                             <option
+                              className="emotion-11"
                               value="KIR"
                             >
                               Kiribati
                             </option>
                             <option
+                              className="emotion-11"
                               value="KWT"
                             >
                               Kuwait
                             </option>
                             <option
+                              className="emotion-11"
                               value="KGZ"
                             >
                               Kyrgyzstan
                             </option>
                             <option
+                              className="emotion-11"
                               value="LAO"
                             >
                               Lao People's Democratic Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="LVA"
                             >
                               Latvia
                             </option>
                             <option
+                              className="emotion-11"
                               value="LBN"
                             >
                               Lebanon
                             </option>
                             <option
+                              className="emotion-11"
                               value="LSO"
                             >
                               Lesotho
                             </option>
                             <option
+                              className="emotion-11"
                               value="LBR"
                             >
                               Liberia
                             </option>
                             <option
+                              className="emotion-11"
                               value="LBY"
                             >
                               Libya
                             </option>
                             <option
+                              className="emotion-11"
                               value="LIE"
                             >
                               Liechtenstein
                             </option>
                             <option
+                              className="emotion-11"
                               value="LTU"
                             >
                               Lithuania
                             </option>
                             <option
+                              className="emotion-11"
                               value="LUX"
                             >
                               Luxembourg
                             </option>
                             <option
+                              className="emotion-11"
                               value="MDG"
                             >
                               Madagascar
                             </option>
                             <option
+                              className="emotion-11"
                               value="MWI"
                             >
                               Malawi
                             </option>
                             <option
+                              className="emotion-11"
                               value="MYS"
                             >
                               Malaysia
                             </option>
                             <option
+                              className="emotion-11"
                               value="MDV"
                             >
                               Maldives
                             </option>
                             <option
+                              className="emotion-11"
                               value="MLI"
                             >
                               Mali
                             </option>
                             <option
+                              className="emotion-11"
                               value="MLT"
                             >
                               Malta
                             </option>
                             <option
+                              className="emotion-11"
                               value="MHL"
                             >
                               Marshall Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="MTQ"
                             >
                               Martinique
                             </option>
                             <option
+                              className="emotion-11"
                               value="MRT"
                             >
                               Mauritania
                             </option>
                             <option
+                              className="emotion-11"
                               value="MUS"
                             >
                               Mauritius
                             </option>
                             <option
+                              className="emotion-11"
                               value="MYT"
                             >
                               Mayotte
                             </option>
                             <option
+                              className="emotion-11"
                               value="MEX"
                             >
                               Mexico
                             </option>
                             <option
+                              className="emotion-11"
                               value="FSM"
                             >
                               Micronesia (Federated States of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="MCO"
                             >
                               Monaco
                             </option>
                             <option
+                              className="emotion-11"
                               value="MNG"
                             >
                               Mongolia
                             </option>
                             <option
+                              className="emotion-11"
                               value="MNE"
                             >
                               Montenegro
                             </option>
                             <option
+                              className="emotion-11"
                               value="MSR"
                             >
                               Montserrat
                             </option>
                             <option
+                              className="emotion-11"
                               value="MAR"
                             >
                               Morocco
                             </option>
                             <option
+                              className="emotion-11"
                               value="MOZ"
                             >
                               Mozambique
                             </option>
                             <option
+                              className="emotion-11"
                               value="MMR"
                             >
                               Myanmar
                             </option>
                             <option
+                              className="emotion-11"
                               value="NAM"
                             >
                               Namibia
                             </option>
                             <option
+                              className="emotion-11"
                               value="NRU"
                             >
                               Nauru
                             </option>
                             <option
+                              className="emotion-11"
                               value="NPL"
                             >
                               Nepal
                             </option>
                             <option
+                              className="emotion-11"
                               value="NLD"
                             >
                               Netherlands
                             </option>
                             <option
+                              className="emotion-11"
                               value="NCL"
                             >
                               New Caledonia
                             </option>
                             <option
+                              className="emotion-11"
                               value="NZL"
                             >
                               New Zealand
                             </option>
                             <option
+                              className="emotion-11"
                               value="NIC"
                             >
                               Nicaragua
                             </option>
                             <option
+                              className="emotion-11"
                               value="NER"
                             >
                               Niger
                             </option>
                             <option
+                              className="emotion-11"
                               value="NGA"
                             >
                               Nigeria
                             </option>
                             <option
+                              className="emotion-11"
                               value="NIU"
                             >
                               Niue
                             </option>
                             <option
+                              className="emotion-11"
                               value="NFK"
                             >
                               Norfolk Island
                             </option>
                             <option
+                              className="emotion-11"
                               value="MNP"
                             >
                               Northern Mariana Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="NOR"
                             >
                               Norway
                             </option>
                             <option
+                              className="emotion-11"
                               value="OMN"
                             >
                               Oman
                             </option>
                             <option
+                              className="emotion-11"
                               value="PAK"
                             >
                               Pakistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="PLW"
                             >
                               Palau
                             </option>
                             <option
+                              className="emotion-11"
                               value="PAN"
                             >
                               Panama
                             </option>
                             <option
+                              className="emotion-11"
                               value="PNG"
                             >
                               Papua New Guinea
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRY"
                             >
                               Paraguay
                             </option>
                             <option
+                              className="emotion-11"
                               value="PER"
                             >
                               Peru
                             </option>
                             <option
+                              className="emotion-11"
                               value="PHL"
                             >
                               Philippines
                             </option>
                             <option
+                              className="emotion-11"
                               value="PCN"
                             >
                               Pitcairn
                             </option>
                             <option
+                              className="emotion-11"
                               value="POL"
                             >
                               Poland
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRT"
                             >
                               Portugal
                             </option>
                             <option
+                              className="emotion-11"
                               value="PRI"
                             >
                               Puerto Rico
                             </option>
                             <option
+                              className="emotion-11"
                               value="QAT"
                             >
                               Qatar
                             </option>
                             <option
+                              className="emotion-11"
                               value="KOR"
                             >
                               Republic of Korea
                             </option>
                             <option
+                              className="emotion-11"
                               value="MDA"
                             >
                               Republic of Moldova
                             </option>
                             <option
+                              className="emotion-11"
                               value="REU"
                             >
                               Réunion
                             </option>
                             <option
+                              className="emotion-11"
                               value="ROU"
                             >
                               Romania
                             </option>
                             <option
+                              className="emotion-11"
                               value="RUS"
                             >
                               Russian Federation
                             </option>
                             <option
+                              className="emotion-11"
                               value="RWA"
                             >
                               Rwanda
                             </option>
                             <option
+                              className="emotion-11"
                               value="BLM"
                             >
                               Saint-Barthélemy
                             </option>
                             <option
+                              className="emotion-11"
                               value="SHN"
                             >
                               Saint Helena
                             </option>
                             <option
+                              className="emotion-11"
                               value="KNA"
                             >
                               Saint Kitts and Nevis
                             </option>
                             <option
+                              className="emotion-11"
                               value="LCA"
                             >
                               Saint Lucia
                             </option>
                             <option
+                              className="emotion-11"
                               value="MAF"
                             >
                               Saint-Martin (French part)
                             </option>
                             <option
+                              className="emotion-11"
                               value="SPM"
                             >
                               Saint Pierre and Miquelon
                             </option>
                             <option
+                              className="emotion-11"
                               value="VCT"
                             >
                               Saint Vincent and the Grenadines
                             </option>
                             <option
+                              className="emotion-11"
                               value="WSM"
                             >
                               Samoa
                             </option>
                             <option
+                              className="emotion-11"
                               value="SMR"
                             >
                               San Marino
                             </option>
                             <option
+                              className="emotion-11"
                               value="STP"
                             >
                               Sao Tome and Principe
                             </option>
                             <option
+                              className="emotion-11"
                               value="SAU"
                             >
                               Saudi Arabia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SEN"
                             >
                               Senegal
                             </option>
                             <option
+                              className="emotion-11"
                               value="SRB"
                             >
                               Serbia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SYC"
                             >
                               Seychelles
                             </option>
                             <option
+                              className="emotion-11"
                               value="SLE"
                             >
                               Sierra Leone
                             </option>
                             <option
+                              className="emotion-11"
                               value="SGP"
                             >
                               Singapore
                             </option>
                             <option
+                              className="emotion-11"
                               value="SXM"
                             >
                               Sint Maarten (Dutch part)
                             </option>
                             <option
+                              className="emotion-11"
                               value="SVK"
                             >
                               Slovakia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SVN"
                             >
                               Slovenia
                             </option>
                             <option
+                              className="emotion-11"
                               value="SLB"
                             >
                               Solomon Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="SOM"
                             >
                               Somalia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ZAF"
                             >
                               South Africa
                             </option>
                             <option
+                              className="emotion-11"
                               value="SSD"
                             >
                               South Sudan
                             </option>
                             <option
+                              className="emotion-11"
                               value="ESP"
                             >
                               Spain
                             </option>
                             <option
+                              className="emotion-11"
                               value="LKA"
                             >
                               Sri Lanka
                             </option>
                             <option
+                              className="emotion-11"
                               value="PSE"
                             >
                               State of Palestine
                             </option>
                             <option
+                              className="emotion-11"
                               value="SDN"
                             >
                               Sudan
                             </option>
                             <option
+                              className="emotion-11"
                               value="SUR"
                             >
                               Suriname
                             </option>
                             <option
+                              className="emotion-11"
                               value="SJM"
                             >
                               Svalbard and Jan Mayen Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="SWZ"
                             >
                               Swaziland
                             </option>
                             <option
+                              className="emotion-11"
                               value="SWE"
                             >
                               Sweden
                             </option>
                             <option
+                              className="emotion-11"
                               value="CHE"
                             >
                               Switzerland
                             </option>
                             <option
+                              className="emotion-11"
                               value="SYR"
                             >
                               Syrian Arab Republic
                             </option>
                             <option
+                              className="emotion-11"
                               value="TWAN"
                             >
                               Taiwan
                             </option>
                             <option
+                              className="emotion-11"
                               value="TJK"
                             >
                               Tajikistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="THA"
                             >
                               Thailand
                             </option>
                             <option
+                              className="emotion-11"
                               value="MKD"
                             >
                               The former Yugoslav Republic of Macedonia
                             </option>
                             <option
+                              className="emotion-11"
                               value="TLS"
                             >
                               Timor-Leste
                             </option>
                             <option
+                              className="emotion-11"
                               value="TGO"
                             >
                               Togo
                             </option>
                             <option
+                              className="emotion-11"
                               value="TKL"
                             >
                               Tokelau
                             </option>
                             <option
+                              className="emotion-11"
                               value="TON"
                             >
                               Tonga
                             </option>
                             <option
+                              className="emotion-11"
                               value="TTO"
                             >
                               Trinidad and Tobago
                             </option>
                             <option
+                              className="emotion-11"
                               value="TUN"
                             >
                               Tunisia
                             </option>
                             <option
+                              className="emotion-11"
                               value="TUR"
                             >
                               Turkey
                             </option>
                             <option
+                              className="emotion-11"
                               value="TKM"
                             >
                               Turkmenistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="TCA"
                             >
                               Turks and Caicos Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="TUV"
                             >
                               Tuvalu
                             </option>
                             <option
+                              className="emotion-11"
                               value="UGA"
                             >
                               Uganda
                             </option>
                             <option
+                              className="emotion-11"
                               value="UKR"
                             >
                               Ukraine
                             </option>
                             <option
+                              className="emotion-11"
                               value="ARE"
                             >
                               United Arab Emirates
                             </option>
                             <option
+                              className="emotion-11"
                               value="GBR"
                             >
                               United Kingdom of Great Britain and Northern Ireland
                             </option>
                             <option
+                              className="emotion-11"
                               value="TZA"
                             >
                               United Republic of Tanzania
                             </option>
                             <option
+                              className="emotion-11"
                               value="URY"
                             >
                               Uruguay
                             </option>
                             <option
+                              className="emotion-11"
                               value="UZB"
                             >
                               Uzbekistan
                             </option>
                             <option
+                              className="emotion-11"
                               value="VUT"
                             >
                               Vanuatu
                             </option>
                             <option
+                              className="emotion-11"
                               value="VEN"
                             >
                               Venezuela (Bolivarian Republic of)
                             </option>
                             <option
+                              className="emotion-11"
                               value="VNM"
                             >
                               Vietnam
                             </option>
                             <option
+                              className="emotion-11"
                               value="WLF"
                             >
                               Wallis and Futuna Islands
                             </option>
                             <option
+                              className="emotion-11"
                               value="ESH"
                             >
                               Western Sahara
                             </option>
                             <option
+                              className="emotion-11"
                               value="YEM"
                             >
                               Yemen
                             </option>
                             <option
+                              className="emotion-11"
                               value="ZMB"
                             >
                               Zambia
                             </option>
                             <option
+                              className="emotion-11"
                               value="ZWE"
                             >
                               Zimbabwe
@@ -83014,7 +84862,7 @@ Array [
                     
                   </div>
                   <div
-                    className="emotion-24"
+                    className="emotion-512"
                   >
                     <h1
                       className="emotion-5"
@@ -83027,10 +84875,10 @@ Array [
                       </div>
                     </h1>
                     <div
-                      className="emotion-23"
+                      className="emotion-511"
                     >
                       <div
-                        className="emotion-11"
+                        className="emotion-19"
                       >
                         <span />
                         <div>
@@ -83089,1201 +84937,1441 @@ Array [
                             >
                               <option />
                               <option
+                                className="emotion-11"
                                 value="USA"
                               >
                                 United States of America
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VIR"
                               >
                                 United States Virgin Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AFG"
                               >
                                 Afghanistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ALA"
                               >
                                 Åland Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ALB"
                               >
                                 Albania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DZA"
                               >
                                 Algeria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ASM"
                               >
                                 American Samoa
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AND"
                               >
                                 Andorra
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AGO"
                               >
                                 Angola
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AIA"
                               >
                                 Anguilla
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ATG"
                               >
                                 Antigua and Barbuda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ARG"
                               >
                                 Argentina
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ARM"
                               >
                                 Armenia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ABW"
                               >
                                 Aruba
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AUS"
                               >
                                 Australia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AUT"
                               >
                                 Austria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="AZE"
                               >
                                 Azerbaijan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BHS"
                               >
                                 Bahamas
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BHR"
                               >
                                 Bahrain
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BGD"
                               >
                                 Bangladesh
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BRB"
                               >
                                 Barbados
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BLR"
                               >
                                 Belarus
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BEL"
                               >
                                 Belgium
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BLZ"
                               >
                                 Belize
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BEN"
                               >
                                 Benin
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BMU"
                               >
                                 Bermuda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BTN"
                               >
                                 Bhutan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BOL"
                               >
                                 Bolivia (Plurinational State of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BES"
                               >
                                 Bonaire, Saint Eustatius and Saba
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BIH"
                               >
                                 Bosnia and Herzegovina
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BWA"
                               >
                                 Botswana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BRA"
                               >
                                 Brazil
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VGB"
                               >
                                 British Virgin Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BRN"
                               >
                                 Brunei Darussalam
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BGR"
                               >
                                 Bulgaria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BFA"
                               >
                                 Burkina Faso
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BDI"
                               >
                                 Burundi
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CPV"
                               >
                                 Cabo Verde
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KHM"
                               >
                                 Cambodia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CMR"
                               >
                                 Cameroon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CAN"
                               >
                                 Canada
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CYM"
                               >
                                 Cayman Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CAF"
                               >
                                 Central African Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TCD"
                               >
                                 Chad
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CHL"
                               >
                                 Chile
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CHN"
                               >
                                 China
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HKG"
                               >
                                 China, Hong Kong Special Administrative Region
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MAC"
                               >
                                 China, Macao Special Administrative Region
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COL"
                               >
                                 Colombia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COM"
                               >
                                 Comoros
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COG"
                               >
                                 Congo
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COK"
                               >
                                 Cook Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CRI"
                               >
                                 Costa Rica
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CIV"
                               >
                                 Côte d'Ivoire
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HRV"
                               >
                                 Croatia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CUB"
                               >
                                 Cuba
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CUW"
                               >
                                 Curaçao
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CYP"
                               >
                                 Cyprus
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CZE"
                               >
                                 Czech Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRK"
                               >
                                 Democratic People's Republic of Korea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="COD"
                               >
                                 Democratic Republic of the Congo
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DNK"
                               >
                                 Denmark
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DJI"
                               >
                                 Djibouti
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DMA"
                               >
                                 Dominica
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DOM"
                               >
                                 Dominican Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ECU"
                               >
                                 Ecuador
                               </option>
                               <option
+                                className="emotion-11"
                                 value="EGY"
                               >
                                 Egypt
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SLV"
                               >
                                 El Salvador
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GNQ"
                               >
                                 Equatorial Guinea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ERI"
                               >
                                 Eritrea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="EST"
                               >
                                 Estonia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ETH"
                               >
                                 Ethiopia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FRO"
                               >
                                 Faeroe Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FLK"
                               >
                                 Falkland Islands (Malvinas)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FJI"
                               >
                                 Fiji
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FIN"
                               >
                                 Finland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FRA"
                               >
                                 France
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GUF"
                               >
                                 French Guiana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PYF"
                               >
                                 French Polynesia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GAB"
                               >
                                 Gabon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GMB"
                               >
                                 Gambia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GEO"
                               >
                                 Georgia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="DEU"
                               >
                                 Germany
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GHA"
                               >
                                 Ghana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GIB"
                               >
                                 Gibraltar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GRC"
                               >
                                 Greece
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GRL"
                               >
                                 Greenland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GRD"
                               >
                                 Grenada
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GLP"
                               >
                                 Guadeloupe
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GUM"
                               >
                                 Guam
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GTM"
                               >
                                 Guatemala
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GGY"
                               >
                                 Guernsey
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GIN"
                               >
                                 Guinea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GNB"
                               >
                                 Guinea-Bissau
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GUY"
                               >
                                 Guyana
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HTI"
                               >
                                 Haiti
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VAT"
                               >
                                 Holy See
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HND"
                               >
                                 Honduras
                               </option>
                               <option
+                                className="emotion-11"
                                 value="HUN"
                               >
                                 Hungary
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ISL"
                               >
                                 Iceland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IND"
                               >
                                 India
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IDN"
                               >
                                 Indonesia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IRN"
                               >
                                 Iran (Islamic Republic of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IRQ"
                               >
                                 Iraq
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IRL"
                               >
                                 Ireland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="IMN"
                               >
                                 Isle of Man
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ISR"
                               >
                                 Israel
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ITA"
                               >
                                 Italy
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JAM"
                               >
                                 Jamaica
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JPN"
                               >
                                 Japan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JEY"
                               >
                                 Jersey
                               </option>
                               <option
+                                className="emotion-11"
                                 value="JOR"
                               >
                                 Jordan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KAZ"
                               >
                                 Kazakhstan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KEN"
                               >
                                 Kenya
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KIR"
                               >
                                 Kiribati
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KWT"
                               >
                                 Kuwait
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KGZ"
                               >
                                 Kyrgyzstan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LAO"
                               >
                                 Lao People's Democratic Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LVA"
                               >
                                 Latvia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LBN"
                               >
                                 Lebanon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LSO"
                               >
                                 Lesotho
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LBR"
                               >
                                 Liberia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LBY"
                               >
                                 Libya
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LIE"
                               >
                                 Liechtenstein
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LTU"
                               >
                                 Lithuania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LUX"
                               >
                                 Luxembourg
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MDG"
                               >
                                 Madagascar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MWI"
                               >
                                 Malawi
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MYS"
                               >
                                 Malaysia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MDV"
                               >
                                 Maldives
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MLI"
                               >
                                 Mali
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MLT"
                               >
                                 Malta
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MHL"
                               >
                                 Marshall Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MTQ"
                               >
                                 Martinique
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MRT"
                               >
                                 Mauritania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MUS"
                               >
                                 Mauritius
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MYT"
                               >
                                 Mayotte
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MEX"
                               >
                                 Mexico
                               </option>
                               <option
+                                className="emotion-11"
                                 value="FSM"
                               >
                                 Micronesia (Federated States of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MCO"
                               >
                                 Monaco
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MNG"
                               >
                                 Mongolia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MNE"
                               >
                                 Montenegro
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MSR"
                               >
                                 Montserrat
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MAR"
                               >
                                 Morocco
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MOZ"
                               >
                                 Mozambique
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MMR"
                               >
                                 Myanmar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NAM"
                               >
                                 Namibia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NRU"
                               >
                                 Nauru
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NPL"
                               >
                                 Nepal
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NLD"
                               >
                                 Netherlands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NCL"
                               >
                                 New Caledonia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NZL"
                               >
                                 New Zealand
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NIC"
                               >
                                 Nicaragua
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NER"
                               >
                                 Niger
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NGA"
                               >
                                 Nigeria
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NIU"
                               >
                                 Niue
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NFK"
                               >
                                 Norfolk Island
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MNP"
                               >
                                 Northern Mariana Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="NOR"
                               >
                                 Norway
                               </option>
                               <option
+                                className="emotion-11"
                                 value="OMN"
                               >
                                 Oman
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PAK"
                               >
                                 Pakistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PLW"
                               >
                                 Palau
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PAN"
                               >
                                 Panama
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PNG"
                               >
                                 Papua New Guinea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRY"
                               >
                                 Paraguay
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PER"
                               >
                                 Peru
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PHL"
                               >
                                 Philippines
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PCN"
                               >
                                 Pitcairn
                               </option>
                               <option
+                                className="emotion-11"
                                 value="POL"
                               >
                                 Poland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRT"
                               >
                                 Portugal
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PRI"
                               >
                                 Puerto Rico
                               </option>
                               <option
+                                className="emotion-11"
                                 value="QAT"
                               >
                                 Qatar
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KOR"
                               >
                                 Republic of Korea
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MDA"
                               >
                                 Republic of Moldova
                               </option>
                               <option
+                                className="emotion-11"
                                 value="REU"
                               >
                                 Réunion
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ROU"
                               >
                                 Romania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="RUS"
                               >
                                 Russian Federation
                               </option>
                               <option
+                                className="emotion-11"
                                 value="RWA"
                               >
                                 Rwanda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="BLM"
                               >
                                 Saint-Barthélemy
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SHN"
                               >
                                 Saint Helena
                               </option>
                               <option
+                                className="emotion-11"
                                 value="KNA"
                               >
                                 Saint Kitts and Nevis
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LCA"
                               >
                                 Saint Lucia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MAF"
                               >
                                 Saint-Martin (French part)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SPM"
                               >
                                 Saint Pierre and Miquelon
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VCT"
                               >
                                 Saint Vincent and the Grenadines
                               </option>
                               <option
+                                className="emotion-11"
                                 value="WSM"
                               >
                                 Samoa
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SMR"
                               >
                                 San Marino
                               </option>
                               <option
+                                className="emotion-11"
                                 value="STP"
                               >
                                 Sao Tome and Principe
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SAU"
                               >
                                 Saudi Arabia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SEN"
                               >
                                 Senegal
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SRB"
                               >
                                 Serbia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SYC"
                               >
                                 Seychelles
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SLE"
                               >
                                 Sierra Leone
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SGP"
                               >
                                 Singapore
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SXM"
                               >
                                 Sint Maarten (Dutch part)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SVK"
                               >
                                 Slovakia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SVN"
                               >
                                 Slovenia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SLB"
                               >
                                 Solomon Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SOM"
                               >
                                 Somalia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ZAF"
                               >
                                 South Africa
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SSD"
                               >
                                 South Sudan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ESP"
                               >
                                 Spain
                               </option>
                               <option
+                                className="emotion-11"
                                 value="LKA"
                               >
                                 Sri Lanka
                               </option>
                               <option
+                                className="emotion-11"
                                 value="PSE"
                               >
                                 State of Palestine
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SDN"
                               >
                                 Sudan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SUR"
                               >
                                 Suriname
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SJM"
                               >
                                 Svalbard and Jan Mayen Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SWZ"
                               >
                                 Swaziland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SWE"
                               >
                                 Sweden
                               </option>
                               <option
+                                className="emotion-11"
                                 value="CHE"
                               >
                                 Switzerland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="SYR"
                               >
                                 Syrian Arab Republic
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TWAN"
                               >
                                 Taiwan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TJK"
                               >
                                 Tajikistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="THA"
                               >
                                 Thailand
                               </option>
                               <option
+                                className="emotion-11"
                                 value="MKD"
                               >
                                 The former Yugoslav Republic of Macedonia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TLS"
                               >
                                 Timor-Leste
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TGO"
                               >
                                 Togo
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TKL"
                               >
                                 Tokelau
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TON"
                               >
                                 Tonga
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TTO"
                               >
                                 Trinidad and Tobago
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TUN"
                               >
                                 Tunisia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TUR"
                               >
                                 Turkey
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TKM"
                               >
                                 Turkmenistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TCA"
                               >
                                 Turks and Caicos Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TUV"
                               >
                                 Tuvalu
                               </option>
                               <option
+                                className="emotion-11"
                                 value="UGA"
                               >
                                 Uganda
                               </option>
                               <option
+                                className="emotion-11"
                                 value="UKR"
                               >
                                 Ukraine
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ARE"
                               >
                                 United Arab Emirates
                               </option>
                               <option
+                                className="emotion-11"
                                 value="GBR"
                               >
                                 United Kingdom of Great Britain and Northern Ireland
                               </option>
                               <option
+                                className="emotion-11"
                                 value="TZA"
                               >
                                 United Republic of Tanzania
                               </option>
                               <option
+                                className="emotion-11"
                                 value="URY"
                               >
                                 Uruguay
                               </option>
                               <option
+                                className="emotion-11"
                                 value="UZB"
                               >
                                 Uzbekistan
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VUT"
                               >
                                 Vanuatu
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VEN"
                               >
                                 Venezuela (Bolivarian Republic of)
                               </option>
                               <option
+                                className="emotion-11"
                                 value="VNM"
                               >
                                 Vietnam
                               </option>
                               <option
+                                className="emotion-11"
                                 value="WLF"
                               >
                                 Wallis and Futuna Islands
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ESH"
                               >
                                 Western Sahara
                               </option>
                               <option
+                                className="emotion-11"
                                 value="YEM"
                               >
                                 Yemen
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ZMB"
                               >
                                 Zambia
                               </option>
                               <option
+                                className="emotion-11"
                                 value="ZWE"
                               >
                                 Zimbabwe
@@ -84296,7 +86384,7 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-19"
+                    className="emotion-267"
                   >
                     <h1
                       className="emotion-5"
@@ -84457,10 +86545,10 @@ Array [
                     </div>
                     
                     <div
-                      className="emotion-24"
+                      className="emotion-512"
                     >
                       <div
-                        className="emotion-33"
+                        className="emotion-521"
                       >
                         <div
                           className="emotion-9"
@@ -84559,7 +86647,7 @@ Array [
                     </div>
                   </div>
                   <div
-                    className="emotion-24"
+                    className="emotion-512"
                   >
                     <h1
                       className="emotion-5"
@@ -84570,7 +86658,7 @@ Array [
                       >
                         Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
                         <span
-                          className="tool-tip__wrapper emotion-36"
+                          className="tool-tip__wrapper emotion-524"
                         >
                           <div
                             className="icon"
@@ -84585,7 +86673,7 @@ Array [
                     </h1>
                     <span />
                     <div
-                      className="emotion-45"
+                      className="emotion-533"
                     >
                       <div>
                         <label
@@ -84755,10 +86843,10 @@ Array [
                         </div>
                       </div>
                       <div
-                        className="emotion-24"
+                        className="emotion-512"
                       >
                         <div
-                          className="emotion-43"
+                          className="emotion-531"
                         >
                           <div
                             className="emotion-9"
@@ -84847,13 +86935,13 @@ Array [
                 </fieldset>
               </div>
               <div
-                className="g g--mr emotion-50"
+                className="g g--mr emotion-538"
               >
                 <div
                   className="t--info g--6 m-b500"
                 >
                   <button
-                    className="lnk emotion-49"
+                    className="lnk emotion-537"
                     onClick={[Function]}
                     type="button"
                   >

From bf374c5c645a6d35cac0215e6598d4c18f65f1f0 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 28 May 2024 18:36:47 -0400
Subject: [PATCH 22/28] DIG-4409B: Point to 'Stg' CSS

---
 modules-js/react-fleet/.storybook/preview-head.html      | 4 ++--
 modules-js/react-fleet/src/utilities/constants.ts        | 4 ++--
 modules-js/react-fleet/templates/stylesheets.json        | 2 +-
 modules-js/storybook-common/.storybook/preview-head.html | 4 ++--
 services-js/registry-certs/.storybook/preview-head.html  | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/modules-js/react-fleet/.storybook/preview-head.html b/modules-js/react-fleet/.storybook/preview-head.html
index eb9fd5339..0874e3cba 100644
--- a/modules-js/react-fleet/.storybook/preview-head.html
+++ b/modules-js/react-fleet/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <!--[if !IE]><!-->
-<link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
-<!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
+<!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
+<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index 4dd118532..a8f6a43d3 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -1,5 +1,5 @@
-export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
-// export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
+// export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
+export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
 // export const PUBLIC_CSS_URL = 'http://localhost:3030/css/public.css';
 export const WHITE = '#fff';
 export const BLACK = '#000';
diff --git a/modules-js/react-fleet/templates/stylesheets.json b/modules-js/react-fleet/templates/stylesheets.json
index 4e5700798..302e7e0b7 100644
--- a/modules-js/react-fleet/templates/stylesheets.json
+++ b/modules-js/react-fleet/templates/stylesheets.json
@@ -1,3 +1,3 @@
 [
-  "https://patterns.boston.gov/css/public.css"
+  "https://patterns-stg.boston.gov/css/public.css"
 ]
\ No newline at end of file
diff --git a/modules-js/storybook-common/.storybook/preview-head.html b/modules-js/storybook-common/.storybook/preview-head.html
index a45e3e82c..42346eaaa 100644
--- a/modules-js/storybook-common/.storybook/preview-head.html
+++ b/modules-js/storybook-common/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <!--[if !IE]><!-->
-  <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
-  <!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
+  <!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
+  <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link rel="stylesheet" type="text/css" href="https://cob-patterns-staging.herokuapp.com/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
diff --git a/services-js/registry-certs/.storybook/preview-head.html b/services-js/registry-certs/.storybook/preview-head.html
index b66c8b037..2f5207070 100644
--- a/services-js/registry-certs/.storybook/preview-head.html
+++ b/services-js/registry-certs/.storybook/preview-head.html
@@ -3,8 +3,8 @@
   That way Emotion can override the default styles. This matches the behavior in
   prod, where this tag is written by _document.tsx.
 -->
-<link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" />
-<!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
+<!-- <link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" /> -->
+<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
 <!-- <link href="http://localhost:3030/css/public.css" type="text/css" rel="stylesheet" /> -->
 
 <script src="https://js.stripe.com/v3/"></script>

From 809965a5c8029254e2504c5a957ae2bab3808a73 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Fri, 7 Jun 2024 16:16:58 -0400
Subject: [PATCH 23/28] DIG-4409B: Point to 'Stg' CSS wip#2

---
 modules-js/react-fleet/templates/stylesheets.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules-js/react-fleet/templates/stylesheets.json b/modules-js/react-fleet/templates/stylesheets.json
index 302e7e0b7..67ffdc394 100644
--- a/modules-js/react-fleet/templates/stylesheets.json
+++ b/modules-js/react-fleet/templates/stylesheets.json
@@ -1,3 +1,3 @@
 [
   "https://patterns-stg.boston.gov/css/public.css"
-]
\ No newline at end of file
+]

From a216f4e49fdbbc76b2511c0ef327716e4b942fc8 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 11 Jun 2024 20:13:13 -0400
Subject: [PATCH 24/28] DIG-4557: Test solution to not print surname of Parent
 1/2(?) if it is same as current last name

---
 .../marriageintention/forms/eventHandlers.ts  | 305 +++++++++++--
 .../marriageintention/forms/partnerFormA.tsx  | 397 ++++++-----------
 .../marriageintention/forms/partnerFormB.tsx  | 408 ++++++------------
 .../marriageintention/helpers/formUtils.ts    |  13 +-
 4 files changed, 546 insertions(+), 577 deletions(-)

diff --git a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
index 82dce9cda..89c05930c 100644
--- a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
+++ b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
@@ -1,6 +1,8 @@
 import { ChangeEvent } from 'react';
 import MarriageIntentionCertificateRequest from '../../store/MarriageIntentionCertificateRequest';
 
+import { BOSTON_NEIGHBORHOODS } from './inputData';
+
 export const handleFormPageComplete$ = (data: {
   partnerFlag: string;
   val: string;
@@ -29,23 +31,22 @@ export const handleChange$ = (data: {
 };
 
 export const handleUseSurnameChange$ = (data: {
-  e: ChangeEvent<HTMLInputElement>;
-  inputName: string;
-  textInput: string;
+  val: string;
+  partnerFlag: string;
   certObj: MarriageIntentionCertificateRequest;
 }) => {
-  const { e, inputName, textInput, certObj } = data;
+  const { val, partnerFlag, certObj } = data;
   certObj.answerQuestion(
     {
-      [inputName]: e.target.value,
+      [`partner${partnerFlag}_useSurname`]: val,
     },
     ''
   );
 
-  if (e.target.value === '0') {
+  if (val === '0') {
     certObj.answerQuestion(
       {
-        [textInput]: '',
+        [`partner${partnerFlag}_surName`]: '',
       },
       ''
     );
@@ -53,25 +54,23 @@ export const handleUseSurnameChange$ = (data: {
 };
 
 export const handleAdditionalParentChange$ = (data: {
-  e: ChangeEvent<HTMLInputElement>;
-  additionalParent: string;
-  parentB_Name: string;
-  parentB_Surname: string;
+  val: string;
+  partnerFlag: string;
   certObj: MarriageIntentionCertificateRequest;
 }) => {
-  const { e, additionalParent, parentB_Name, parentB_Surname, certObj } = data;
+  const { val, partnerFlag, certObj } = data;
   certObj.answerQuestion(
     {
-      [additionalParent]: e.target.value,
+      [`partner${partnerFlag}_additionalParent`]: val,
     },
     ''
   );
 
-  if (e.target.value === '0') {
+  if (val === '0') {
     certObj.answerQuestion(
       {
-        [parentB_Surname]: '',
-        [parentB_Name]: '',
+        [`partner${partnerFlag}_parentB_Name`]: '',
+        [`partner${partnerFlag}_parentB_Surname`]: '',
       },
       ''
     );
@@ -80,16 +79,14 @@ export const handleAdditionalParentChange$ = (data: {
 
 export const handleBloodRelDescChange$ = (data: {
   e: ChangeEvent<HTMLInputElement>;
-  partnerA: string;
-  partnerB: string;
   certObj: MarriageIntentionCertificateRequest;
 }) => {
-  const { e, partnerA, partnerB, certObj } = data;
+  const { e, certObj } = data;
 
   certObj.answerQuestion(
     {
-      [partnerA]: e.target.value,
-      [partnerB]: e.target.value,
+      [`partnerA_bloodRelationDesc`]: e.target.value,
+      [`partnerB_bloodRelationDesc`]: e.target.value,
     },
     ''
   );
@@ -97,18 +94,14 @@ export const handleBloodRelDescChange$ = (data: {
 
 export const handleBloodRelChange$ = (data: {
   e: ChangeEvent<HTMLInputElement>;
-  partnerA: string;
-  partnerB: string;
-  partnerADesc: string;
-  partnerBDesc: string;
   certObj: MarriageIntentionCertificateRequest;
 }) => {
-  const { e, partnerA, partnerB, partnerADesc, partnerBDesc, certObj } = data;
+  const { e, certObj } = data;
 
   certObj.answerQuestion(
     {
-      [partnerA]: e.target.value,
-      [partnerB]: e.target.value,
+      [`partnerA_bloodRelation`]: e.target.value,
+      [`partnerB_bloodRelation`]: e.target.value,
     },
     ''
   );
@@ -116,12 +109,264 @@ export const handleBloodRelChange$ = (data: {
   if (e.target.value === '0') {
     certObj.answerQuestion(
       {
-        [partnerADesc]: '',
-        [partnerBDesc]: '',
+        [`partnerA_bloodRelationDesc`]: '',
+        [`partnerB_bloodRelationDesc`]: '',
+      },
+      ''
+    );
+  }
+};
+
+export const handleMarriedBeforeChange$ = (data: {
+  val: string;
+  partnerFlag: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { val, partnerFlag, certObj } = data;
+  certObj.answerQuestion(
+    {
+      [`partner${partnerFlag}_marriedBefore`]: val,
+    },
+    ''
+  );
+
+  if (val === '0') {
+    certObj.answerQuestion(
+      {
+        [`partner${partnerFlag}_marriageNumb`]: '',
+      },
+      ''
+    );
+  }
+};
+
+export const handleBirthplaceCountryChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  partnerFlag: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, partnerFlag, certObj } = data;
+  certObj.answerQuestion(
+    {
+      [e.target.name]: e.target.value,
+    },
+    ''
+  );
+
+  if (e.target.value !== 'USA') {
+    certObj.answerQuestion(
+      {
+        [`partner${partnerFlag}_birthState`]: '',
       },
       ''
     );
   }
 };
 
+export const handleZipCodeChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, certObj } = data;
+
+  const val = e.target.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');
+
+  certObj.answerQuestion(
+    {
+      [e.target.name]: val,
+    },
+    ''
+  );
+};
+
+export const handleResidenceStateChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  partnerFlag: string;
+  requestInformation: any;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, partnerFlag, requestInformation, certObj } = data;
+  const {
+    [`partner${partnerFlag}_residenceCity`]: residenceCity,
+    [`partner${partnerFlag}_residenceCountry`]: residenceCountry,
+  } = requestInformation;
+
+  const inlowerCase = residenceCity.toLowerCase();
+  const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+
+  certObj.answerQuestion(
+    {
+      [e.target.name]: e.target.value,
+    },
+    ''
+  );
+
+  if (
+    residenceCountry === 'USA' &&
+    e.target.value === 'MA' &&
+    isBosNeighborhood > -1
+  ) {
+    replaceBosNeighborhoods$({
+      e: {
+        target: {
+          name: `partner${partnerFlag}_residenceCity`,
+          value: residenceCity,
+        },
+      },
+      partnerFlag: '',
+      requestInformation,
+      certObj,
+    });
+  }
+};
+
+export const replaceBosNeighborhoods$ = (data: {
+  e:
+    | ChangeEvent<HTMLInputElement>
+    | {
+        target: { name: string; value: string };
+      };
+  partnerFlag: string;
+  requestInformation: any;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, partnerFlag, requestInformation, certObj } = data;
+  const {
+    [`partner${partnerFlag}_residenceCity`]: residenceCity,
+    [`partner${partnerFlag}_residenceState`]: residenceState,
+  } = requestInformation;
+
+  const inlowerCase = e.target.value.toLowerCase();
+  const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+
+  if (
+    residenceCity === 'USA' &&
+    residenceState === 'MA' &&
+    isBosNeighborhood > -1
+  ) {
+    certObj.answerQuestion(
+      {
+        [e.target.name]: 'Boston',
+      },
+      ''
+    );
+  }
+};
+
+export const checkBirthCityForNeighborhood$ = (data: {
+  partnerFlag: string;
+  requestInformation: any;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { partnerFlag, requestInformation, certObj } = data;
+  const {
+    [`partner${partnerFlag}_birthCountry`]: birthCountry,
+    [`partner${partnerFlag}_birthCity`]: birthCity,
+    [`partner${partnerFlag}_birthState`]: birthState,
+  } = requestInformation;
+
+  const inlowerCase = birthCity.toLowerCase();
+  const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
+
+  if (
+    birthCountry === 'USA' &&
+    (birthState === 'MA' || birthState === 'Massachusetts') &&
+    isBosNeighborhood > -1
+  ) {
+    certObj.answerQuestion(
+      {
+        [`partner${partnerFlag}_birthCity`]: 'Boston',
+      },
+      ''
+    );
+  }
+};
+
+export const handleResidenceCountryChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
+  partnerFlag: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { e, partnerFlag, certObj } = data;
+
+  certObj.answerQuestion(
+    {
+      [e.target.name]: e.target.value,
+    },
+    ''
+  );
+
+  if (e.target.value !== 'USA') {
+    certObj.answerQuestion(
+      {
+        [`partner${partnerFlag}_residenceState`]: '',
+      },
+      ''
+    );
+
+    certObj.answerQuestion(
+      {
+        [`partner${partnerFlag}_residenceZip`]: '',
+      },
+      ''
+    );
+  }
+};
+
+export const handleBirthDateChange$ = (data: {
+  val: Date;
+  partnerFlag: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { val, partnerFlag, certObj } = data;
+  const isDate = isDateObj$(val);
+  let age: string = '';
+
+  if (isDate) {
+    age = `${calcAge$(val)}`;
+    updateAge$({ val: age, partnerFlag, certObj });
+  }
+
+  certObj.answerQuestion(
+    {
+      [`partner${partnerFlag}_dob`]: val,
+    },
+    ''
+  );
+};
+
+export const updateAge$ = (data: {
+  val: string;
+  partnerFlag: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { val, partnerFlag, certObj } = data;
+
+  certObj.answerQuestion(
+    {
+      [`partner${partnerFlag}_age`]: val,
+    },
+    ''
+  );
+};
+
+export const calcAge$ = (dateObj: Date) => {
+  const today = new Date();
+  let age = today.getFullYear() - dateObj.getFullYear();
+  const m = today.getMonth() - dateObj.getMonth();
+
+  if (m < 0 || (m === 0 && today.getDate() < dateObj.getDate())) {
+    age = age - 1;
+  }
+
+  return age;
+};
+
+export const isDateObj$ = (dateObj: Date | null) => {
+  if (Object.prototype.toString.call(dateObj) === '[object Date]') {
+    return true;
+  }
+  return false;
+};
+
 export default handleChange$;
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index bdd52b65d..34626edfe 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -2,7 +2,7 @@
 
 import { jsx } from '@emotion/core';
 
-import { ChangeEvent, Component, MouseEvent } from 'react';
+import { Component, MouseEvent } from 'react';
 
 import { observer } from 'mobx-react';
 
@@ -12,7 +12,7 @@ import QuestionComponent from '../../common/question-components/QuestionComponen
 
 import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import { BOSTON_NEIGHBORHOODS } from './inputData';
+// import { BOSTON_NEIGHBORHOODS } from './inputData';
 
 import {
   nameFields,
@@ -30,6 +30,16 @@ import {
   handleBloodRelDescChange$,
   handleBloodRelChange$,
   handleFormPageComplete$,
+  handleMarriedBeforeChange$,
+  handleBirthplaceCountryChange$,
+  handleResidenceCountryChange$,
+  handleZipCodeChange$,
+  handleResidenceStateChange$,
+  replaceBosNeighborhoods$,
+  checkBirthCityForNeighborhood$,
+  isDateObj$,
+  updateAge$,
+  calcAge$,
 } from './eventHandlers';
 
 import { isPartnerFormPageComplete } from '../../marriageintention/helpers/formUtils';
@@ -66,271 +76,34 @@ export default class PartnerForm extends Component<Props> {
   public static isComplete({
     requestInformation,
   }: MarriageIntentionCertificateRequest): boolean {
-    return isPartnerFormPageComplete('A', requestInformation);
-  }
-
-  private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    handleChange$({
-      e: event,
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  public handleUseSurnameChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleUseSurnameChange$({
-      e: event,
-      inputName: 'partnerA_useSurname',
-      textInput: 'partnerA_surName',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  public handleAdditionalParentChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleAdditionalParentChange$({
-      e: event,
-      additionalParent: 'partnerA_additionalParent',
-      parentB_Name: 'partnerA_parentB_Name',
-      parentB_Surname: 'partnerA_parentB_Surname',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  public handleBloodRelDescChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleBloodRelDescChange$({
-      e: event,
-      partnerA: 'partnerA_bloodRelationDesc',
-      partnerB: 'partnerB_bloodRelationDesc',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
+    const isComplete = isPartnerFormPageComplete('A', requestInformation);
 
-  public handleBloodRelChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleBloodRelChange$({
-      e: event,
-      partnerA: 'partnerA_bloodRelation',
-      partnerB: 'partnerB_bloodRelation',
-      partnerADesc: 'partnerA_bloodRelationDesc',
-      partnerBDesc: 'partnerB_bloodRelationDesc',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  public handleMarriedBeforeChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerA_marriedBefore']: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value === '0') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_marriageNumb']: '',
-        },
-        ''
-      );
-    }
-  };
+    return isComplete;
+  }
 
+  // ------------------------------------------------------ //
   public handleBirthDateChange = (newDate): void => {
-    const isDate = this.isDateObj(newDate);
+    const isDate = isDateObj$(newDate);
+    const partnerFlag: string = 'A';
     let age = '';
-    if (isDate) {
-      age = `${this.calcAge(newDate)}`;
-      this.updateAge(age);
-    }
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        partnerA_dob: newDate,
-      },
-      ''
-    );
-  };
 
-  public handleBirthplaceCountryChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value !== 'USA') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_birthState']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  public handleResidenceCountryChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value !== 'USA') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_residenceState']: '',
-        },
-        ''
-      );
-
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_residenceZip']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  public handleZipCodeChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const val = event.target.value
-      .replace(/[^0-9]/g, '')
-      .replace(/(\..*)\./g, '$1');
-
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: val,
-      },
-      ''
-    );
-  };
-
-  public handleResidenceStateChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceCity,
-      partnerA_residenceCountry,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    const inlowerCase = partnerA_residenceCity.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (
-      partnerA_residenceCountry === 'USA' &&
-      event.target.value === 'MA' &&
-      isBosNeighborhood > -1
-    ) {
-      this.replaceBosNeighborhoods({
-        target: {
-          name: 'partnerA_residenceCity',
-          value: partnerA_residenceCity,
-        },
+    if (isDate) {
+      age = `${calcAge$(newDate)}`;
+      updateAge$({
+        val: age,
+        partnerFlag,
+        certObj: this.props.marriageIntentionCertificateRequest,
       });
     }
-  };
 
-  private replaceBosNeighborhoods = (
-    event:
-      | ChangeEvent<HTMLInputElement>
-      | {
-          target: { name: string; value: string };
-        }
-  ): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_residenceCountry,
-      partnerA_residenceState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const inlowerCase = event.target.value.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-
-    if (
-      partnerA_residenceCountry === 'USA' &&
-      partnerA_residenceState === 'MA' &&
-      isBosNeighborhood > -1
-    ) {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          [event.target.name]: 'Boston',
-        },
-        ''
-      );
-    }
-  };
-
-  public checkBirthCityForNeighborhood = (): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerA_birthCountry,
-      partnerA_birthCity,
-      partnerA_birthState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const inlowerCase = partnerA_birthCity.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-
-    if (
-      partnerA_birthCountry === 'USA' &&
-      (partnerA_birthState === 'MA' ||
-        partnerA_birthState === 'Massachusetts') &&
-      isBosNeighborhood > -1
-    ) {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerA_birthCity']: 'Boston',
-        },
-        ''
-      );
-    }
-  };
-
-  private updateAge = (age: string) => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
       {
-        partnerA_age: age,
+        [`partner${partnerFlag}_dob`]: newDate,
       },
       ''
     );
   };
-
-  private calcAge = (dateObj: Date) => {
-    const today = new Date();
-    let age = today.getFullYear() - dateObj.getFullYear();
-    const m = today.getMonth() - dateObj.getMonth();
-
-    if (m < 0 || (m === 0 && today.getDate() < dateObj.getDate())) {
-      age = age - 1;
-    }
-
-    return age;
-  };
-
-  private isDateObj = (dateObj: Date | null) => {
-    if (Object.prototype.toString.call(dateObj) === '[object Date]') {
-      return true;
-    }
-    return false;
-  };
+  // ------------------------------------------------------ //
 
   private advanceForm = (certObj: any) => {
     handleFormPageComplete$({
@@ -419,9 +192,25 @@ export default class PartnerForm extends Component<Props> {
           {nameFields({
             formPageComplete: partnerA_formPageComplete,
             partnerFlag: partnerLabel,
-            handleChange: this.handleChange,
-            handleResidenceStateChange: this.handleResidenceStateChange,
-            handleUseSurnameChange: this.handleUseSurnameChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleResidenceStateChange: e =>
+              handleResidenceStateChange$({
+                e,
+                partnerFlag: 'A',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleUseSurnameChange: e =>
+              handleUseSurnameChange$({
+                val: e.target.value,
+                partnerFlag: 'A',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.nameFieldsRef,
@@ -442,9 +231,24 @@ export default class PartnerForm extends Component<Props> {
             birthCountryStr: partnerA_birthCountry,
             birthStateStr: partnerA_birthState,
             birthCityStr: partnerA_birthCity,
-            handleChange: this.handleChange,
-            handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
-            checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleBirthplaceCountryChange: e =>
+              handleBirthplaceCountryChange$({
+                e,
+                partnerFlag: 'A',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            checkBirthCityForNeighborhood: () =>
+              checkBirthCityForNeighborhood$({
+                partnerFlag: 'A',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             handleBirthDateChange: this.handleBirthDateChange,
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
@@ -459,11 +263,38 @@ export default class PartnerForm extends Component<Props> {
             residenceStateStr: partnerA_residenceState,
             residenceAddressStr: partnerA_residenceAddress,
             residenceCountryStr: partnerA_residenceCountry,
-            handleChange: this.handleChange,
-            handleZipCodeChange: this.handleZipCodeChange,
-            replaceBosNeighborhoods: this.replaceBosNeighborhoods,
-            handleResidenceStateChange: this.handleResidenceStateChange,
-            handleResidenceCountryChange: this.handleResidenceCountryChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleZipCodeChange: e =>
+              handleZipCodeChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            replaceBosNeighborhoods: e =>
+              replaceBosNeighborhoods$({
+                e,
+                partnerFlag: 'A',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleResidenceStateChange: e =>
+              handleResidenceStateChange$({
+                e,
+                partnerFlag: 'A',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleResidenceCountryChange: e =>
+              handleResidenceCountryChange$({
+                e,
+                partnerFlag: 'A',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.residenceRef,
@@ -482,10 +313,27 @@ export default class PartnerForm extends Component<Props> {
             partnershipState: partnerA_partnershipState,
             partnershipTypeDissolved: partnerA_partnershipTypeDissolved,
 
-            handleChange: this.handleChange,
-            handleBloodRelChange: this.handleBloodRelChange,
-            handleBloodRelDescChange: this.handleBloodRelDescChange,
-            handleMarriedBeforeChange: this.handleMarriedBeforeChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleBloodRelChange: e =>
+              handleBloodRelChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleBloodRelDescChange: e =>
+              handleBloodRelDescChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleMarriedBeforeChange: e =>
+              handleMarriedBeforeChange$({
+                val: e.target.value,
+                partnerFlag: 'A',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.marriageRef,
@@ -500,8 +348,17 @@ export default class PartnerForm extends Component<Props> {
             parentB_Surname: partnerA_parentB_Surname,
             additionalParent: partnerA_additionalParent,
             parentsMarriedAtBirth: partnerA_parentsMarriedAtBirth,
-            handleChange: this.handleChange,
-            handleAdditionalParentChange: this.handleAdditionalParentChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleAdditionalParentChange: e =>
+              handleAdditionalParentChange$({
+                val: e.target.value,
+                partnerFlag: 'A',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.parentsRef,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 793e4d4d6..97e8171b9 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -2,7 +2,7 @@
 
 import { jsx } from '@emotion/core';
 
-import { ChangeEvent, Component, MouseEvent } from 'react';
+import { Component, MouseEvent } from 'react';
 
 import { observer } from 'mobx-react';
 
@@ -12,8 +12,6 @@ import QuestionComponent from '../../common/question-components/QuestionComponen
 
 import FieldsetComponent from '../../common/question-components/FieldsetComponent';
 
-import { BOSTON_NEIGHBORHOODS } from './inputData';
-
 import {
   nameFields,
   marriageBlock,
@@ -24,12 +22,29 @@ import {
 } from './partnerFormUI';
 
 import {
+  // handleChange$,
+  // handleUseSurnameChange$,
+  // handleAdditionalParentChange$,
+  // handleBloodRelDescChange$,
+  // handleBloodRelChange$,
+  // handleFormPageComplete$,
+
   handleChange$,
   handleUseSurnameChange$,
   handleAdditionalParentChange$,
   handleBloodRelDescChange$,
   handleBloodRelChange$,
   handleFormPageComplete$,
+  handleMarriedBeforeChange$,
+  handleBirthplaceCountryChange$,
+  handleResidenceCountryChange$,
+  handleZipCodeChange$,
+  handleResidenceStateChange$,
+  replaceBosNeighborhoods$,
+  checkBirthCityForNeighborhood$,
+  isDateObj$,
+  updateAge$,
+  calcAge$,
 } from './eventHandlers';
 
 import { isPartnerFormPageComplete } from '../../marriageintention/helpers/formUtils';
@@ -66,273 +81,34 @@ export default class PartnerForm extends Component<Props> {
   public static isComplete({
     requestInformation,
   }: MarriageIntentionCertificateRequest): boolean {
-    return isPartnerFormPageComplete('B', requestInformation);
-  }
-
-  private handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    handleChange$({
-      e: event,
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  private handleUseSurnameChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleUseSurnameChange$({
-      e: event,
-      inputName: 'partnerB_useSurname',
-      textInput: 'partnerB_surName',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  private handleAdditionalParentChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleAdditionalParentChange$({
-      e: event,
-      additionalParent: 'partnerB_additionalParent',
-      parentB_Name: 'partnerB_parentB_Name',
-      parentB_Surname: 'partnerB_parentB_Surname',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  private handleBloodRelDescChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleBloodRelDescChange$({
-      e: event,
-      partnerA: 'partnerB_bloodRelationDesc',
-      partnerB: 'partnerA_bloodRelationDesc',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
+    const isComplete = isPartnerFormPageComplete('B', requestInformation);
 
-  private handleBloodRelChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    handleBloodRelChange$({
-      e: event,
-      partnerA: 'partnerB_bloodRelation',
-      partnerB: 'partnerA_bloodRelation',
-      partnerADesc: 'partnerB_bloodRelationDesc',
-      partnerBDesc: 'partnerA_bloodRelationDesc',
-      certObj: this.props.marriageIntentionCertificateRequest,
-    });
-  };
-
-  private handleMarriedBeforeChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        ['partnerB_marriedBefore']: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value === '0') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_marriageNumb']: '',
-        },
-        ''
-      );
-    }
-  };
+    return isComplete;
+  }
 
-  private handleBirthDateChange = (newDate: Date | null): void => {
-    const isDate = this.isDateObj(newDate);
+  // ------------------------------------------------------ //
+  public handleBirthDateChange = (newDate): void => {
+    const isDate = isDateObj$(newDate);
+    const partnerFlag: string = 'B';
     let age = '';
-    if (isDate) {
-      age = `${this.calcAge(newDate)}`;
-      this.updateAge(age);
-    }
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        partnerB_dob: newDate,
-      },
-      ''
-    );
-  };
-
-  private handleBirthplaceCountryChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value !== 'USA') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_birthState']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  private handleResidenceCountryChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (event.target.value !== 'USA') {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_residenceState']: '',
-        },
-        ''
-      );
 
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_residenceZip']: '',
-        },
-        ''
-      );
-    }
-  };
-
-  private handleZipCodeChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    const val = event.target.value
-      .replace(/[^0-9]/g, '')
-      .replace(/(\..*)\./g, '$1');
-
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: val,
-      },
-      ''
-    );
-  };
-
-  private handleResidenceStateChange = (
-    event: ChangeEvent<HTMLInputElement>
-  ): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_residenceCity,
-      partnerB_residenceCountry,
-    } = marriageIntentionCertificateRequest.requestInformation;
-
-    const inlowerCase = partnerB_residenceCity.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-    this.props.marriageIntentionCertificateRequest.answerQuestion(
-      {
-        [event.target.name]: event.target.value,
-      },
-      ''
-    );
-
-    if (
-      partnerB_residenceCountry === 'USA' &&
-      event.target.value === 'MA' &&
-      isBosNeighborhood > -1
-    ) {
-      this.replaceBosNeighborhoods({
-        target: {
-          name: 'partnerB_residenceCity',
-          value: partnerB_residenceCity,
-        },
+    if (isDate) {
+      age = `${calcAge$(newDate)}`;
+      updateAge$({
+        val: age,
+        partnerFlag,
+        certObj: this.props.marriageIntentionCertificateRequest,
       });
     }
-  };
-
-  private replaceBosNeighborhoods = (
-    event:
-      | ChangeEvent<HTMLInputElement>
-      | {
-          target: { name: string; value: string };
-        }
-  ): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_residenceCountry,
-      partnerB_residenceState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const inlowerCase = event.target.value.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-
-    if (
-      partnerB_residenceCountry === 'USA' &&
-      partnerB_residenceState === 'MA' &&
-      isBosNeighborhood > -1
-    ) {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          [event.target.name]: 'Boston',
-        },
-        ''
-      );
-    }
-  };
 
-  private checkBirthCityForNeighborhood = (): void => {
-    const { marriageIntentionCertificateRequest } = this.props;
-    const {
-      partnerB_birthCountry,
-      partnerB_birthCity,
-      partnerB_birthState,
-    } = marriageIntentionCertificateRequest.requestInformation;
-    const inlowerCase = partnerB_birthCity.toLowerCase();
-    const isBosNeighborhood = BOSTON_NEIGHBORHOODS.indexOf(inlowerCase);
-
-    if (
-      partnerB_birthCountry === 'USA' &&
-      (partnerB_birthState === 'MA' ||
-        partnerB_birthState === 'Massachusetts') &&
-      isBosNeighborhood > -1
-    ) {
-      this.props.marriageIntentionCertificateRequest.answerQuestion(
-        {
-          ['partnerB_birthCity']: 'Boston',
-        },
-        ''
-      );
-    }
-  };
-
-  private updateAge = age => {
     this.props.marriageIntentionCertificateRequest.answerQuestion(
       {
-        partnerB_age: age,
+        [`partner${partnerFlag}_dob`]: newDate,
       },
       ''
     );
   };
-
-  private calcAge = dateObj => {
-    const today = new Date();
-    let age = today.getFullYear() - dateObj.getFullYear();
-    const m = today.getMonth() - dateObj.getMonth();
-
-    if (m < 0 || (m === 0 && today.getDate() < dateObj.getDate())) {
-      age = age - 1;
-    }
-
-    return age;
-  };
-
-  private isDateObj = dateObj => {
-    if (Object.prototype.toString.call(dateObj) === '[object Date]') {
-      return true;
-    }
-    return false;
-  };
+  // ------------------------------------------------------ //
 
   private advanceForm = (certObj: any) => {
     handleFormPageComplete$({
@@ -421,9 +197,25 @@ export default class PartnerForm extends Component<Props> {
           {nameFields({
             formPageComplete: partnerB_formPageComplete,
             partnerFlag: partnerLabel,
-            handleChange: this.handleChange,
-            handleResidenceStateChange: this.handleResidenceStateChange,
-            handleUseSurnameChange: this.handleUseSurnameChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleResidenceStateChange: e =>
+              handleResidenceStateChange$({
+                e,
+                partnerFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleUseSurnameChange: e =>
+              handleUseSurnameChange$({
+                val: e.target.value,
+                partnerFlag: 'B',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.nameFieldsRef,
@@ -443,9 +235,24 @@ export default class PartnerForm extends Component<Props> {
             birthCountryStr: partnerB_birthCountry,
             birthStateStr: partnerB_birthState,
             birthCityStr: partnerB_birthCity,
-            handleChange: this.handleChange,
-            handleBirthplaceCountryChange: this.handleBirthplaceCountryChange,
-            checkBirthCityForNeighborhood: this.checkBirthCityForNeighborhood,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleBirthplaceCountryChange: e =>
+              handleBirthplaceCountryChange$({
+                e,
+                partnerFlag: 'B',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            checkBirthCityForNeighborhood: () =>
+              checkBirthCityForNeighborhood$({
+                partnerFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             handleBirthDateChange: this.handleBirthDateChange,
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
@@ -460,11 +267,38 @@ export default class PartnerForm extends Component<Props> {
             residenceStateStr: partnerB_residenceState,
             residenceAddressStr: partnerB_residenceAddress,
             residenceCountryStr: partnerB_residenceCountry,
-            handleChange: this.handleChange,
-            handleZipCodeChange: this.handleZipCodeChange,
-            replaceBosNeighborhoods: this.replaceBosNeighborhoods,
-            handleResidenceStateChange: this.handleResidenceStateChange,
-            handleResidenceCountryChange: this.handleResidenceCountryChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleZipCodeChange: e =>
+              handleZipCodeChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            replaceBosNeighborhoods: e =>
+              replaceBosNeighborhoods$({
+                e,
+                partnerFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleResidenceStateChange: e =>
+              handleResidenceStateChange$({
+                e,
+                partnerFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleResidenceCountryChange: e =>
+              handleResidenceCountryChange$({
+                e,
+                partnerFlag: 'B',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.residenceRef,
@@ -483,10 +317,27 @@ export default class PartnerForm extends Component<Props> {
             partnershipState: partnerB_partnershipState,
             partnershipTypeDissolved: partnerB_partnershipTypeDissolved,
 
-            handleChange: this.handleChange,
-            handleBloodRelChange: this.handleBloodRelChange,
-            handleBloodRelDescChange: this.handleBloodRelDescChange,
-            handleMarriedBeforeChange: this.handleMarriedBeforeChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleBloodRelChange: e =>
+              handleBloodRelChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleBloodRelDescChange: e =>
+              handleBloodRelDescChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleMarriedBeforeChange: e =>
+              handleMarriedBeforeChange$({
+                val: e.target.value,
+                partnerFlag: 'B',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.marriageRef,
@@ -501,8 +352,17 @@ export default class PartnerForm extends Component<Props> {
             parentB_Surname: partnerB_parentB_Surname,
             additionalParent: partnerB_additionalParent,
             parentsMarriedAtBirth: partnerB_parentsMarriedAtBirth,
-            handleChange: this.handleChange,
-            handleAdditionalParentChange: this.handleAdditionalParentChange,
+            handleChange: e =>
+              handleChange$({
+                e,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleAdditionalParentChange: e =>
+              handleAdditionalParentChange$({
+                val: e.target.value,
+                partnerFlag: 'B',
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             formErrors: this.props.formErrors,
             errorElemSrc: this.props.errorElemSrc,
             refs: this.props.refObjs.parentsRef,
diff --git a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
index 7e8c253bb..b33ddc319 100644
--- a/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
+++ b/services-js/registry-certs/client/marriageintention/helpers/formUtils.ts
@@ -52,10 +52,13 @@ export const retPartnerRequestInformation = (
   retObj.surName = requestInformation[`partner${partnerFlag}_surName`];
   retObj.useSurname = requestInformation[`partner${partnerFlag}_useSurname`];
   retObj.occupation = requestInformation[`partner${partnerFlag}_occupation`];
+
   retObj.bloodRelation =
     requestInformation[`partner${partnerFlag}_bloodRelation`];
-  retObj.bloodRelationDesc;
-  requestInformation[`partner${partnerFlag}_bloodRelationDesc`];
+
+  retObj.bloodRelationDesc =
+    requestInformation[`partner${partnerFlag}_bloodRelationDesc`];
+
   retObj.birthCity = requestInformation[`partner${partnerFlag}_birthCity`];
   retObj.birthState = requestInformation[`partner${partnerFlag}_birthState`];
   retObj.birthCountry =
@@ -140,13 +143,17 @@ export const isPartnerFormPageComplete = (
     partnershipStateBool = false;
   }
 
-  const bloodRelDescReq =
+  let bloodRelDescReq =
     data.bloodRelation && data.bloodRelation == '1' ? true : false;
 
   if (bloodRelDescReq && data.bloodRelationDesc.length < 1) {
     bloodRelReq = false;
   }
 
+  if (bloodRelDescReq && data.bloodRelationDesc.length > 1) {
+    bloodRelReq = true;
+  }
+
   const surNameTextReq =
     data.useSurname && data.useSurname === '1' ? true : false;
 

From dc01794dd7a91d2c12556bf21f4f5c5f39c3f566 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Thu, 20 Jun 2024 12:50:58 -0400
Subject: [PATCH 25/28] DIG-4557: Continue Optimization

---
 .../marriageintention/forms/eventHandlers.ts  | 113 ++++++++++++++++--
 .../marriageintention/forms/partnerFormA.tsx  |  18 +++
 .../marriageintention/forms/partnerFormB.tsx  |  18 +++
 .../marriageintention/forms/partnerFormUI.tsx |  10 +-
 4 files changed, 145 insertions(+), 14 deletions(-)

diff --git a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
index 89c05930c..9cf81c1a9 100644
--- a/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
+++ b/services-js/registry-certs/client/marriageintention/forms/eventHandlers.ts
@@ -16,6 +16,29 @@ export const handleFormPageComplete$ = (data: {
   );
 };
 
+export const handleUseSurnameChange$ = (data: {
+  val: string;
+  partnerFlag: string;
+  certObj: MarriageIntentionCertificateRequest;
+}) => {
+  const { val, partnerFlag, certObj } = data;
+  certObj.answerQuestion(
+    {
+      [`partner${partnerFlag}_useSurname`]: val,
+    },
+    ''
+  );
+
+  if (val === '0') {
+    certObj.answerQuestion(
+      {
+        [`partner${partnerFlag}_surName`]: '',
+      },
+      ''
+    );
+  }
+};
+
 export const handleChange$ = (data: {
   e: ChangeEvent<HTMLInputElement>;
   certObj: MarriageIntentionCertificateRequest;
@@ -30,26 +53,94 @@ export const handleChange$ = (data: {
   );
 };
 
-export const handleUseSurnameChange$ = (data: {
-  val: string;
+/****
+ * @name handleParentNameChange$
+ * @description Update Session Data with field data for Parents, cropping last name from first field if last name matches Surname
+ * @case1 If Surname is entered before Name (FML), check FML value; if `Last` matches Surname then update remove the `Last` (L) from (FML) before updating Session Data
+ * @case2 If `First Middle Last` (FML) Name is entered before Surname, if `Last` from (FML) matches `Surname` remove the `Last`|(L) from (FML) in Name field
+ */
+export const handleParentNameChange$ = (data: {
+  e: ChangeEvent<HTMLInputElement>;
   partnerFlag: string;
+  parentFlag?: 'A' | 'B';
+  requestInformation: any;
   certObj: MarriageIntentionCertificateRequest;
 }) => {
-  const { val, partnerFlag, certObj } = data;
-  certObj.answerQuestion(
-    {
-      [`partner${partnerFlag}_useSurname`]: val,
-    },
-    ''
-  );
+  const { e, partnerFlag, requestInformation, certObj } = data;
+  const parentFlag = data.parentFlag ? data.parentFlag : 'A';
+  const {
+    [`partner${partnerFlag}_parent${parentFlag}_Name`]: parentA_Name,
+  } = requestInformation;
+
+  const fieldName = e.target && e.target.name ? e.target.name : '';
+  const fieldVal = e.target && e.target.value ? e.target.value : '';
+
+  if (partnerFlag === 'B') {
+    console.log(`Partner(${partnerFlag})`);
+  }
+
+  if (fieldName === `partner${partnerFlag}_parent${parentFlag}_Name`) {
+    // ---------------------------- //
+    // @case1 - START //
+    const {
+      [`partner${partnerFlag}_parent${parentFlag}_Surname`]: parentA_Surname,
+    } = requestInformation;
+    let case1Val = fieldVal;
+
+    const valArr1 = fieldVal.split(' ');
+    if (
+      parentA_Surname.length > 0 &&
+      valArr1.length > 1 &&
+      valArr1[valArr1.length - 1] === parentA_Surname
+    ) {
+      valArr1.pop();
+      case1Val = valArr1.join(' ');
+    }
 
-  if (val === '0') {
     certObj.answerQuestion(
       {
-        [`partner${partnerFlag}_surName`]: '',
+        [fieldName]: case1Val,
       },
       ''
     );
+    // @case1 - END //
+    // ---------------------------- //
+  } else {
+    // ---------------------------- //
+    // @case2 - END //
+    if (fieldName === `partner${partnerFlag}_parent${parentFlag}_Surname`) {
+      if (parentA_Name.split(' ').length > 1) {
+        let valArr2 = parentA_Name.split(' ');
+        if (valArr2[valArr2.length - 1] === fieldVal) {
+          valArr2.pop();
+          certObj.answerQuestion(
+            {
+              [`partner${partnerFlag}_parent${parentFlag}_Name`]: valArr2.join(
+                ' '
+              ),
+              [`partner${partnerFlag}_parent${parentFlag}_Surname`]: fieldVal,
+            },
+            ''
+          );
+        } else {
+          certObj.answerQuestion(
+            {
+              [fieldName]: fieldVal,
+            },
+            ''
+          );
+        }
+      } else {
+        certObj.answerQuestion(
+          {
+            [fieldName]: fieldVal,
+          },
+          ''
+        );
+      }
+    }
+    // @case2 - END //
+    // ---------------------------- //
   }
 };
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
index 34626edfe..6fb969ac6 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormA.tsx
@@ -37,6 +37,7 @@ import {
   handleResidenceStateChange$,
   replaceBosNeighborhoods$,
   checkBirthCityForNeighborhood$,
+  handleParentNameChange$,
   isDateObj$,
   updateAge$,
   calcAge$,
@@ -348,6 +349,23 @@ export default class PartnerForm extends Component<Props> {
             parentB_Surname: partnerA_parentB_Surname,
             additionalParent: partnerA_additionalParent,
             parentsMarriedAtBirth: partnerA_parentsMarriedAtBirth,
+            handleParentNameChange: e =>
+              handleParentNameChange$({
+                e,
+                partnerFlag: 'A',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleAddParentNameChange: e =>
+              handleParentNameChange$({
+                e,
+                partnerFlag: 'A',
+                parentFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             handleChange: e =>
               handleChange$({
                 e,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
index 97e8171b9..9e1274996 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormB.tsx
@@ -42,6 +42,7 @@ import {
   handleResidenceStateChange$,
   replaceBosNeighborhoods$,
   checkBirthCityForNeighborhood$,
+  handleParentNameChange$,
   isDateObj$,
   updateAge$,
   calcAge$,
@@ -352,6 +353,23 @@ export default class PartnerForm extends Component<Props> {
             parentB_Surname: partnerB_parentB_Surname,
             additionalParent: partnerB_additionalParent,
             parentsMarriedAtBirth: partnerB_parentsMarriedAtBirth,
+            handleParentNameChange: e =>
+              handleParentNameChange$({
+                e,
+                partnerFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
+            handleAddParentNameChange: e =>
+              handleParentNameChange$({
+                e,
+                partnerFlag: 'B',
+                parentFlag: 'B',
+                requestInformation:
+                  marriageIntentionCertificateRequest.requestInformation,
+                certObj: this.props.marriageIntentionCertificateRequest,
+              }),
             handleChange: e =>
               handleChange$({
                 e,
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index e44c951f7..f55ccc0a9 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -1022,6 +1022,8 @@ export const parents = (data: {
   parentsMarriedAtBirth: string;
   handleChange: ((e: any) => void) | undefined;
   handleAdditionalParentChange: ((e: any) => void) | undefined;
+  handleParentNameChange?: ((e: any) => void) | undefined;
+  handleAddParentNameChange?: ((e: any) => void) | undefined;
   formErrors?: (data: {
     action: string;
     ref?: React.RefObject<HTMLSpanElement>;
@@ -1041,6 +1043,8 @@ export const parents = (data: {
     parentsMarriedAtBirth,
     handleChange,
     handleAdditionalParentChange,
+    handleParentNameChange,
+    handleAddParentNameChange,
     formErrors,
     errorElemSrc,
     refs,
@@ -1135,7 +1139,7 @@ export const parents = (data: {
           label="Parent 1 - First Middle Last Name"
           name={`partner${partnerFlag}_parentA_Name`}
           value={parentA_Name}
-          onChange={handleChange}
+          onChange={handleParentNameChange}
           disableLabelNoWrap={true}
           maxLength={38}
           softRequired={true}
@@ -1146,7 +1150,7 @@ export const parents = (data: {
           label="Parent 1 - Family Name/Last Name At the time of their birth or adoption"
           name={`partner${partnerFlag}_parentA_Surname`}
           value={parentA_Surname}
-          onChange={handleChange}
+          onChange={handleParentNameChange}
           disableLabelNoWrap={true}
           maxLength={38}
           optionalDescription={
@@ -1176,7 +1180,7 @@ export const parents = (data: {
             parentB_Surname,
             errorVal_parentB_Name,
             errorVal_parentB_Surname,
-            handleChange,
+            handleChange: handleAddParentNameChange,
           })}
 
         {parentsMarried({

From cdb3179dbda88a397b7037d7c2290dfd6a89dd4c Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Sat, 22 Jun 2024 14:28:59 -0400
Subject: [PATCH 26/28] DIG-4558: Marriage Intention Language Updates

---
 .../__snapshots__/Storyshots.test.ts.snap     | 32 +++++++++++--------
 .../marriageintention/forms/instructions.tsx  | 10 ++++++
 .../marriageintention/forms/partnerFormUI.tsx |  8 ++---
 .../marriageintention/forms/partnerView.tsx   |  2 +-
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index fb03bc12a..0d581381b 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -70899,7 +70899,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     <label
       className="notice emotion-1"
     >
-      Please enter your middle name if you have one. You cannot list a new middle name.
+      Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
     </label>
     <input
       aria-label=""
@@ -71663,7 +71663,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     <label
       className="notice emotion-1"
     >
-      Please enter your middle name if you have one. You cannot list a new middle name.
+      Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
     </label>
     <input
       aria-label=""
@@ -71818,7 +71818,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     <div>
       <label
         className="txt-l "
-        htmlFor="input-546901997"
+        htmlFor="input-238872936"
         style={
           Object {
             "display": "flex",
@@ -71833,7 +71833,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
             }
           }
         >
-          New Last Name to be Used After Marriage
+          Full Name to be Used After Marriage
         </span>
         <span
           aria-hidden="true"
@@ -71868,7 +71868,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <input
         aria-label=""
         className="txt-f   "
-        id="input-546901997"
+        id="input-238872936"
         maxLength={50}
         name="partner1_surName"
         onChange={[Function]}
@@ -72371,7 +72371,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
     <div
       className="notice"
     >
-      Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+      Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment. No PO Boxes.
     </div>
   </h1>
   <div
@@ -74773,7 +74773,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 5. Review/Person Inf
         <label
           className="field"
         >
-          Last Name to be Used After Marriage
+          Full Name to be Used After Marriage
           : 
         </label>
         <span
@@ -75779,6 +75779,12 @@ Array [
                       <li>
                         Parents' names (including their family names) and whether they were married when you were born
                       </li>
+                      <li>
+                        While a social security number is not required to get married in the City of Boston, if you do have one, it can simplify the process
+                      </li>
+                      <li>
+                        Your immigration status is not required to get married in the City of Boston
+                      </li>
                     </ul>
                   </div>
                   <h2>
@@ -77347,7 +77353,7 @@ Array [
                       <label
                         className="notice emotion-6"
                       >
-                        Please enter your middle name if you have one. You cannot list a new middle name.
+                        Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
                       </label>
                       <input
                         aria-label=""
@@ -79294,7 +79300,7 @@ Array [
                       <div
                         className="notice"
                       >
-                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment. No PO Boxes.
                       </div>
                     </h1>
                     <div
@@ -82924,7 +82930,7 @@ Array [
                       <label
                         className="notice emotion-6"
                       >
-                        Please enter your middle name if you have one. You cannot list a new middle name.
+                        Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
                       </label>
                       <input
                         aria-label=""
@@ -84871,7 +84877,7 @@ Array [
                       <div
                         className="notice"
                       >
-                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment.
+                        Please enter your current residential address. If your mailing address is not the same as your residential one, you will have the opportunity to share your preferred address during your appointment. No PO Boxes.
                       </div>
                     </h1>
                     <div
@@ -89147,7 +89153,7 @@ Array [
                           <label
                             className="field"
                           >
-                            Last Name to be Used After Marriage
+                            Full Name to be Used After Marriage
                             : 
                           </label>
                           <span
@@ -89428,7 +89434,7 @@ Array [
                           <label
                             className="field"
                           >
-                            Last Name to be Used After Marriage
+                            Full Name to be Used After Marriage
                             : 
                           </label>
                           <span
diff --git a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
index d05f2f2b4..3bea10673 100644
--- a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
@@ -61,6 +61,16 @@ export default class Instructions extends Component<Props> {
               Parents' names (including their family names) and whether they
               were married when you were born
             </li>
+            <li>
+              While a social security number is not required to get married in
+              the City of Boston, if you do have one, it can simplify the
+              process
+            </li>
+
+            <li>
+              Your immigration status is not required to get married in the City
+              of Boston
+            </li>
           </ul>
         </div>
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index f55ccc0a9..dfb3394d3 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -157,7 +157,7 @@ export const nameFields = (data: {
     formPageComplete === '1' &&
     useSurname === '1' &&
     surName === ''
-      ? `Please enter the 'Last Name' you'll use`
+      ? `Please enter the 'Full Name' you'll use`
       : '';
   if (errorVal_surName.length > 0) errors.add(`partner${partnerFlag}_surName`);
 
@@ -225,7 +225,7 @@ export const nameFields = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         optionalDescription={
-          'Please enter your middle name if you have one. You cannot list a new middle name.'
+          'Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage'
         }
         maxLength={50}
         softRequired={false}
@@ -270,7 +270,7 @@ export const nameFields = (data: {
           ]}
         >
           <TextInput
-            label="New Last Name to be Used After Marriage"
+            label="Full Name to be Used After Marriage"
             name={`partner${partnerFlag}_surName`}
             value={surName}
             onChange={handleChange}
@@ -711,7 +711,7 @@ export const residence = (data: {
         <div className="notice">
           Please enter your current residential address. If your mailing address
           is not the same as your residential one, you will have the opportunity
-          to share your preferred address during your appointment.
+          to share your preferred address during your appointment. No PO Boxes.
         </div>
       </h1>
 
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
index e2229d8d4..312a1642d 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerView.tsx
@@ -113,7 +113,7 @@ export default class PartnerView extends Component<Props> {
             })}
 
             {$ReviewFieldValuePair({
-              field: `Last Name to be Used After Marriage`,
+              field: `Full Name to be Used After Marriage`,
               value: `${surName}`,
             })}
 

From c2782aa3c0fea287713ebe3a5c6887db89e0f4ac Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Tue, 25 Jun 2024 14:45:23 -0400
Subject: [PATCH 27/28] DIG-4558: Marriage Intention Language Updates - Add
 punctuation to Middle Name description

---
 .../client/__snapshots__/Storyshots.test.ts.snap          | 8 ++++----
 .../client/marriageintention/forms/partnerFormUI.tsx      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 0d581381b..3207df0a2 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -70899,7 +70899,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     <label
       className="notice emotion-1"
     >
-      Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
+      Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage.
     </label>
     <input
       aria-label=""
@@ -71663,7 +71663,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
     <label
       className="notice emotion-1"
     >
-      Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
+      Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage.
     </label>
     <input
       aria-label=""
@@ -77353,7 +77353,7 @@ Array [
                       <label
                         className="notice emotion-6"
                       >
-                        Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
+                        Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage.
                       </label>
                       <input
                         aria-label=""
@@ -82930,7 +82930,7 @@ Array [
                       <label
                         className="notice emotion-6"
                       >
-                        Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage
+                        Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage.
                       </label>
                       <input
                         aria-label=""
diff --git a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
index dfb3394d3..580bcc9bc 100644
--- a/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/partnerFormUI.tsx
@@ -225,7 +225,7 @@ export const nameFields = (data: {
         onChange={handleChange}
         disableLabelNoWrap={true}
         optionalDescription={
-          'Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage'
+          'Please enter your middle name if you have one. You cannot list a new middle name. Maiden and surnames may not be used in place of your legal middle name. Any changes to names must be done after marriage.'
         }
         maxLength={50}
         softRequired={false}

From 45d642199ab32c06137d0bf21d266ea333f92370 Mon Sep 17 00:00:00 2001
From: Phillip Kelly <phillipbentonkelly@gmail.com>
Date: Fri, 28 Jun 2024 16:36:19 -0400
Subject: [PATCH 28/28] DIG-4453: (Bug) Tooltip goes beyond the design

---
 .../react-fleet/.storybook/preview-head.html  |   4 +-
 .../src/__snapshots__/Storyshots.test.ts.snap | 343 ++++---
 .../react-fleet/src/form-elements/ToolTip.tsx |  65 +-
 .../src/form-elements/inputs/TextInput.tsx    |  11 +-
 .../react-fleet/src/utilities/constants.ts    |   4 +-
 .../.storybook/preview-head.html              |   4 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 204 ++++
 .../.storybook/preview-head.html              |   4 +-
 .../__snapshots__/Storyshots.test.ts.snap     | 876 +++++++++++-------
 .../forms/FormPages.stories.tsx               |   8 +-
 .../marriageintention/forms/instructions.tsx  |   7 +-
 11 files changed, 1040 insertions(+), 490 deletions(-)

diff --git a/modules-js/react-fleet/.storybook/preview-head.html b/modules-js/react-fleet/.storybook/preview-head.html
index 0874e3cba..eb9fd5339 100644
--- a/modules-js/react-fleet/.storybook/preview-head.html
+++ b/modules-js/react-fleet/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <!--[if !IE]><!-->
-<!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
-<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
+<link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+<!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
 <!--<![endif]-->
diff --git a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
index f93579043..775aa5b54 100644
--- a/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
+++ b/modules-js/react-fleet/src/__snapshots__/Storyshots.test.ts.snap
@@ -2997,28 +2997,32 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels as Markup 1`]
 
 exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired, Tool Tip 1`] = `
 .emotion-0 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-0 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-0 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-0 .icon::before {
@@ -3027,7 +3031,6 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired
 
 .emotion-0 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-0 .tt--info::before {
@@ -3035,27 +3038,35 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired
 }
 
 .emotion-0 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-0 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-0 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 <div
@@ -3083,8 +3094,8 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired
     >
       Required
     </span>
-    <span
-      className="tool-tip__wrapper emotion-0"
+    <div
+      className="emotion-0"
     >
       <div
         className="icon tt--info"
@@ -3094,7 +3105,7 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired
       >
         This information is collected as required by the Massachusetts State Marriage Intention Form.
       </div>
-    </span>
+    </div>
   </div>
   <label
     className="ra  "
@@ -3146,28 +3157,32 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, SoftRequired
 
 exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, Tool Tip 1`] = `
 .emotion-0 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-0 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-0 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-0 .icon::before {
@@ -3176,7 +3191,6 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, Tool Tip 1`]
 
 .emotion-0 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-0 .tt--info::before {
@@ -3184,27 +3198,35 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, Tool Tip 1`]
 }
 
 .emotion-0 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-0 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-0 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 <div
@@ -3221,8 +3243,8 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, Tool Tip 1`]
     }
   >
     Time of Day
-    <span
-      className="tool-tip__wrapper emotion-0"
+    <div
+      className="emotion-0"
     >
       <div
         className="icon"
@@ -3232,7 +3254,7 @@ exports[`Storyshots Form Elements|Inputs/Radio Radio Group, Labels, Tool Tip 1`]
       >
         This information is collected as required by the Massachusetts State Marriage Intention Form.
       </div>
-    </span>
+    </div>
   </div>
   <label
     className="ra  "
@@ -3297,6 +3319,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
       htmlFor="input-362326901"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3304,6 +3327,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput default 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3346,6 +3370,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
       htmlFor="input-2348632648"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3353,6 +3378,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3380,6 +3406,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
       htmlFor="input-3077581017"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3387,6 +3414,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput error 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3426,6 +3454,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       htmlFor="input-2715199497"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3433,6 +3462,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3463,6 +3493,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       htmlFor="input-3647184142"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3470,6 +3501,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3500,6 +3532,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       htmlFor="input-680647510"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3507,6 +3540,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3520,6 +3554,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -3549,6 +3584,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       htmlFor="input-2490219431"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3556,6 +3592,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3569,6 +3606,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput interactive states 1`] = `
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -3610,6 +3648,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       htmlFor="input-1357588218"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3617,6 +3656,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3630,6 +3670,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -3657,6 +3698,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       htmlFor="input-3174958747"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3664,6 +3706,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3693,6 +3736,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
         htmlFor="input-423803610"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
           }
         }
@@ -3700,6 +3744,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
         <span
           style={
             Object {
+              "alignItems": "center",
               "display": "flex",
               "marginRight": "0.5em",
               "whiteSpace": "nowrap",
@@ -3730,6 +3775,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       htmlFor="input-5381"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3774,6 +3820,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       htmlFor="input-472033325"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3781,6 +3828,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3808,28 +3856,32 @@ exports[`Storyshots Form Elements|Inputs/TextInput variations 1`] = `
 
 exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`] = `
 .emotion-0 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-0 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-0 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-0 .icon::before {
@@ -3838,7 +3890,6 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
 
 .emotion-0 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-0 .tt--info::before {
@@ -3846,27 +3897,35 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
 }
 
 .emotion-0 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-0 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-0 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 <div
@@ -3883,6 +3942,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
       htmlFor="input-362326901"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -3890,6 +3950,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3903,14 +3964,15 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-0"
+        <div
+          className="emotion-0"
         >
           <div
             className="icon"
@@ -3920,7 +3982,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
           >
             This information is collected.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <input
@@ -3958,6 +4020,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
       htmlFor="input-362326901"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
           "marginBottom": "2em",
           "marginTop": "1em",
@@ -3967,6 +4030,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -3980,14 +4044,15 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-0"
+        <div
+          className="emotion-0"
         >
           <div
             className="icon"
@@ -3997,7 +4062,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
           >
             Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
           </div>
-        </span>
+        </div>
       </span>
     </label>
   </div>
@@ -4007,6 +4072,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
       htmlFor="input-362326901"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -4014,6 +4080,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
             "whiteSpace": "nowrap",
@@ -4027,14 +4094,15 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-0"
+        <div
+          className="emotion-0"
         >
           <div
             className="icon"
@@ -4044,7 +4112,7 @@ exports[`Storyshots Form Elements|Inputs/TextInput w/Tool Tip: Short & Long 1`]
           >
             Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <input
@@ -4129,28 +4197,32 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
 }
 
 .emotion-3 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-3 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-3 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-3 .icon::before {
@@ -4159,7 +4231,6 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
 
 .emotion-3 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-3 .tt--info::before {
@@ -4167,27 +4238,35 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
 }
 
 .emotion-3 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-3 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-3 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 <div
@@ -4444,8 +4523,8 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-3"
+        <div
+          className="emotion-3"
         >
           <div
             className="icon"
@@ -4455,7 +4534,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
           >
             If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <div
@@ -4511,8 +4590,8 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-3"
+        <div
+          className="emotion-3"
         >
           <div
             className="icon"
@@ -4522,7 +4601,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
           >
             If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <div
@@ -4576,8 +4655,8 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-3"
+        <div
+          className="emotion-3"
         >
           <div
             className="icon"
@@ -4587,7 +4666,7 @@ exports[`Storyshots Form Elements|SelectDropdown variants 1`] = `
           >
             If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <div
diff --git a/modules-js/react-fleet/src/form-elements/ToolTip.tsx b/modules-js/react-fleet/src/form-elements/ToolTip.tsx
index fc88f8238..40a7c2e18 100644
--- a/modules-js/react-fleet/src/form-elements/ToolTip.tsx
+++ b/modules-js/react-fleet/src/form-elements/ToolTip.tsx
@@ -7,6 +7,7 @@ import {
   OPTIMISTIC_BLUE_DARK,
   DEFAULT_TEXT,
   GRAY_000,
+  MEDIA_SMALL_MAX,
 } from '../utilities/constants';
 
 export const ToolTip = (data: {
@@ -16,22 +17,25 @@ export const ToolTip = (data: {
   const { icon, msg } = data;
 
   const $wrapper = css(`
-    display: flex;
-    flex-grow: 1;
     position: relative;
+    display: inline-block;
+    margin-left: 0.25em;
+    padding: 5px 0 0 0;
 
+    .wrapper {
+      display: flex;
+      align-items: center;
+    }
+    
     .icon {
+      background:${OPTIMISTIC_BLUE_DARK};
+      line-height: normal;
+      color: white;
+      font-size: 0.5rem;
+      text-align: center;
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      font-size: 0.75rem;
-      background: ${OPTIMISTIC_BLUE_DARK};
-
-      margin: 5px 0px 0 5px;
-      padding: 5.4px 0 0 3.00px;
-      line-height: 0px;
-      font-size: 8px;
-      color: white;
 
       &::before {
         content: '?';
@@ -40,32 +44,41 @@ export const ToolTip = (data: {
 
     .tt--info {
       text-transform: lowercase;
-      padding-left: 3.5px;
       &::before { content: 'i' }
     }
 
     .msg {
-      flex-grow: 1;
-      visibility: hidden;
-      z-index: 2;
-
+      display: none;
+      position: absolute;
+      line-height: normal;
+      z-index: 1000;
+      left: 110%;
+      top: -10%;
+      
+      min-width: 250px;
+      max-width: 300px;
       
       padding: 0.25em 0.5em;
-      color: ${DEFAULT_TEXT};
-      font-family: ${SERIF};
       font-weight: 300;
       font-style: italic;
+      font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+      text-align: left;
       text-transform: initial;
-      background-color: ${GRAY_000};
-      
-      min-width: 150px;
 
-      position: absolute;
-      margin-left: 20px;
-      top: calc(-30% + 1px);
+      background: ${GRAY_000};
+      color: ${DEFAULT_TEXT};
+      font-family: ${SERIF};
     }
 
-    .icon:hover + .msg { visibility: visible; }
+    .icon:hover + .msg {
+      display: block;
+    }
+    
+    ${MEDIA_SMALL_MAX} {
+      .msg {
+        transform: translate(-51%, -95%);
+      }
+    }
   `);
 
   let cssObj_labelReq = { icon: 'icon' };
@@ -86,10 +99,10 @@ export const ToolTip = (data: {
     .replace(/,/g, ' ');
 
   return (
-    <span className={'tool-tip__wrapper'} css={$wrapper}>
+    <div css={$wrapper}>
       <div className={cssArrToString} />
       <div className="msg">{msg}</div>
-    </span>
+    </div>
   );
 };
 
diff --git a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
index 16b98d465..5ea158113 100644
--- a/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
+++ b/modules-js/react-fleet/src/form-elements/inputs/TextInput.tsx
@@ -89,7 +89,11 @@ export default function TextInput(props: Props): JSX.Element {
 
   const labelText = (label): React.ReactChild => {
     if (typeof label === 'string') {
-      let styleObj = { marginRight: '0.5em', display: 'flex' };
+      let styleObj = {
+        marginRight: '0.5em',
+        display: 'flex',
+        alignItems: 'center',
+      };
       if (!props.disableLabelNoWrap) {
         styleObj['whiteSpace'] = 'nowrap';
       }
@@ -137,10 +141,11 @@ export default function TextInput(props: Props): JSX.Element {
       marginTop: '1em',
       marginBottom: '2em',
       display: 'flex',
+      alignItems: 'baseline',
     };
     const optStyles = props.labelBelowInput
       ? modLabelStyle
-      : { display: 'flex' };
+      : { display: 'flex', alignItems: 'baseline' };
 
     return (
       <label htmlFor={id} className={classNames.label} style={optStyles}>
@@ -154,7 +159,7 @@ export default function TextInput(props: Props): JSX.Element {
           <span
             className={`${cssArrToString}`}
             aria-hidden="true"
-            style={{ display: 'flex', flexGrow: 1 }}
+            style={{ display: 'flex', flexGrow: 1, alignItems: 'baseline' }}
           >
             {requireStr()}
             {toolTip && ToolTip({ icon: `${toolTip.icon}`, msg: toolTip.msg })}
diff --git a/modules-js/react-fleet/src/utilities/constants.ts b/modules-js/react-fleet/src/utilities/constants.ts
index a8f6a43d3..4dd118532 100644
--- a/modules-js/react-fleet/src/utilities/constants.ts
+++ b/modules-js/react-fleet/src/utilities/constants.ts
@@ -1,5 +1,5 @@
-// export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
-export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
+export const PUBLIC_CSS_URL = 'https://patterns.boston.gov/css/public.css';
+// export const PUBLIC_CSS_URL = 'https://patterns-stg.boston.gov/css/public.css';
 // export const PUBLIC_CSS_URL = 'http://localhost:3030/css/public.css';
 export const WHITE = '#fff';
 export const BLACK = '#000';
diff --git a/modules-js/storybook-common/.storybook/preview-head.html b/modules-js/storybook-common/.storybook/preview-head.html
index 42346eaaa..a45e3e82c 100644
--- a/modules-js/storybook-common/.storybook/preview-head.html
+++ b/modules-js/storybook-common/.storybook/preview-head.html
@@ -1,6 +1,6 @@
 <!--[if !IE]><!-->
-  <!-- <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" /> -->
-  <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
+  <link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css" />
+  <!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="https://cob-patterns-staging.herokuapp.com/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:3030/css/public.css" /> -->
 <!-- <link rel="stylesheet" type="text/css" href="http://10.0.0.172:8080/css/public.css" /> -->
diff --git a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
index fa3cc05b2..5218adb8f 100644
--- a/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/commissions-app/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -52,6 +52,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               htmlFor="ApplicationForm-firstName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -59,6 +60,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -72,6 +74,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -105,6 +108,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               htmlFor="ApplicationForm-middleName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -112,6 +116,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -145,6 +150,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             htmlFor="ApplicationForm-lastName"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -152,6 +158,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -165,6 +172,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -202,6 +210,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             htmlFor="ApplicationForm-streetAddress"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -209,6 +218,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -222,6 +232,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -255,6 +266,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             htmlFor="ApplicationForm-unit"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -262,6 +274,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -299,6 +312,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             htmlFor="ApplicationForm-city"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -306,6 +320,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -319,6 +334,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -355,6 +371,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               htmlFor="ApplicationForm-state"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -362,6 +379,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -375,6 +393,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -408,6 +427,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               htmlFor="ApplicationForm-zip"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -415,6 +435,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -428,6 +449,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -463,6 +485,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           htmlFor="ApplicationForm-phone"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -470,6 +493,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -503,6 +527,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           htmlFor="ApplicationForm-email"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -510,6 +535,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -523,6 +549,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -556,6 +583,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           htmlFor="ApplicationForm-confirmEmail"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -563,6 +591,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -576,6 +605,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -627,6 +657,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           htmlFor="ApplicationForm-degreeAttained"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -634,6 +665,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -667,6 +699,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           htmlFor="ApplicationForm-educationalInstitution"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -674,6 +707,7 @@ exports[`Storyshots ApplicationForm blank 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -1118,6 +1152,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               htmlFor="ApplicationForm-firstName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -1125,6 +1160,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -1138,6 +1174,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -1171,6 +1208,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               htmlFor="ApplicationForm-middleName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -1178,6 +1216,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -1211,6 +1250,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             htmlFor="ApplicationForm-lastName"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -1218,6 +1258,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -1231,6 +1272,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -1268,6 +1310,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             htmlFor="ApplicationForm-streetAddress"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -1275,6 +1318,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -1288,6 +1332,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -1321,6 +1366,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             htmlFor="ApplicationForm-unit"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -1328,6 +1374,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -1365,6 +1412,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             htmlFor="ApplicationForm-city"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -1372,6 +1420,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -1385,6 +1434,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -1421,6 +1471,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               htmlFor="ApplicationForm-state"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -1428,6 +1479,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -1441,6 +1493,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -1474,6 +1527,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               htmlFor="ApplicationForm-zip"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -1481,6 +1535,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -1494,6 +1549,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -1529,6 +1585,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           htmlFor="ApplicationForm-phone"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -1536,6 +1593,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -1569,6 +1627,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           htmlFor="ApplicationForm-email"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -1576,6 +1635,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -1589,6 +1649,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -1622,6 +1683,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           htmlFor="ApplicationForm-confirmEmail"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -1629,6 +1691,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -1642,6 +1705,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -1693,6 +1757,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           htmlFor="ApplicationForm-degreeAttained"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -1700,6 +1765,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -1733,6 +1799,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           htmlFor="ApplicationForm-educationalInstitution"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -1740,6 +1807,7 @@ exports[`Storyshots ApplicationForm errors 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -2184,6 +2252,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               htmlFor="ApplicationForm-firstName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -2191,6 +2260,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -2204,6 +2274,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -2237,6 +2308,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               htmlFor="ApplicationForm-middleName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -2244,6 +2316,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -2277,6 +2350,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             htmlFor="ApplicationForm-lastName"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -2284,6 +2358,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -2297,6 +2372,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -2334,6 +2410,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             htmlFor="ApplicationForm-streetAddress"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -2341,6 +2418,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -2354,6 +2432,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -2387,6 +2466,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             htmlFor="ApplicationForm-unit"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -2394,6 +2474,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -2431,6 +2512,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             htmlFor="ApplicationForm-city"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -2438,6 +2520,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -2451,6 +2534,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -2487,6 +2571,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               htmlFor="ApplicationForm-state"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -2494,6 +2579,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -2507,6 +2593,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -2540,6 +2627,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               htmlFor="ApplicationForm-zip"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -2547,6 +2635,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -2560,6 +2649,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -2595,6 +2685,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           htmlFor="ApplicationForm-phone"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -2602,6 +2693,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -2635,6 +2727,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           htmlFor="ApplicationForm-email"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -2642,6 +2735,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -2655,6 +2749,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -2688,6 +2783,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           htmlFor="ApplicationForm-confirmEmail"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -2695,6 +2791,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -2708,6 +2805,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -2759,6 +2857,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           htmlFor="ApplicationForm-degreeAttained"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -2766,6 +2865,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -2799,6 +2899,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           htmlFor="ApplicationForm-educationalInstitution"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -2806,6 +2907,7 @@ exports[`Storyshots ApplicationForm filled in 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -3285,6 +3387,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               htmlFor="ApplicationForm-firstName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -3292,6 +3395,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -3305,6 +3409,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -3338,6 +3443,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               htmlFor="ApplicationForm-middleName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -3345,6 +3451,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -3378,6 +3485,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             htmlFor="ApplicationForm-lastName"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -3385,6 +3493,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -3398,6 +3507,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -3435,6 +3545,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             htmlFor="ApplicationForm-streetAddress"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -3442,6 +3553,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -3455,6 +3567,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -3488,6 +3601,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             htmlFor="ApplicationForm-unit"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -3495,6 +3609,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -3532,6 +3647,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             htmlFor="ApplicationForm-city"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -3539,6 +3655,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -3552,6 +3669,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -3588,6 +3706,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               htmlFor="ApplicationForm-state"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -3595,6 +3714,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -3608,6 +3728,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -3641,6 +3762,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               htmlFor="ApplicationForm-zip"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -3648,6 +3770,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -3661,6 +3784,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -3696,6 +3820,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           htmlFor="ApplicationForm-phone"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -3703,6 +3828,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -3736,6 +3862,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           htmlFor="ApplicationForm-email"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -3743,6 +3870,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -3756,6 +3884,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -3789,6 +3918,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           htmlFor="ApplicationForm-confirmEmail"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -3796,6 +3926,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -3809,6 +3940,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -3860,6 +3992,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           htmlFor="ApplicationForm-degreeAttained"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -3867,6 +4000,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -3900,6 +4034,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           htmlFor="ApplicationForm-educationalInstitution"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -3907,6 +4042,7 @@ exports[`Storyshots ApplicationForm submission error 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -4392,6 +4528,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               htmlFor="ApplicationForm-firstName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -4399,6 +4536,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -4412,6 +4550,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -4445,6 +4584,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               htmlFor="ApplicationForm-middleName"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -4452,6 +4592,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -4485,6 +4626,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             htmlFor="ApplicationForm-lastName"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -4492,6 +4634,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -4505,6 +4648,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -4542,6 +4686,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             htmlFor="ApplicationForm-streetAddress"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -4549,6 +4694,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -4562,6 +4708,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -4595,6 +4742,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             htmlFor="ApplicationForm-unit"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -4602,6 +4750,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -4639,6 +4788,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             htmlFor="ApplicationForm-city"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -4646,6 +4796,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -4659,6 +4810,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               className="t--req"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                   "flexGrow": 1,
                 }
@@ -4695,6 +4847,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               htmlFor="ApplicationForm-state"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -4702,6 +4855,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -4715,6 +4869,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -4748,6 +4903,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               htmlFor="ApplicationForm-zip"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -4755,6 +4911,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -4768,6 +4925,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
                 className="t--req"
                 style={
                   Object {
+                    "alignItems": "baseline",
                     "display": "flex",
                     "flexGrow": 1,
                   }
@@ -4803,6 +4961,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           htmlFor="ApplicationForm-phone"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -4810,6 +4969,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -4843,6 +5003,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           htmlFor="ApplicationForm-email"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -4850,6 +5011,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -4863,6 +5025,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -4896,6 +5059,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           htmlFor="ApplicationForm-confirmEmail"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -4903,6 +5067,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -4916,6 +5081,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -4967,6 +5133,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           htmlFor="ApplicationForm-degreeAttained"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -4974,6 +5141,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -5007,6 +5175,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           htmlFor="ApplicationForm-educationalInstitution"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -5014,6 +5183,7 @@ exports[`Storyshots ApplicationForm submitting 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -5635,6 +5805,7 @@ Array [
                         htmlFor="ApplicationForm-firstName"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -5642,6 +5813,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
@@ -5655,6 +5827,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -5688,6 +5861,7 @@ Array [
                         htmlFor="ApplicationForm-middleName"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -5695,6 +5869,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
@@ -5728,6 +5903,7 @@ Array [
                       htmlFor="ApplicationForm-lastName"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -5735,6 +5911,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -5748,6 +5925,7 @@ Array [
                         className="t--req"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                             "flexGrow": 1,
                           }
@@ -5785,6 +5963,7 @@ Array [
                       htmlFor="ApplicationForm-streetAddress"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -5792,6 +5971,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -5805,6 +5985,7 @@ Array [
                         className="t--req"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                             "flexGrow": 1,
                           }
@@ -5838,6 +6019,7 @@ Array [
                       htmlFor="ApplicationForm-unit"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -5845,6 +6027,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -5882,6 +6065,7 @@ Array [
                       htmlFor="ApplicationForm-city"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -5889,6 +6073,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -5902,6 +6087,7 @@ Array [
                         className="t--req"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                             "flexGrow": 1,
                           }
@@ -5938,6 +6124,7 @@ Array [
                         htmlFor="ApplicationForm-state"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -5945,6 +6132,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
@@ -5958,6 +6146,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -5991,6 +6180,7 @@ Array [
                         htmlFor="ApplicationForm-zip"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -5998,6 +6188,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
@@ -6011,6 +6202,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -6046,6 +6238,7 @@ Array [
                     htmlFor="ApplicationForm-phone"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -6053,6 +6246,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
@@ -6086,6 +6280,7 @@ Array [
                     htmlFor="ApplicationForm-email"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -6093,6 +6288,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
@@ -6106,6 +6302,7 @@ Array [
                       className="t--req"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                           "flexGrow": 1,
                         }
@@ -6139,6 +6336,7 @@ Array [
                     htmlFor="ApplicationForm-confirmEmail"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -6146,6 +6344,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
@@ -6159,6 +6358,7 @@ Array [
                       className="t--req"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                           "flexGrow": 1,
                         }
@@ -6210,6 +6410,7 @@ Array [
                     htmlFor="ApplicationForm-degreeAttained"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -6217,6 +6418,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
@@ -6250,6 +6452,7 @@ Array [
                     htmlFor="ApplicationForm-educationalInstitution"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -6257,6 +6460,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
diff --git a/services-js/registry-certs/.storybook/preview-head.html b/services-js/registry-certs/.storybook/preview-head.html
index 2f5207070..b66c8b037 100644
--- a/services-js/registry-certs/.storybook/preview-head.html
+++ b/services-js/registry-certs/.storybook/preview-head.html
@@ -3,8 +3,8 @@
   That way Emotion can override the default styles. This matches the behavior in
   prod, where this tag is written by _document.tsx.
 -->
-<!-- <link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" /> -->
-<link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" />
+<link href="https://patterns.boston.gov/css/public.css" type="text/css" rel="stylesheet" />
+<!-- <link type="text/css" rel="stylesheet" href="https://patterns-stg.boston.gov/css/public.css" /> -->
 <!-- <link href="http://localhost:3030/css/public.css" type="text/css" rel="stylesheet" /> -->
 
 <script src="https://js.stripe.com/v3/"></script>
diff --git a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
index 3207df0a2..e22e1ab3d 100644
--- a/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
+++ b/services-js/registry-certs/client/__snapshots__/Storyshots.test.ts.snap
@@ -7937,6 +7937,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
               htmlFor="input-2048906072"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -7944,6 +7945,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -7974,6 +7976,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
               htmlFor="input-5381"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -8035,6 +8038,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
               htmlFor="input-2048906072"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -8042,6 +8046,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -8072,6 +8077,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation default 1`] =
               htmlFor="input-5381"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -8662,6 +8668,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-2048906072"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -8669,6 +8676,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -8699,6 +8707,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-5381"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -8760,6 +8769,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-2048906072"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -8767,6 +8777,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -8797,6 +8808,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-5381"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -9415,6 +9427,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-2048906072"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -9422,6 +9435,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -9452,6 +9466,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-5381"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -9513,6 +9528,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-2048906072"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -9520,6 +9536,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               <span
                 style={
                   Object {
+                    "alignItems": "center",
                     "display": "flex",
                     "marginRight": "0.5em",
                     "whiteSpace": "nowrap",
@@ -9550,6 +9567,7 @@ exports[`Storyshots Birth/Question Components/ParentalInformation may be restric
               htmlFor="input-5381"
               style={
                 Object {
+                  "alignItems": "baseline",
                   "display": "flex",
                 }
               }
@@ -10044,6 +10062,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
             htmlFor="input-2048906072"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -10051,6 +10070,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -10081,6 +10101,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
             htmlFor="input-1103291528"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -10088,6 +10109,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -10122,6 +10144,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
             htmlFor="input-2099238988"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -10129,6 +10152,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation birth too rece
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -10609,6 +10633,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
             htmlFor="input-2048906072"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -10616,6 +10641,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -10646,6 +10672,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
             htmlFor="input-1103291528"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -10653,6 +10680,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -10687,6 +10715,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
             htmlFor="input-2099238988"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
               }
             }
@@ -10694,6 +10723,7 @@ exports[`Storyshots Birth/Question Components/PersonalInformation default 1`] =
             <span
               style={
                 Object {
+                  "alignItems": "center",
                   "display": "flex",
                   "marginRight": "0.5em",
                   "whiteSpace": "nowrap",
@@ -14225,6 +14255,7 @@ Array [
                       htmlFor="input-2048906072"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -14232,6 +14263,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -14262,6 +14294,7 @@ Array [
                       htmlFor="input-1103291528"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -14269,6 +14302,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -14303,6 +14337,7 @@ Array [
                       htmlFor="input-2099238988"
                       style={
                         Object {
+                          "alignItems": "baseline",
                           "display": "flex",
                         }
                       }
@@ -14310,6 +14345,7 @@ Array [
                       <span
                         style={
                           Object {
+                            "alignItems": "center",
                             "display": "flex",
                             "marginRight": "0.5em",
                             "whiteSpace": "nowrap",
@@ -15264,6 +15300,7 @@ Array [
                         htmlFor="input-2048906072"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -15271,6 +15308,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
@@ -15301,6 +15339,7 @@ Array [
                         htmlFor="input-5381"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -15362,6 +15401,7 @@ Array [
                         htmlFor="input-2048906072"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -15369,6 +15409,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                               "whiteSpace": "nowrap",
@@ -15399,6 +15440,7 @@ Array [
                         htmlFor="input-5381"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -65343,6 +65385,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         htmlFor="input-1547104625"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
           }
         }
@@ -65350,6 +65393,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         <span
           style={
             Object {
+              "alignItems": "center",
               "display": "flex",
               "marginRight": "0.5em",
             }
@@ -65362,6 +65406,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
           className="t--req"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
               "flexGrow": 1,
             }
@@ -67705,6 +67750,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         htmlFor="input-1547104625"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
           }
         }
@@ -67712,6 +67758,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
         <span
           style={
             Object {
+              "alignItems": "center",
               "display": "flex",
               "marginRight": "0.5em",
             }
@@ -67724,6 +67771,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Birth
           className="t--req"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
               "flexGrow": 1,
             }
@@ -69701,28 +69749,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
 }
 
 .emotion-1 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-1 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-1 .icon::before {
@@ -69731,7 +69783,6 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
 
 .emotion-1 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-1 .tt--info::before {
@@ -69739,27 +69790,35 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
 }
 
 .emotion-1 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-1 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-1 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-16 {
@@ -70009,8 +70068,8 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
           >
             Required
           </span>
-          <span
-            className="tool-tip__wrapper emotion-1"
+          <div
+            className="emotion-1"
           >
             <div
               className="icon"
@@ -70020,7 +70079,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
             >
               This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
             </div>
-          </span>
+          </div>
         </div>
         <label
           className="ra  "
@@ -70298,8 +70357,8 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
             >
               Required
             </span>
-            <span
-              className="tool-tip__wrapper emotion-1"
+            <div
+              className="emotion-1"
             >
               <div
                 className="icon"
@@ -70309,7 +70368,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
               >
                 This information is collected as required by the Massachusetts State Marriage Intention Form.
               </div>
-            </span>
+            </div>
           </div>
           <label
             className="ra  "
@@ -70457,6 +70516,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
           htmlFor="input-234553913"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -70464,6 +70524,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
               }
@@ -70476,6 +70537,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Marria
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -70656,28 +70718,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 }
 
 .emotion-2 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-2 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-2 .icon::before {
@@ -70686,7 +70752,6 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 
 .emotion-2 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-2 .tt--info::before {
@@ -70694,27 +70759,35 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 }
 
 .emotion-2 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-2 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-2 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-14 {
@@ -70832,6 +70905,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-2048906072"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -70839,6 +70913,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -70851,6 +70926,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -70881,6 +70957,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-2852212527"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -70888,6 +70965,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -70923,6 +71001,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-1103291528"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -70930,6 +71009,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -70942,6 +71022,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -70998,8 +71079,8 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
           >
             Required
           </span>
-          <span
-            className="tool-tip__wrapper emotion-2"
+          <div
+            className="emotion-2"
           >
             <div
               className="icon"
@@ -71009,7 +71090,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
             >
               Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
             </div>
-          </span>
+          </div>
         </div>
         <label
           className="ra  "
@@ -71158,6 +71239,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-2786084594"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -71165,6 +71247,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -71177,14 +71260,15 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-2"
+        <div
+          className="emotion-2"
         >
           <div
             className="icon"
@@ -71194,7 +71278,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
           >
             This information is collected as required by the Massachusetts State Marriage Intention Form.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <input
@@ -71367,28 +71451,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 }
 
 .emotion-2 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-2 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-2 .icon::before {
@@ -71397,7 +71485,6 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 
 .emotion-2 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-2 .tt--info::before {
@@ -71405,27 +71492,35 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
 }
 
 .emotion-2 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-2 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-2 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-17 {
@@ -71596,6 +71691,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-2048906072"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -71603,6 +71699,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -71615,6 +71712,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -71645,6 +71743,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-2852212527"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -71652,6 +71751,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -71687,6 +71787,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-1103291528"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -71694,6 +71795,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -71706,6 +71808,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
@@ -71762,8 +71865,8 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
           >
             Required
           </span>
-          <span
-            className="tool-tip__wrapper emotion-2"
+          <div
+            className="emotion-2"
           >
             <div
               className="icon"
@@ -71773,7 +71876,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
             >
               Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
             </div>
-          </span>
+          </div>
         </div>
         <label
           className="ra  "
@@ -71821,6 +71924,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         htmlFor="input-238872936"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
           }
         }
@@ -71828,6 +71932,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         <span
           style={
             Object {
+              "alignItems": "center",
               "display": "flex",
               "marginRight": "0.5em",
             }
@@ -71840,14 +71945,15 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
           className="t--req"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
               "flexGrow": 1,
             }
           }
         >
           Required
-          <span
-            className="tool-tip__wrapper emotion-2"
+          <div
+            className="emotion-2"
           >
             <div
               className="icon"
@@ -71857,7 +71963,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
             >
               Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
             </div>
-          </span>
+          </div>
         </span>
       </label>
       <label
@@ -71993,6 +72099,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       htmlFor="input-2786084594"
       style={
         Object {
+          "alignItems": "baseline",
           "display": "flex",
         }
       }
@@ -72000,6 +72107,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
       <span
         style={
           Object {
+            "alignItems": "center",
             "display": "flex",
             "marginRight": "0.5em",
           }
@@ -72012,14 +72120,15 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
         className="t--req"
         style={
           Object {
+            "alignItems": "baseline",
             "display": "flex",
             "flexGrow": 1,
           }
         }
       >
         Required
-        <span
-          className="tool-tip__wrapper emotion-2"
+        <div
+          className="emotion-2"
         >
           <div
             className="icon"
@@ -72029,7 +72138,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Naming
           >
             This information is collected as required by the Massachusetts State Marriage Intention Form.
           </div>
-        </span>
+        </div>
       </span>
     </label>
     <input
@@ -72089,28 +72198,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
 }
 
 .emotion-1 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-1 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-1 .icon::before {
@@ -72119,7 +72232,6 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
 
 .emotion-1 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-1 .tt--info::before {
@@ -72127,27 +72239,35 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
 }
 
 .emotion-1 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-1 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-1 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-242 {
@@ -72409,8 +72529,8 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
             }
           >
             Required
-            <span
-              className="tool-tip__wrapper emotion-1"
+            <div
+              className="emotion-1"
             >
               <div
                 className="icon"
@@ -72420,7 +72540,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
               >
                 If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
               </div>
-            </span>
+            </div>
           </span>
         </label>
         <div
@@ -74248,6 +74368,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           htmlFor="input-2580217931"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -74255,6 +74376,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
               }
@@ -74267,6 +74389,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -74303,6 +74426,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           htmlFor="input-770365431"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -74310,6 +74434,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
               }
@@ -74322,6 +74447,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -74359,6 +74485,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           htmlFor="input-2413436367"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -74366,6 +74493,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
               }
@@ -74378,6 +74506,7 @@ exports[`Storyshots Marriage Intention/Form Components Step 2. Person 1 - Reside
             className="t--req"
             style={
               Object {
+                "alignItems": "baseline",
                 "display": "flex",
                 "flexGrow": 1,
               }
@@ -75018,28 +75147,32 @@ exports[`Storyshots Marriage Intention/Form Components Step 5. Review/Person Inf
 
 exports[`Storyshots Marriage Intention/Form Components Tool-Tip 1`] = `
 .emotion-0 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-0 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-0 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-0 .icon::before {
@@ -75048,7 +75181,6 @@ exports[`Storyshots Marriage Intention/Form Components Tool-Tip 1`] = `
 
 .emotion-0 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-0 .tt--info::before {
@@ -75056,27 +75188,35 @@ exports[`Storyshots Marriage Intention/Form Components Tool-Tip 1`] = `
 }
 
 .emotion-0 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-0 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-0 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-2 {
@@ -75085,8 +75225,8 @@ exports[`Storyshots Marriage Intention/Form Components Tool-Tip 1`] = `
 
 <div>
   <div>
-    <span
-      className="tool-tip__wrapper emotion-0"
+    <div
+      className="emotion-0"
     >
       <div
         className="icon"
@@ -75096,23 +75236,23 @@ exports[`Storyshots Marriage Intention/Form Components Tool-Tip 1`] = `
       >
         This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
       </div>
-    </span>
+    </div>
   </div>
   <div
     className="emotion-2"
   >
-    <span
-      className="tool-tip__wrapper emotion-0"
+    <div
+      className="emotion-0"
     >
       <div
-        className="icon"
+        className="icon tt--info"
       />
       <div
         className="msg"
       >
         This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
       </div>
-    </span>
+    </div>
   </div>
 </div>
 `;
@@ -75780,7 +75920,7 @@ Array [
                         Parents' names (including their family names) and whether they were married when you were born
                       </li>
                       <li>
-                        While a social security number is not required to get married in the City of Boston, if you do have one, it can simplify the process
+                        A social security number is not required to complete the online Marriage Intention Form, however United States citizens will be required to have their social security number for their in-person appointment.
                       </li>
                       <li>
                         Your immigration status is not required to get married in the City of Boston
@@ -76429,28 +76569,32 @@ Array [
 }
 
 .emotion-7 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-7 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-7 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-7 .icon::before {
@@ -76459,7 +76603,6 @@ Array [
 
 .emotion-7 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-7 .tt--info::before {
@@ -76467,27 +76610,35 @@ Array [
 }
 
 .emotion-7 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-7 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-7 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-19 {
@@ -76797,28 +76948,32 @@ Array [
 }
 
 .emotion-524 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-524 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-524 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-524 .icon::before {
@@ -76827,7 +76982,6 @@ Array [
 
 .emotion-524 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-524 .tt--info::before {
@@ -76835,27 +76989,35 @@ Array [
 }
 
 .emotion-524 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-524 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-524 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-533 {
@@ -77286,6 +77448,7 @@ Array [
                         htmlFor="input-2048906072"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -77293,6 +77456,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -77305,6 +77469,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -77335,6 +77500,7 @@ Array [
                         htmlFor="input-2852212527"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -77342,6 +77508,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -77377,6 +77544,7 @@ Array [
                         htmlFor="input-1103291528"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -77384,6 +77552,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -77396,6 +77565,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -77452,8 +77622,8 @@ Array [
                             >
                               Required
                             </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
+                            <div
+                              className="emotion-7"
                             >
                               <div
                                 className="icon"
@@ -77463,7 +77633,7 @@ Array [
                               >
                                 Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
                               </div>
-                            </span>
+                            </div>
                           </div>
                           <label
                             className="ra  "
@@ -77610,6 +77780,7 @@ Array [
                         htmlFor="input-2786084594"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -77617,6 +77788,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -77629,14 +77801,15 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
                           }
                         >
                           Required
-                          <span
-                            className="tool-tip__wrapper emotion-7"
+                          <div
+                            className="emotion-7"
                           >
                             <div
                               className="icon"
@@ -77646,7 +77819,7 @@ Array [
                             >
                               This information is collected as required by the Massachusetts State Marriage Intention Form.
                             </div>
-                          </span>
+                          </div>
                         </span>
                       </label>
                       <input
@@ -79339,8 +79512,8 @@ Array [
                               }
                             >
                               Required
-                              <span
-                                className="tool-tip__wrapper emotion-7"
+                              <div
+                                className="emotion-7"
                               >
                                 <div
                                   className="icon"
@@ -79350,7 +79523,7 @@ Array [
                                 >
                                   If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
                                 </div>
-                              </span>
+                              </div>
                             </span>
                           </label>
                           <div
@@ -80856,8 +81029,8 @@ Array [
                             >
                               Required
                             </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
+                            <div
+                              className="emotion-7"
                             >
                               <div
                                 className="icon"
@@ -80867,7 +81040,7 @@ Array [
                               >
                                 This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
                               </div>
-                            </span>
+                            </div>
                           </div>
                           <label
                             className="ra  "
@@ -81008,8 +81181,8 @@ Array [
                               >
                                 Required
                               </span>
-                              <span
-                                className="tool-tip__wrapper emotion-7"
+                              <div
+                                className="emotion-7"
                               >
                                 <div
                                   className="icon"
@@ -81019,7 +81192,7 @@ Array [
                                 >
                                   This information is collected as required by the Massachusetts State Marriage Intention Form.
                                 </div>
-                              </span>
+                              </div>
                             </div>
                             <label
                               className="ra  "
@@ -81086,8 +81259,8 @@ Array [
                         className="notice"
                       >
                         Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
-                        <span
-                          className="tool-tip__wrapper emotion-524"
+                        <div
+                          className="emotion-524"
                         >
                           <div
                             className="icon"
@@ -81097,7 +81270,7 @@ Array [
                           >
                             This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
                           </div>
-                        </span>
+                        </div>
                       </div>
                     </h1>
                     <span />
@@ -81110,6 +81283,7 @@ Array [
                           htmlFor="input-507056287"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                             }
                           }
@@ -81117,6 +81291,7 @@ Array [
                           <span
                             style={
                               Object {
+                                "alignItems": "center",
                                 "display": "flex",
                                 "marginRight": "0.5em",
                               }
@@ -81129,6 +81304,7 @@ Array [
                             className="t--req"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                                 "flexGrow": 1,
                               }
@@ -81159,6 +81335,7 @@ Array [
                           htmlFor="input-4196106810"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                             }
                           }
@@ -81166,6 +81343,7 @@ Array [
                           <span
                             style={
                               Object {
+                                "alignItems": "center",
                                 "display": "flex",
                                 "marginRight": "0.5em",
                               }
@@ -81178,6 +81356,7 @@ Array [
                             className="t--req"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                                 "flexGrow": 1,
                               }
@@ -81309,8 +81488,8 @@ Array [
                                   >
                                     Required
                                   </span>
-                                  <span
-                                    className="tool-tip__wrapper emotion-7"
+                                  <div
+                                    className="emotion-7"
                                   >
                                     <div
                                       className="icon"
@@ -81320,7 +81499,7 @@ Array [
                                     >
                                       This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
                                     </div>
-                                  </span>
+                                  </div>
                                 </div>
                                 <label
                                   className="ra  "
@@ -82006,28 +82185,32 @@ Array [
 }
 
 .emotion-7 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-7 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-7 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-7 .icon::before {
@@ -82036,7 +82219,6 @@ Array [
 
 .emotion-7 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-7 .tt--info::before {
@@ -82044,27 +82226,35 @@ Array [
 }
 
 .emotion-7 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-7 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-7 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-19 {
@@ -82374,28 +82564,32 @@ Array [
 }
 
 .emotion-524 {
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 5px 0 0 0;
+}
+
+.emotion-524 .wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-524 .icon {
+  background: #1871bd;
+  line-height: normal;
+  color: white;
+  font-size: 0.5rem;
+  text-align: center;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  font-size: 0.75rem;
-  background: #1871bd;
-  margin: 5px 0px 0 5px;
-  padding: 5.4px 0 0 3.00px;
-  line-height: 0px;
-  font-size: 8px;
-  color: white;
 }
 
 .emotion-524 .icon::before {
@@ -82404,7 +82598,6 @@ Array [
 
 .emotion-524 .tt--info {
   text-transform: lowercase;
-  padding-left: 3.5px;
 }
 
 .emotion-524 .tt--info::before {
@@ -82412,27 +82605,35 @@ Array [
 }
 
 .emotion-524 .msg {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  visibility: hidden;
-  z-index: 2;
+  display: none;
+  position: absolute;
+  line-height: normal;
+  z-index: 1000;
+  left: 110%;
+  top: -10%;
+  min-width: 250px;
+  max-width: 300px;
   padding: 0.25em 0.5em;
-  color: #58585b;
-  font-family: Lora,Georgia,serif;
   font-weight: 300;
   font-style: italic;
+  font-size: calc(14px + 2 * ((100vw - 480px) / 960));
+  text-align: left;
   text-transform: initial;
-  background-color: #f3f3f3;
-  min-width: 150px;
-  position: absolute;
-  margin-left: 20px;
-  top: calc(-30% + 1px);
+  background: #f3f3f3;
+  color: #58585b;
+  font-family: Lora,Georgia,serif;
 }
 
 .emotion-524 .icon:hover + .msg {
-  visibility: visible;
+  display: block;
+}
+
+@media screen and (max-width:480px) {
+  .emotion-524 .msg {
+    -webkit-transform: translate(-51%,-95%);
+    -ms-transform: translate(-51%,-95%);
+    transform: translate(-51%,-95%);
+  }
 }
 
 .emotion-533 {
@@ -82863,6 +83064,7 @@ Array [
                         htmlFor="input-2048906072"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -82870,6 +83072,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -82882,6 +83085,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -82912,6 +83116,7 @@ Array [
                         htmlFor="input-2852212527"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -82919,6 +83124,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -82954,6 +83160,7 @@ Array [
                         htmlFor="input-1103291528"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -82961,6 +83168,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -82973,6 +83181,7 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
@@ -83029,8 +83238,8 @@ Array [
                             >
                               Required
                             </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
+                            <div
+                              className="emotion-7"
                             >
                               <div
                                 className="icon"
@@ -83040,7 +83249,7 @@ Array [
                               >
                                 Examples: Use your future spouse’s last name, use a two-part last name, or create a new last name.
                               </div>
-                            </span>
+                            </div>
                           </div>
                           <label
                             className="ra  "
@@ -83187,6 +83396,7 @@ Array [
                         htmlFor="input-2786084594"
                         style={
                           Object {
+                            "alignItems": "baseline",
                             "display": "flex",
                           }
                         }
@@ -83194,6 +83404,7 @@ Array [
                         <span
                           style={
                             Object {
+                              "alignItems": "center",
                               "display": "flex",
                               "marginRight": "0.5em",
                             }
@@ -83206,14 +83417,15 @@ Array [
                           className="t--req"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                               "flexGrow": 1,
                             }
                           }
                         >
                           Required
-                          <span
-                            className="tool-tip__wrapper emotion-7"
+                          <div
+                            className="emotion-7"
                           >
                             <div
                               className="icon"
@@ -83223,7 +83435,7 @@ Array [
                             >
                               This information is collected as required by the Massachusetts State Marriage Intention Form.
                             </div>
-                          </span>
+                          </div>
                         </span>
                       </label>
                       <input
@@ -84916,8 +85128,8 @@ Array [
                               }
                             >
                               Required
-                              <span
-                                className="tool-tip__wrapper emotion-7"
+                              <div
+                                className="emotion-7"
                               >
                                 <div
                                   className="icon"
@@ -84927,7 +85139,7 @@ Array [
                                 >
                                   If your mailing address differs from your residential one, you can provide your preferred address with the Registry during your appointment.
                                 </div>
-                              </span>
+                              </div>
                             </span>
                           </label>
                           <div
@@ -86433,8 +86645,8 @@ Array [
                             >
                               Required
                             </span>
-                            <span
-                              className="tool-tip__wrapper emotion-7"
+                            <div
+                              className="emotion-7"
                             >
                               <div
                                 className="icon"
@@ -86444,7 +86656,7 @@ Array [
                               >
                                 This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
                               </div>
-                            </span>
+                            </div>
                           </div>
                           <label
                             className="ra  "
@@ -86585,8 +86797,8 @@ Array [
                               >
                                 Required
                               </span>
-                              <span
-                                className="tool-tip__wrapper emotion-7"
+                              <div
+                                className="emotion-7"
                               >
                                 <div
                                   className="icon"
@@ -86596,7 +86808,7 @@ Array [
                                 >
                                   This information is collected as required by the Massachusetts State Marriage Intention Form.
                                 </div>
-                              </span>
+                              </div>
                             </div>
                             <label
                               className="ra  "
@@ -86663,8 +86875,8 @@ Array [
                         className="notice"
                       >
                         Please enter the full names of your parent(s) as they appear on your birth certificate. It’s important to note that marriage licenses contain details about your parents and are accessible as public records, but they cannot be searched for by the general public.
-                        <span
-                          className="tool-tip__wrapper emotion-524"
+                        <div
+                          className="emotion-524"
                         >
                           <div
                             className="icon"
@@ -86674,7 +86886,7 @@ Array [
                           >
                             This information is collected as required by Massachusetts State Law Chapter 46 Section 1. Marriage licenses include parental details and are public records, but not publicly searchable.
                           </div>
-                        </span>
+                        </div>
                       </div>
                     </h1>
                     <span />
@@ -86687,6 +86899,7 @@ Array [
                           htmlFor="input-507056287"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                             }
                           }
@@ -86694,6 +86907,7 @@ Array [
                           <span
                             style={
                               Object {
+                                "alignItems": "center",
                                 "display": "flex",
                                 "marginRight": "0.5em",
                               }
@@ -86706,6 +86920,7 @@ Array [
                             className="t--req"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                                 "flexGrow": 1,
                               }
@@ -86736,6 +86951,7 @@ Array [
                           htmlFor="input-4196106810"
                           style={
                             Object {
+                              "alignItems": "baseline",
                               "display": "flex",
                             }
                           }
@@ -86743,6 +86959,7 @@ Array [
                           <span
                             style={
                               Object {
+                                "alignItems": "center",
                                 "display": "flex",
                                 "marginRight": "0.5em",
                               }
@@ -86755,6 +86972,7 @@ Array [
                             className="t--req"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                                 "flexGrow": 1,
                               }
@@ -86886,8 +87104,8 @@ Array [
                                   >
                                     Required
                                   </span>
-                                  <span
-                                    className="tool-tip__wrapper emotion-7"
+                                  <div
+                                    className="emotion-7"
                                   >
                                     <div
                                       className="icon"
@@ -86897,7 +87115,7 @@ Array [
                                     >
                                       This information is collected as required by Massachusetts State Law Chapter 46 Section 2A. This question ensures that restrictions about impounded records are maintained for marriage information.
                                     </div>
-                                  </span>
+                                  </div>
                                 </div>
                                 <label
                                   className="ra  "
@@ -87967,6 +88185,7 @@ Array [
                             htmlFor="input-2778663327"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                               }
                             }
@@ -87974,6 +88193,7 @@ Array [
                             <span
                               style={
                                 Object {
+                                  "alignItems": "center",
                                   "display": "flex",
                                   "marginRight": "0.5em",
                                   "whiteSpace": "nowrap",
@@ -87987,6 +88207,7 @@ Array [
                               className="t--req"
                               style={
                                 Object {
+                                  "alignItems": "baseline",
                                   "display": "flex",
                                   "flexGrow": 1,
                                 }
@@ -88019,6 +88240,7 @@ Array [
                             htmlFor="input-1813726221"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                               }
                             }
@@ -88026,6 +88248,7 @@ Array [
                             <span
                               style={
                                 Object {
+                                  "alignItems": "center",
                                   "display": "flex",
                                   "marginRight": "0.5em",
                                   "whiteSpace": "nowrap",
@@ -88039,6 +88262,7 @@ Array [
                               className="t--req"
                               style={
                                 Object {
+                                  "alignItems": "baseline",
                                   "display": "flex",
                                   "flexGrow": 1,
                                 }
@@ -88071,6 +88295,7 @@ Array [
                             htmlFor="input-1267882554"
                             style={
                               Object {
+                                "alignItems": "baseline",
                                 "display": "flex",
                               }
                             }
@@ -88078,6 +88303,7 @@ Array [
                             <span
                               style={
                                 Object {
+                                  "alignItems": "center",
                                   "display": "flex",
                                   "marginRight": "0.5em",
                                   "whiteSpace": "nowrap",
@@ -88091,6 +88317,7 @@ Array [
                               className="t--req"
                               style={
                                 Object {
+                                  "alignItems": "baseline",
                                   "display": "flex",
                                   "flexGrow": 1,
                                 }
@@ -101674,6 +101901,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
           htmlFor="input-1103008209"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -101681,6 +101909,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -101713,6 +101942,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 1 1`] = `
           htmlFor="input-5381"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -102352,6 +102582,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
           htmlFor="input-1103008209"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -102359,6 +102590,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -102391,6 +102623,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord person 2 1`] = `
           htmlFor="input-5381"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -103030,6 +103263,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
           htmlFor="input-1103008209"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -103037,6 +103271,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
           <span
             style={
               Object {
+                "alignItems": "center",
                 "display": "flex",
                 "marginRight": "0.5em",
                 "whiteSpace": "nowrap",
@@ -103069,6 +103304,7 @@ exports[`Storyshots Marriage/Question Components/PersonOnRecord self 1`] = `
           htmlFor="input-5381"
           style={
             Object {
+              "alignItems": "baseline",
               "display": "flex",
             }
           }
@@ -107600,6 +107836,7 @@ Array [
                     htmlFor="input-1103008209"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -107607,6 +107844,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
@@ -107639,6 +107877,7 @@ Array [
                     htmlFor="input-5381"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -108659,6 +108898,7 @@ Array [
                     htmlFor="input-1103008209"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
@@ -108666,6 +108906,7 @@ Array [
                     <span
                       style={
                         Object {
+                          "alignItems": "center",
                           "display": "flex",
                           "marginRight": "0.5em",
                           "whiteSpace": "nowrap",
@@ -108698,6 +108939,7 @@ Array [
                     htmlFor="input-5381"
                     style={
                       Object {
+                        "alignItems": "baseline",
                         "display": "flex",
                       }
                     }
diff --git a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
index 78e7da3e9..96b22b86f 100644
--- a/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/FormPages.stories.tsx
@@ -410,7 +410,13 @@ storiesOf('Marriage Intention/Form Components', module)
     return (
       <div>
         <div>{elem}</div>
-        <div css={spacing}>{elem}</div>
+        <div css={spacing}>
+          {ToolTip({
+            icon: 'i',
+            msg:
+              'This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.',
+          })}
+        </div>
       </div>
     );
   });
diff --git a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
index 3bea10673..a006bf19b 100644
--- a/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
+++ b/services-js/registry-certs/client/marriageintention/forms/instructions.tsx
@@ -62,9 +62,10 @@ export default class Instructions extends Component<Props> {
               were married when you were born
             </li>
             <li>
-              While a social security number is not required to get married in
-              the City of Boston, if you do have one, it can simplify the
-              process
+              A social security number is not required to complete the online
+              Marriage Intention Form, however United States citizens will be
+              required to have their social security number for their in-person
+              appointment.
             </li>
 
             <li>