feat: Cleanup of notification pref UI

fix(deps): update dependency @edx/frontend-platform to v8.0.3
fix: use frontend-slot-footer that supports all footer versions
2024-05-22 14:15:38 +05:00 · 2024-05-20 04:39:40 +00:00 · 2024-05-16 16:02:55 -03:00 · 2024-05-16 13:32:47 +05:00 · 2024-05-16 12:53:36 +05:00 · 2024-05-15 16:46:34 -04:00
37 changed files with 3926 additions and 8799 deletions
--- a/.env
+++ b/.env
@@ -13,6 +13,7 @@ LOGIN_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_URL=''
 LOGO_WHITE_URL=''
+SHOW_EMAIL_CHANNEL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
 NODE_ENV=''
--- a/.env.development
+++ b/.env.development
@@ -29,6 +29,7 @@ ENABLE_COPPA_COMPLIANCE=''
 ENABLE_ACCOUNT_DELETION=''
 ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
+SHOW_EMAIL_CHANNEL=''
 APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
--- a/.env.test
+++ b/.env.test
@@ -26,6 +26,7 @@ SUPPORT_URL='http://localhost:18000/support'
 USER_INFO_COOKIE_NAME='edx-user-info'
 ENABLE_COPPA_COMPLIANCE=''
 ENABLE_ACCOUNT_DELETION=''
+SHOW_EMAIL_CHANNEL=''
 ENABLE_DOB_UPDATE=''
 MARKETING_EMAILS_OPT_IN=''
 APP_ID=
--- a/README.rst
+++ b/README.rst
@@ -63,6 +63,12 @@ This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see

   .. image:: ./docs/images/localhost_preview.png

+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Environment Variables/Setup Notes
 =================================

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -28,22 +28,23 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "13.0.4",
-    "@edx/frontend-component-header": "5.0.2",
-    "@edx/frontend-platform": "7.1.2",
+    "@edx/frontend-component-header": "5.3.1",
+    "@edx/frontend-platform": "8.0.3",
    "@edx/openedx-atlas": "^0.6.0",
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-regular-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
    "@openedx/paragon": "22.0.0",
    "@tensorflow-models/blazeface": "0.0.7",
    "@tensorflow/tfjs-converter": "3.21.0",
    "@tensorflow/tfjs-core": "3.21.0",
    "bowser": "2.11.0",
    "classnames": "2.5.1",
-    "core-js": "3.36.0",
+    "core-js": "3.37.0",
    "font-awesome": "4.7.0",
    "form-urlencoded": "6.1.4",
    "formdata-polyfill": "4.0.10",
@@ -61,13 +62,13 @@
    "long": "5.2.3",
    "memoize-one": "5.2.1",
    "prop-types": "15.8.1",
-    "qs": "6.12.0",
+    "qs": "6.12.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-helmet": "6.1.0",
    "react-redux": "7.2.9",
-    "react-router": "6.22.3",
-    "react-router-dom": "6.22.3",
+    "react-router": "6.23.0",
+    "react-router-dom": "6.23.0",
    "react-router-hash-link": "2.4.3",
    "react-scrollspy": "3.4.3",
    "react-transition-group": "4.4.5",
@@ -83,8 +84,8 @@
  "devDependencies": {
    "@edx/browserslist-config": "1.2.0",
    "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "13.0.27",
-    "@testing-library/jest-dom": "6.4.2",
+    "@openedx/frontend-build": "14.0.3",
+    "@testing-library/jest-dom": "6.4.5",
    "@testing-library/react": "12.1.5",
    "react-test-renderer": "17.0.2",
    "reactifex": "1.1.1",
--- a/src/account-settings/certificate-preference/test/snapshots/CertificatePreference.test.jsx.snap
+++ b/src/account-settings/certificate-preference/test/snapshots/CertificatePreference.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`NameChange does not render if there is no verified name 1`] = `
-Object {
+{
  "asFragment": [Function],
  "baseElement": <body>
    <div />
--- a/src/account-settings/delete-account/snapshots/BeforeProceedingBanner.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/BeforeProceedingBanner.test.jsx.snap
@@ -12,14 +12,14 @@ exports[`BeforeProceedingBanner should match the snapshot if SUPPORT_URL_TO_UNLI
      data-prefix="fas"
      focusable="false"
      role="img"
-      style={Object {}}
+      style={{}}
      viewBox="0 0 576 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
        fill="currentColor"
-        style={Object {}}
+        style={{}}
      />
    </svg>
  </div>
@@ -41,14 +41,14 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
      data-prefix="fas"
      focusable="false"
      role="img"
-      style={Object {}}
+      style={{}}
      viewBox="0 0 576 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
        fill="currentColor"
-        style={Object {}}
+        style={{}}
      />
    </svg>
  </div>
--- a/src/account-settings/delete-account/snapshots/ConfirmationModal.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/ConfirmationModal.test.jsx.snap
@@ -3,11 +3,11 @@
 exports[`ConfirmationModal should match default closed confirmation modal snapshot 1`] = `null`;

 exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = `
-Array [
+[
  <div
    data-focus-guard={true}
    style={
-      Object {
+      {
        "height": "0px",
        "left": "1px",
        "overflow": "hidden",
@@ -74,14 +74,14 @@ Array [
                    data-prefix="fas"
                    focusable="false"
                    role="img"
-                    style={Object {}}
+                    style={{}}
                    viewBox="0 0 512 512"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                      fill="currentColor"
-                      style={Object {}}
+                      style={{}}
                    />
                  </svg>
                </div>
@@ -107,14 +107,14 @@ Array [
                    data-prefix="fas"
                    focusable="false"
                    role="img"
-                    style={Object {}}
+                    style={{}}
                    viewBox="0 0 576 512"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                      fill="currentColor"
-                      style={Object {}}
+                      style={{}}
                    />
                  </svg>
                </div>
@@ -190,7 +190,7 @@ Array [
  <div
    data-focus-guard={true}
    style={
-      Object {
+      {
        "height": "0px",
        "left": "1px",
        "overflow": "hidden",
@@ -206,11 +206,11 @@ Array [
 `;

 exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
-Array [
+[
  <div
    data-focus-guard={true}
    style={
-      Object {
+      {
        "height": "0px",
        "left": "1px",
        "overflow": "hidden",
@@ -275,14 +275,14 @@ Array [
                    data-prefix="fas"
                    focusable="false"
                    role="img"
-                    style={Object {}}
+                    style={{}}
                    viewBox="0 0 576 512"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                      fill="currentColor"
-                      style={Object {}}
+                      style={{}}
                    />
                  </svg>
                </div>
@@ -358,7 +358,7 @@ Array [
  <div
    data-focus-guard={true}
    style={
-      Object {
+      {
        "height": "0px",
        "left": "1px",
        "overflow": "hidden",
--- a/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
@@ -102,14 +102,14 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
        data-prefix="fas"
        focusable="false"
        role="img"
-        style={Object {}}
+        style={{}}
        viewBox="0 0 576 512"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
          fill="currentColor"
-          style={Object {}}
+          style={{}}
        />
      </svg>
    </div>
@@ -184,14 +184,14 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
        data-prefix="fas"
        focusable="false"
        role="img"
-        style={Object {}}
+        style={{}}
        viewBox="0 0 576 512"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
          fill="currentColor"
-          style={Object {}}
+          style={{}}
        />
      </svg>
    </div>
--- a/src/account-settings/delete-account/snapshots/SuccessModal.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/SuccessModal.test.jsx.snap
@@ -9,11 +9,11 @@ exports[`SuccessModal should match default closed success modal snapshot 3`] = `
 exports[`SuccessModal should match default closed success modal snapshot 4`] = `null`;

 exports[`SuccessModal should match open success modal snapshot 1`] = `
-Array [
+[
  <div
    data-focus-guard={true}
    style={
-      Object {
+      {
        "height": "0px",
        "left": "1px",
        "overflow": "hidden",
@@ -74,7 +74,7 @@ Array [
  <div
    data-focus-guard={true}
    style={
-      Object {
+      {
        "height": "0px",
        "left": "1px",
        "overflow": "hidden",
--- a/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
+++ b/src/account-settings/demographics/test/snapshots/DemographicsSection.test.jsx.snap
@@ -27,7 +27,7 @@ exports[`DemographicsSection should render 1`] = `
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -63,14 +63,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -99,14 +99,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -127,14 +127,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -163,14 +163,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -198,14 +198,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -234,14 +234,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -262,14 +262,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -298,14 +298,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -326,14 +326,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -362,14 +362,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -390,14 +390,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -426,14 +426,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -454,14 +454,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -490,14 +490,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -518,14 +518,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -554,14 +554,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -582,14 +582,14 @@ exports[`DemographicsSection should render 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -618,14 +618,14 @@ exports[`DemographicsSection should render 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -674,7 +674,7 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -722,14 +722,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -758,14 +758,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -786,14 +786,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -822,14 +822,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -857,14 +857,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -893,14 +893,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -921,14 +921,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -957,14 +957,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -985,14 +985,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1021,14 +1021,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1049,14 +1049,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1085,14 +1085,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1113,14 +1113,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1149,14 +1149,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1177,14 +1177,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1213,14 +1213,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1241,14 +1241,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1277,14 +1277,14 @@ exports[`DemographicsSection should render an Alert if an error occurs 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1333,7 +1333,7 @@ exports[`DemographicsSection should render an Alert when demographicsOptions pro
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -1405,7 +1405,7 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -1441,14 +1441,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1477,14 +1477,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1505,14 +1505,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1541,14 +1541,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1569,14 +1569,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1605,14 +1605,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1633,14 +1633,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1669,14 +1669,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1697,14 +1697,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1733,14 +1733,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1761,14 +1761,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1797,14 +1797,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1825,14 +1825,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1861,14 +1861,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1889,14 +1889,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1925,14 +1925,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -1953,14 +1953,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -1989,14 +1989,14 @@ exports[`DemographicsSection should render ethnicity correctly when multiple opt
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2045,7 +2045,7 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -2081,14 +2081,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2117,14 +2117,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2145,14 +2145,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2181,14 +2181,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2209,14 +2209,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2245,14 +2245,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2273,14 +2273,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2309,14 +2309,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2337,14 +2337,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2373,14 +2373,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2401,14 +2401,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2437,14 +2437,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2465,14 +2465,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2501,14 +2501,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2529,14 +2529,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2565,14 +2565,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2593,14 +2593,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2629,14 +2629,14 @@ exports[`DemographicsSection should render ethnicity text correctly 1`] = `
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2685,7 +2685,7 @@ exports[`DemographicsSection should set user input correctly when user provides
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -2721,14 +2721,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2757,14 +2757,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2785,14 +2785,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2821,14 +2821,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2856,14 +2856,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2892,14 +2892,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2920,14 +2920,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -2956,14 +2956,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -2984,14 +2984,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3020,14 +3020,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3048,14 +3048,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3084,14 +3084,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3112,14 +3112,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3148,14 +3148,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3176,14 +3176,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3212,14 +3212,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3240,14 +3240,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3276,14 +3276,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3332,7 +3332,7 @@ exports[`DemographicsSection should set user input correctly when user provides
          className="pgn__icon"
          data-testid="hyperlink-icon"
          style={
-            Object {
+            {
              "height": "1em",
              "width": "1em",
            }
@@ -3368,14 +3368,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3404,14 +3404,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3432,14 +3432,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3468,14 +3468,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3503,14 +3503,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3539,14 +3539,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3567,14 +3567,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3603,14 +3603,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3631,14 +3631,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3667,14 +3667,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3695,14 +3695,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3731,14 +3731,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3759,14 +3759,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3795,14 +3795,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3823,14 +3823,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3859,14 +3859,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
@@ -3887,14 +3887,14 @@ exports[`DemographicsSection should set user input correctly when user provides
    <div
      className="pgn-transition-replace-group position-relative"
      style={
-        Object {
+        {
          "height": null,
        }
      }
    >
      <div
        style={
-          Object {
+          {
            "padding": ".1px 0",
          }
        }
@@ -3923,14 +3923,14 @@ exports[`DemographicsSection should set user input correctly when user provides
                data-prefix="fas"
                focusable="false"
                role="img"
-                style={Object {}}
+                style={{}}
                viewBox="0 0 512 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
                  fill="currentColor"
-                  style={Object {}}
+                  style={{}}
                />
              </svg>
              Edit
--- a/src/account-settings/site-language/constants.js
+++ b/src/account-settings/site-language/constants.js
@@ -99,6 +99,36 @@ const siteLanguageList = [
    name: 'French (CA)',
    released: true,
  },
+  {
+    code: 'te',
+    name: 'తెలుగు',
+    released: true,
+  },
+  {
+    code: 'da',
+    name: 'dansk',
+    released: true,
+  },
+  {
+    code: 'el',
+    name: 'Ελληνικά',
+    released: true,
+  },
+  {
+    code: 'es-es',
+    name: 'Español (España)',
+    released: true,
+  },
+  {
+    code: 'sw',
+    name: 'Kiswahili',
+    released: true,
+  },
+  {
+    code: 'tr-tr',
+    name: 'Türkçe (Türkiye)',
+    released: true,
+  },
 ];

 export default siteLanguageList;
--- a/src/account-settings/test/snapshots/EditableSelectField.test.jsx.snap
+++ b/src/account-settings/test/snapshots/EditableSelectField.test.jsx.snap
@@ -4,14 +4,14 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
 <div
  className="pgn-transition-replace-group position-relative"
  style={
-    Object {
+    {
      "height": null,
    }
  }
 >
  <div
    style={
-      Object {
+      {
        "padding": ".1px 0",
      }
    }
@@ -40,14 +40,14 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
            data-prefix="fas"
            focusable="false"
            role="img"
-            style={Object {}}
+            style={{}}
            viewBox="0 0 512 512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
-              style={Object {}}
+              style={{}}
            />
          </svg>
          Edit
@@ -73,14 +73,14 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
 <div
  className="pgn-transition-replace-group position-relative"
  style={
-    Object {
+    {
      "height": null,
    }
  }
 >
  <div
    style={
-      Object {
+      {
        "padding": ".1px 0",
      }
    }
@@ -212,14 +212,14 @@ exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
 <div
  className="pgn-transition-replace-group position-relative"
  style={
-    Object {
+    {
      "height": null,
    }
  }
 >
  <div
    style={
-      Object {
+      {
        "padding": ".1px 0",
      }
    }
@@ -248,14 +248,14 @@ exports[`EditableSelectField renders EditableSelectField with an error 1`] = `
            data-prefix="fas"
            focusable="false"
            role="img"
-            style={Object {}}
+            style={{}}
            viewBox="0 0 512 512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
-              style={Object {}}
+              style={{}}
            />
          </svg>
          Edit
@@ -281,14 +281,14 @@ exports[`EditableSelectField renders selectOptions when option does not have a g
 <div
  className="pgn-transition-replace-group position-relative"
  style={
-    Object {
+    {
      "height": null,
    }
  }
 >
  <div
    style={
-      Object {
+      {
        "padding": ".1px 0",
      }
    }
@@ -317,14 +317,14 @@ exports[`EditableSelectField renders selectOptions when option does not have a g
            data-prefix="fas"
            focusable="false"
            role="img"
-            style={Object {}}
+            style={{}}
            viewBox="0 0 512 512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
-              style={Object {}}
+              style={{}}
            />
          </svg>
          Edit
@@ -350,14 +350,14 @@ exports[`EditableSelectField renders selectOptions when option has a group 1`] =
 <div
  className="pgn-transition-replace-group position-relative"
  style={
-    Object {
+    {
      "height": null,
    }
  }
 >
  <div
    style={
-      Object {
+      {
        "padding": ".1px 0",
      }
    }
@@ -386,14 +386,14 @@ exports[`EditableSelectField renders selectOptions when option has a group 1`] =
            data-prefix="fas"
            focusable="false"
            role="img"
-            style={Object {}}
+            style={{}}
            viewBox="0 0 512 512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
-              style={Object {}}
+              style={{}}
            />
          </svg>
          Edit
@@ -419,14 +419,14 @@ exports[`EditableSelectField renders selectOptions with multiple groups 1`] = `
 <div
  className="pgn-transition-replace-group position-relative"
  style={
-    Object {
+    {
      "height": null,
    }
  }
 >
  <div
    style={
-      Object {
+      {
        "padding": ".1px 0",
      }
    }
@@ -455,14 +455,14 @@ exports[`EditableSelectField renders selectOptions with multiple groups 1`] = `
            data-prefix="fas"
            focusable="false"
            role="img"
-            style={Object {}}
+            style={{}}
            viewBox="0 0 512 512"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"
              fill="currentColor"
-              style={Object {}}
+              style={{}}
            />
          </svg>
          Edit
--- a/src/account-settings/test/snapshots/JumpNav.test.jsx.snap
+++ b/src/account-settings/test/snapshots/JumpNav.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`JumpNav should not render Optional Information or delete account link 1
    >
      <ul
        className="list-unstyled"
-        style={Object {}}
+        style={{}}
      >
        <li
          className=""
@@ -97,7 +97,7 @@ exports[`JumpNav should render Optional Information and delete account link 1`]
    >
      <ul
        className="list-unstyled"
-        style={Object {}}
+        style={{}}
      >
        <li
          className=""
--- a/src/hooks.js
+++ b/src/hooks.js
@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
+
 import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
+import { breakpoints, useWindowSize } from '@openedx/paragon';

 import {
  IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS,
@@ -66,3 +68,8 @@ export function useFeedbackWrapper() {
    }
  }, []);
 }
+
+export function useIsOnMobile() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= breakpoints.small.minWidth;
+}
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -11,7 +11,7 @@ import ReactDOM from 'react-dom';
 import { Route, Routes, Outlet } from 'react-router-dom';

 import Header from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';

 import configureStore from './data/configureStore';
 import AccountSettingsPage, { NotFoundPage } from './account-settings';
@@ -34,7 +34,7 @@ subscribe(APP_READY, () => {
            <main className="flex-grow-1" id="main">
              <Outlet />
            </main>
-            <Footer />
+            <FooterSlot />
          </div>
        )}
        >
@@ -65,6 +65,7 @@ initialize({
        SUPPORT_URL: process.env.SUPPORT_URL,
        ENABLE_DEMOGRAPHICS_COLLECTION: (process.env.ENABLE_DEMOGRAPHICS_COLLECTION || false),
        DEMOGRAPHICS_BASE_URL: process.env.DEMOGRAPHICS_BASE_URL,
+        SHOW_EMAIL_CHANNEL: process.env.SHOW_EMAIL_CHANNEL || 'false',
        ENABLE_COPPA_COMPLIANCE: (process.env.ENABLE_COPPA_COMPLIANCE || false),
        ENABLE_ACCOUNT_DELETION: (process.env.ENABLE_ACCOUNT_DELETION !== 'false'),
        ENABLE_DOB_UPDATE: (process.env.ENABLE_DOB_UPDATE || false),
--- a/src/index.scss
+++ b/src/index.scss
@@ -84,11 +84,49 @@ $fa-font-path: "~font-awesome/fonts";
    color: #707070;
  }

+  .preference-app {
+    font-size: 18px;
+  }
+
+  .column-padding {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
  .notification-course-title {
    line-height: 28px;
    font-weight: 700;
    font-size: 18px;
  }
+
+  .font-size-14 {
+    font-size: 14px !important;
+  }
+
+  .cadence-button {
+    width: 134px;
+    height: 36px;
+    font-weight: 500;
+  }
+
+  .channel-column:last-child {
+    border-right: 0px !important;
+  }
+
+  .dropdown-item:active,
+  .dropdown-item:focus, 
+  .btn-tertiary:not(:disabled):not(.disabled).active {
+    background-color: $light-300 !important;
+  }
+
+
+  .line-height-36 {
+    line-height: 36px;
+  }
+
+  .h-4\.5 {
+    height: 36px;
+  }
 }

 .usabilla_live_button_container {
@@ -102,3 +140,15 @@ $fa-font-path: "~font-awesome/fonts";
    transform: rotate(270deg) !important;
  }
 }
+
+@media screen and (max-width: 425px) {
+   .column-padding{
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .margin-bottom-32{
+    margin-bottom: 32px !important;
+  }
+}
+
--- a/src/notification-preferences/EmailCadences.jsx
+++ b/src/notification-preferences/EmailCadences.jsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import {
+  Button, Dropdown, ModalPopup, useToggle,
+} from '@openedx/paragon';
+
+import messages from './messages';
+import EMAIL_CADENCE from './data/constants';
+
+const EmailCadences = ({
+  email, onToggle, emailCadence, notificationType,
+}) => {
+  const intl = useIntl();
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
+
+  return (
+    <>
+      <Button
+        ref={setTarget}
+        variant="outline-primary"
+        onClick={open}
+        disabled={!email}
+        size="sm"
+        iconAfter={isOpen ? ExpandLess : ExpandMore}
+        className="border-light-300 justify-content-between ml-3.5 cadence-button"
+      >
+        {intl.formatMessage(messages.emailCadence, { text: emailCadence })}
+      </Button>
+      <ModalPopup
+        onClose={close}
+        positionRef={target}
+        isOpen={isOpen}
+      >
+        <div
+          className="bg-white shadow d-flex flex-column margin-left-2"
+          data-testid="email-cadence-dropdown"
+        >
+          {Object.values(EMAIL_CADENCE).map((cadence) => (
+            <Dropdown.Item
+              key={cadence}
+              as={Button}
+              variant="tertiary"
+              name="email_cadence"
+              className="d-flex justify-content-start py-1.5 font-size-14 cadence-button"
+              size="inline"
+              active={cadence === emailCadence}
+              autoFocus={cadence === emailCadence}
+              onClick={(event) => {
+                onToggle(event, notificationType);
+                close();
+              }}
+            >
+              {intl.formatMessage(messages.emailCadence, { text: cadence })}
+            </Dropdown.Item>
+          ))}
+        </div>
+      </ModalPopup>
+    </>
+  );
+};
+
+EmailCadences.propTypes = {
+  email: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  emailCadence: PropTypes.oneOf(Object.values(EMAIL_CADENCE)).isRequired,
+  notificationType: PropTypes.string.isRequired,
+};
+
+export default React.memo(EmailCadences);
--- a/src/notification-preferences/NotificationCourses.jsx
+++ b/src/notification-preferences/NotificationCourses.jsx
@@ -1,21 +1,20 @@
-import React, { useEffect, useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useCallback, useEffect } from 'react';
+
 import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { ArrowForwardIos } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Container, Icon, Spinner, Button,
+  Button, Container, Icon, Spinner,
 } from '@openedx/paragon';
-import { ArrowForwardIos } from '@openedx/paragon/icons';
-import { fetchCourseList } from './data/thunks';
-import { selectCourseListStatus, selectCourseList, selectPagination } from './data/selectors';
-import {
-  IDLE_STATUS,
-  LOADING_STATUS,
-  SUCCESS_STATUS,
-} from '../constants';
+
 import messages from './messages';
-import { NotFoundPage } from '../account-settings';
 import { useFeedbackWrapper } from '../hooks';
+import { fetchCourseList } from './data/thunks';
+import { NotFoundPage } from '../account-settings';
+import { IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS } from '../constants';
+import { selectCourseList, selectCourseListStatus, selectPagination } from './data/selectors';

 const NotificationCourses = ({ intl }) => {
  useFeedbackWrapper();
--- a/src/notification-preferences/NotificationCourses.test.jsx
+++ b/src/notification-preferences/NotificationCourses.test.jsx
@@ -1,12 +1,14 @@
 /* eslint-disable no-import-assign */
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
-import { render, screen } from '@testing-library/react';
-import * as auth from '@edx/frontend-platform/auth';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { BrowserRouter as Router } from 'react-router-dom';
-import NotificationCourses from './NotificationCourses';
+
+import * as auth from '@edx/frontend-platform/auth';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
 import { defaultState } from './data/reducers';
+import NotificationCourses from './NotificationCourses';
 import { LOADING_STATUS, SUCCESS_STATUS } from '../constants';

 const mockStore = configureStore();
--- a/src/notification-preferences/NotificationPreferenceApp.jsx
+++ b/src/notification-preferences/NotificationPreferenceApp.jsx
@@ -1,103 +1,66 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
+
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible, NavItem } from '@openedx/paragon';
 import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Collapsible } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
 import messages from './messages';
+import { useIsOnMobile } from '../hooks';
 import ToggleSwitch from './ToggleSwitch';
-import {
-  selectPreferenceAppToggleValue,
-  selectNonEditablePreferences,
-  selectPreferencesOfApp,
-  selectSelectedCourseId,
-  selectUpdatePreferencesStatus,
-} from './data/selectors';
-import NotificationPreferenceRow from './NotificationPreferenceRow';
-import { updateAppPreferenceToggle, updateChannelPreferenceToggle } from './data/thunks';
 import { LOADING_STATUS } from '../constants';
-import NOTIFICATION_CHANNELS from './data/constants';
+import NotificationTypes from './NotificationTypes';
+import { notificationChannels } from './data/utils';
+import { updateAppPreferenceToggle } from './data/thunks';
+import NotificationPreferenceColumn from './NotificationPreferenceColumn';
+import { selectPreferenceAppToggleValue, selectSelectedCourseId, selectUpdatePreferencesStatus } from './data/selectors';

 const NotificationPreferenceApp = ({ appId }) => {
  const dispatch = useDispatch();
  const intl = useIntl();
  const courseId = useSelector(selectSelectedCourseId());
-  const appPreferences = useSelector(selectPreferencesOfApp(appId));
  const appToggle = useSelector(selectPreferenceAppToggleValue(appId));
  const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
-  const nonEditable = useSelector(selectNonEditablePreferences(appId));
-
-  const onChannelToggle = useCallback((event) => {
-    const { id: notificationChannel } = event.target;
-    const isPreferenceNonEditable = (preference) => nonEditable?.[preference.id]?.includes(notificationChannel);
-
-    const hasActivePreferences = appPreferences.some(
-      (preference) => preference[notificationChannel] && !isPreferenceNonEditable(preference),
-    );
-
-    dispatch(updateChannelPreferenceToggle(courseId, appId, notificationChannel, !hasActivePreferences));
-  }, [appId, appPreferences, courseId, dispatch, nonEditable]);
-
-  const preferences = useMemo(() => (
-    appPreferences.map(preference => (
-      <NotificationPreferenceRow
-        key={preference.id}
-        appId={appId}
-        preferenceName={preference.id}
-      />
-    ))), [appId, appPreferences]);
+  const mobileView = useIsOnMobile();
+  const NOTIFICATION_CHANNELS = notificationChannels();

  const onChangeAppSettings = useCallback((event) => {
    dispatch(updateAppPreferenceToggle(courseId, appId, event.target.checked));
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [appId]);
+
  if (!courseId) {
    return null;
  }

  return (
-    <Collapsible.Advanced open={appToggle} data-testid={`${appId}-app`} className="mb-5">
+    <Collapsible.Advanced
+      open={appToggle}
+      data-testid={`${appId}-app`}
+      className={classNames({ 'mb-1': !mobileView && appToggle })}
+    >
      <Collapsible.Trigger>
        <div className="d-flex align-items-center">
-          <span className="mr-auto">
+          <span className="mr-auto preference-app font-weight-bold">
            {intl.formatMessage(messages.notificationAppTitle, { key: appId })}
          </span>
-          <span className="d-flex" id={`${appId}-app-toggle`}>
-            <ToggleSwitch
-              name={appId}
-              value={appToggle}
-              onChange={onChangeAppSettings}
-              disabled={updatePreferencesStatus === LOADING_STATUS}
-            />
-          </span>
+
        </div>
-        <hr className="border-light-400 my-3" />
      </Collapsible.Trigger>
      <Collapsible.Body>
-        <div className="d-flex flex-row header-label">
-          <span className="col-8 px-0">{intl.formatMessage(messages.typeLabel)}</span>
-          <span className="d-flex col-4 px-0">
-            {NOTIFICATION_CHANNELS.map((channel) => (
-              <NavItem
-                id={channel}
-                key={channel}
-                className={classNames(
-                  'd-flex',
-                  { 'ml-auto': channel === 'web' },
-                  { 'mx-auto': channel === 'email' },
-                  { 'ml-auto mr-0': channel === 'push' },
-                )}
-                role="button"
-                onClick={onChannelToggle}
-              >
-                {intl.formatMessage(messages.notificationChannel, { text: channel })}
-              </NavItem>
+        <div className="d-flex flex-row justify-content-between">
+          <NotificationTypes appId={appId} />
+          {!mobileView && (
+          <div className="d-flex">
+            {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
+              <NotificationPreferenceColumn key={channel} appId={appId} channel={channel} />
            ))}
-          </span>
-        </div>
-        <div className="my-3">
-          { preferences }
+          </div>
+          )}
        </div>
+        {mobileView && <hr className="border-light-400 my-4.5" />}
      </Collapsible.Body>
    </Collapsible.Advanced>
  );
--- a/src/notification-preferences/NotificationPreferenceColumn.jsx
+++ b/src/notification-preferences/NotificationPreferenceColumn.jsx
@@ -0,0 +1,117 @@
+import React, { useCallback } from 'react';
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { NavItem } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import { useIsOnMobile } from '../hooks';
+import ToggleSwitch from './ToggleSwitch';
+import EmailCadences from './EmailCadences';
+import { LOADING_STATUS } from '../constants';
+import { updateChannelPreferenceToggle, updatePreferenceToggle } from './data/thunks';
+import {
+  selectNonEditablePreferences, selectPreferencesOfApp, selectSelectedCourseId, selectUpdatePreferencesStatus,
+} from './data/selectors';
+import { notificationChannels, shouldHideAppPreferences } from './data/utils';
+
+const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const courseId = useSelector(selectSelectedCourseId());
+  const appPreferences = useSelector(selectPreferencesOfApp(appId));
+  const nonEditable = useSelector(selectNonEditablePreferences(appId));
+  const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
+  const mobileView = useIsOnMobile();
+  const NOTIFICATION_CHANNELS = Object.values(notificationChannels());
+  const hideAppPreferences = shouldHideAppPreferences(appPreferences, appId) || false;
+
+  const onChannelToggle = useCallback((event) => {
+    const { id: notificationChannel } = event.target;
+    const isPreferenceNonEditable = (preference) => nonEditable?.[preference.id]?.includes(notificationChannel);
+
+    const hasActivePreferences = appPreferences.some(
+      (preference) => preference[notificationChannel] && !isPreferenceNonEditable(preference),
+    );
+
+    dispatch(updateChannelPreferenceToggle(courseId, appId, notificationChannel, !hasActivePreferences));
+  }, [appId, appPreferences, courseId, dispatch, nonEditable]);
+
+  const onToggle = useCallback((event, notificationType) => {
+    const { name: notificationChannel } = event.target;
+    const value = notificationChannel === 'email_cadence' ? event.target.innerText : event.target.checked;
+
+    dispatch(updatePreferenceToggle(
+      courseId,
+      appId,
+      notificationType,
+      notificationChannel,
+      value,
+    ));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appId]);
+
+  const renderPreference = (preference) => (
+    (preference?.coreNotificationTypes?.length > 0 || preference.id !== 'core') && (
+    <div
+      key={`${preference.id}-${channel}`}
+      id={`${preference.id}-${channel}`}
+      className={classNames(
+        'd-flex align-items-center justify-content-center mb-2 h-4.5 column-padding',
+        {
+          'pr-0': channel === NOTIFICATION_CHANNELS[NOTIFICATION_CHANNELS.length - 1],
+          'pl-0': channel === 'web' && mobileView,
+        },
+      )}
+    >
+      <ToggleSwitch
+        name={channel}
+        value={preference[channel]}
+        onChange={(event) => onToggle(event, preference.id)}
+        disabled={nonEditable?.[preference.id]?.includes(channel) || updatePreferencesStatus === LOADING_STATUS}
+        id={`${preference.id}-${channel}`}
+        className="my-1"
+      />
+      {channel === 'email' && (
+      <EmailCadences
+        email={preference.email}
+        onToggle={onToggle}
+        emailCadence={preference.emailCadence}
+        notificationType={preference.id}
+      />
+      )}
+    </div>
+    )
+  );
+
+  return (
+    <div className={classNames('d-flex flex-column border-right channel-column')}>
+      {appPreference
+        ? renderPreference(appPreference)
+        : appPreferences.map((preference) => (renderPreference(preference)))}
+    </div>
+  );
+};
+
+NotificationPreferenceColumn.propTypes = {
+  appId: PropTypes.string.isRequired,
+  channel: PropTypes.string.isRequired,
+  appPreference: PropTypes.shape({
+    id: PropTypes.string,
+    emailCadence: PropTypes.string,
+    appId: PropTypes.string,
+    info: PropTypes.string,
+    email: PropTypes.bool,
+    push: PropTypes.bool,
+    web: PropTypes.bool,
+  }),
+};
+
+NotificationPreferenceColumn.defaultProps = {
+  appPreference: null,
+};
+
+export default React.memo(NotificationPreferenceColumn);
--- a/src/notification-preferences/NotificationPreferenceRow.jsx
+++ b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -1,95 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
-import { InfoOutline } from '@openedx/paragon/icons';
-import messages from './messages';
-import ToggleSwitch from './ToggleSwitch';
-import {
-  selectPreference,
-  selectPreferenceNonEditableChannels,
-  selectSelectedCourseId,
-  selectUpdatePreferencesStatus,
-} from './data/selectors';
-import NOTIFICATION_CHANNELS from './data/constants';
-import { updatePreferenceToggle } from './data/thunks';
-import { LOADING_STATUS } from '../constants';
-
-const NotificationPreferenceRow = ({ appId, preferenceName }) => {
-  const dispatch = useDispatch();
-  const intl = useIntl();
-  const courseId = useSelector(selectSelectedCourseId());
-  const preference = useSelector(selectPreference(appId, preferenceName));
-  const nonEditable = useSelector(selectPreferenceNonEditableChannels(appId, preferenceName));
-  const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
-
-  const onToggle = useCallback((event) => {
-    const {
-      checked,
-      name: notificationChannel,
-    } = event.target;
-    dispatch(updatePreferenceToggle(
-      courseId,
-      appId,
-      preferenceName,
-      notificationChannel,
-      checked,
-    ));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appId, preferenceName]);
-
-  const tooltipId = `${preferenceName}-tooltip`;
-  return (
-    <div className="d-flex mb-3" data-testid="notification-preference">
-      <div className="d-flex align-items-center mr-auto">
-        {intl.formatMessage(messages.notificationTitle, { text: preferenceName })}
-        {preference.info !== '' && (
-          <OverlayTrigger
-            id={tooltipId}
-            className="d-inline"
-            placement="right"
-            overlay={(
-              <Tooltip id={tooltipId}>
-                {preference.info}
-              </Tooltip>
-            )}
-          >
-            <span className="ml-2">
-              <Icon src={InfoOutline} />
-            </span>
-          </OverlayTrigger>
-        )}
-      </div>
-      <div className="d-flex align-items-center">
-        {NOTIFICATION_CHANNELS.map((channel) => (
-          <div
-            id={`${preferenceName}-${channel}`}
-            className={classNames(
-              'd-flex',
-              { 'ml-auto': channel === 'web' },
-              { 'mx-auto': channel === 'email' },
-              { 'ml-auto mr-0': channel === 'push' },
-            )}
-          >
-            <ToggleSwitch
-              name={channel}
-              value={preference[channel]}
-              onChange={onToggle}
-              disabled={nonEditable.includes(channel) || updatePreferencesStatus === LOADING_STATUS}
-              id={`${preferenceName}-${channel}`}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-NotificationPreferenceRow.propTypes = {
-  appId: PropTypes.string.isRequired,
-  preferenceName: PropTypes.string.isRequired,
-};
-
-export default React.memo(NotificationPreferenceRow);
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/src/notification-preferences/NotificationPreferences.jsx
@@ -1,28 +1,24 @@
 import React, { useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+
 import { Link, useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { ArrowBack } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Container, Icon, Spinner, Hyperlink,
+  Container, Hyperlink, Icon, Spinner,
 } from '@openedx/paragon';
-import { ArrowBack } from '@openedx/paragon/icons';
-import {
-  selectCourseListStatus,
-  selectCourse,
-  selectPreferenceAppsId,
-  selectNotificationPreferencesStatus,
-  selectCourseList,
-} from './data/selectors';
-import { fetchCourseList, fetchCourseNotificationPreferences } from './data/thunks';
+
 import messages from './messages';
-import NotificationPreferenceApp from './NotificationPreferenceApp';
-import {
-  FAILURE_STATUS,
-  IDLE_STATUS,
-  LOADING_STATUS,
-  SUCCESS_STATUS,
-} from '../constants';
 import { NotFoundPage } from '../account-settings';
+import NotificationPreferenceApp from './NotificationPreferenceApp';
+import { fetchCourseList, fetchCourseNotificationPreferences } from './data/thunks';
+import {
+  FAILURE_STATUS, IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS,
+} from '../constants';
+import {
+  selectCourse, selectCourseList, selectCourseListStatus, selectNotificationPreferencesStatus, selectPreferenceAppsId,
+} from './data/selectors';

 const NotificationPreferences = () => {
  const { courseId } = useParams();
@@ -61,7 +57,7 @@ const NotificationPreferences = () => {
      <h2 className="notification-heading mt-6 mb-4.5">
        {intl.formatMessage(messages.notificationHeading)}
      </h2>
-      <div className="mb-6 text-gray-700">
+      <div className="mb-6 text-gray-700 font-size-14 margin-bottom-32">
        {intl.formatMessage(messages.notificationPreferenceGuideBody)}
        <Hyperlink
          destination="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/managing_notifications.html"
--- a/src/notification-preferences/NotificationPreferences.test.jsx
+++ b/src/notification-preferences/NotificationPreferences.test.jsx
@@ -1,14 +1,16 @@
 /* eslint-disable no-import-assign */
 import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
-import {
-  fireEvent, render, screen, waitFor, act, within,
-} from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import NotificationPreferences from './NotificationPreferences';
+import {
+  act, fireEvent, render, screen, waitFor, within,
+} from '@testing-library/react';
+
 import { defaultState } from './data/reducers';
+import NotificationPreferences from './NotificationPreferences';
 import { FAILURE_STATUS, LOADING_STATUS, SUCCESS_STATUS } from '../constants';

 const courseId = 'selected-course-id';
@@ -36,6 +38,7 @@ const defaultPreferences = {
      web: true,
      push: true,
      email: true,
+      coreNotificationTypes: ['new_comment'],
    },
    {
      id: 'newComment',
@@ -43,6 +46,7 @@ const defaultPreferences = {
      web: false,
      push: false,
      email: false,
+      coreNotificationTypes: [],
    },
    {
      id: 'newAssignment',
@@ -50,6 +54,7 @@ const defaultPreferences = {
      web: false,
      push: false,
      email: false,
+      coreNotificationTypes: [],
    },
    {
      id: 'newGrade',
@@ -57,6 +62,7 @@ const defaultPreferences = {
      web: false,
      push: false,
      email: false,
+      coreNotificationTypes: [],
    },
  ],
  nonEditable: {
@@ -70,9 +76,15 @@ const defaultPreferences = {

 const updateChannelPreferences = (toggleVal = false) => ({
  preferences: [
-    { id: 'core', appId: 'discussion', web: true },
-    { id: 'newComment', appId: 'discussion', web: toggleVal },
-    { id: 'newAssignment', appId: 'coursework', web: toggleVal },
+    {
+      id: 'core', appId: 'discussion', web: true, coreNotificationTypes: ['new_comment'],
+    },
+    {
+      id: 'newComment', appId: 'discussion', web: toggleVal, coreNotificationTypes: [],
+    },
+    {
+      id: 'newAssignment', appId: 'coursework', web: toggleVal, coreNotificationTypes: [],
+    },
  ],
 });

--- a/src/notification-preferences/NotificationTypes.jsx
+++ b/src/notification-preferences/NotificationTypes.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import { InfoOutline } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+
+import messages from './messages';
+import { useIsOnMobile } from '../hooks';
+import { notificationChannels, shouldHideAppPreferences } from './data/utils';
+
+import { selectPreferencesOfApp } from './data/selectors';
+import NotificationPreferenceColumn from './NotificationPreferenceColumn';
+
+const NotificationTypes = ({ appId }) => {
+  const intl = useIntl();
+  const preferences = useSelector(selectPreferencesOfApp(appId));
+  const mobileView = useIsOnMobile();
+  const NOTIFICATION_CHANNELS = notificationChannels();
+  const hideAppPreferences = shouldHideAppPreferences(preferences, appId) || false;
+
+  return (
+    <div className="d-flex flex-column mr-auto px-0">
+      {preferences.map(preference => (
+        (preference?.coreNotificationTypes?.length > 0 || preference.id !== 'core') && (
+        <>
+          <div
+            key={preference.id}
+            className={`d-flex align-items-center line-height-36${mobileView ? ' my-3' : ' mb-2'}`}
+            data-testid="notification-preference"
+          >
+            {intl.formatMessage(messages.notificationTitle, { text: preference.id })}
+            {preference.info !== '' && (
+            <OverlayTrigger
+              id={`${preference.id}-tooltip`}
+              className="d-inline"
+              placement="right"
+              overlay={(
+                <Tooltip id={`${preference.id}-tooltip`}>
+                  {preference.info}
+                </Tooltip>
+              )}
+            >
+              <span className="ml-2">
+                <Icon src={InfoOutline} />
+              </span>
+            </OverlayTrigger>
+            )}
+          </div>
+          {mobileView && (
+          <div className="d-flex">
+            {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
+              <NotificationPreferenceColumn key={channel} appId={appId} channel={channel} appPreference={preference} />
+            ))}
+          </div>
+          )}
+        </>
+        )
+
+      ))}
+    </div>
+  );
+};
+
+NotificationTypes.propTypes = {
+  appId: PropTypes.string.isRequired,
+};
+
+export default React.memo(NotificationTypes);
--- a/src/notification-preferences/ToggleSwitch.jsx
+++ b/src/notification-preferences/ToggleSwitch.jsx
@@ -1,13 +1,16 @@
-import { Form } from '@openedx/paragon';
 import React from 'react';
+
 import PropTypes from 'prop-types';

+import { Form } from '@openedx/paragon';
+
 const ToggleSwitch = ({
  name,
  value,
  disabled,
  onChange,
  id,
+  className,
 }) => (
  <Form.Switch
    name={name}
@@ -15,6 +18,7 @@ const ToggleSwitch = ({
    disabled={disabled}
    onChange={onChange}
    data-testid={id}
+    className={className}
  />
 );

@@ -24,12 +28,14 @@ ToggleSwitch.propTypes = {
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  id: PropTypes.string,
+  className: PropTypes.string,
 };

 ToggleSwitch.defaultProps = {
  onChange: () => null,
  disabled: false,
  id: '',
+  className: '',
 };

 export default React.memo(ToggleSwitch);
--- a/src/notification-preferences/data/constants.js
+++ b/src/notification-preferences/data/constants.js
@@ -1,3 +1,8 @@
-const NOTIFICATION_CHANNELS = ['web'];
+const EMAIL_CADENCE = {
+  DAILY: 'Daily',
+  WEEKLY: 'Weekly',
+  IMMEDIATELY: 'Immediately',
+  NEVER: 'Never',
+};

-export default NOTIFICATION_CHANNELS;
+export default EMAIL_CADENCE;
--- a/src/notification-preferences/data/thunks.js
+++ b/src/notification-preferences/data/thunks.js
@@ -1,4 +1,5 @@
 import { camelCaseObject } from '@edx/frontend-platform';
+import EMAIL_CADENCE from './constants';
 import {
  fetchCourseListSuccess,
  fetchCourseListFetching,
@@ -58,6 +59,8 @@ const normalizePreferences = (responseData) => {
        push: preferences[appId].notificationTypes[preferenceId].push,
        email: preferences[appId].notificationTypes[preferenceId].email,
        info: preferences[appId].notificationTypes[preferenceId].info || '',
+        emailCadence: preferences[appId].notificationTypes[preferenceId].emailCadence || EMAIL_CADENCE.DAILY,
+        coreNotificationTypes: preferences[appId].coreNotificationTypes || [],
      }
    ));
    nonEditable[appId] = preferences[appId].nonEditable;
--- a/src/notification-preferences/data/utils.js
+++ b/src/notification-preferences/data/utils.js
@@ -0,0 +1,15 @@
+import { getConfig } from '@edx/frontend-platform';
+
+export const notificationChannels = () => ({ WEB: 'web', ...(getConfig().SHOW_EMAIL_CHANNEL === 'true' && { EMAIL: 'email' }) });
+
+export const shouldHideAppPreferences = (preferences, appId) => {
+  const appPreferences = preferences.filter(pref => pref.appId === appId);
+
+  if (appPreferences.length !== 1) {
+    return false;
+  }
+
+  const firstPreference = appPreferences[0];
+
+  return firstPreference?.id === 'core' && (!firstPreference.coreNotificationTypes?.length);
+};
--- a/src/notification-preferences/messages.js
+++ b/src/notification-preferences/messages.js
@@ -13,6 +13,7 @@ const messages = defineMessages({
      discussion {Discussions}
      coursework {Course Work}
      updates {Updates}
+      grading {Grading}
      other {{key}}
    }`,
    description: 'Display text for Notification Types',
@@ -26,6 +27,7 @@ const messages = defineMessages({
      newQuestionPost {New question posts}
      contentReported {Reported content}
      courseUpdate {Course updates}
+      oraStaffNotification {ORA new submissions}
      other {{text}}
    }`,
    description: 'Display text for Notification Types',
@@ -41,6 +43,17 @@ const messages = defineMessages({
    }`,
    description: 'Display text for Notification Channel',
  },
+  emailCadence: {
+    id: 'notification.preference.emailCadence',
+    defaultMessage: `{
+      text, select,
+      Daily {Daily}
+      Weekly {Weekly}
+      Immediately {Immediately}
+      other {{text}}
+    }`,
+    description: 'Display text for Email Cadence',
+  },
  typeLabel: {
    id: 'notification.preference.type.label',
    defaultMessage: 'Type',
--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/tree/master/src/components/footer-slot). 
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/FooterSlot/images/custom_footer.png
+++ b/src/plugin-slots/FooterSlot/images/custom_footer.png
--- a/src/plugin-slots/FooterSlot/images/default_footer.png
+++ b/src/plugin-slots/FooterSlot/images/default_footer.png
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -0,0 +1,3 @@
+# `frontend-app-account` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)
--- a/src/tests/hooks.test.jsx
+++ b/src/tests/hooks.test.jsx
@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
+
 import { render, waitFor } from '@testing-library/react';

 import { useAsyncCall } from '../hooks';
-import { LOADING_STATUS, SUCCESS_STATUS, FAILURE_STATUS } from '../constants';
+import { FAILURE_STATUS, LOADING_STATUS, SUCCESS_STATUS } from '../constants';

 const TestUseAsyncCallHookComponent = ({ asyncFunc }) => {
  const { status, data } = useAsyncCall(asyncFunc);
Author	SHA1	Message	Date
Ahtisham Shahid	96fccd3afc	feat: Cleanup of notification pref UI	2024-05-22 14:15:38 +05:00
renovate[bot]	4e38c9e9a6	fix(deps): update dependency @edx/frontend-platform to v8.0.3	2024-05-20 04:39:40 +00:00
Brian Smith	81a1ec7e1e	fix: use `frontend-slot-footer` that supports all footer versions The previous version of `frontend-slot-footer` had a peer dependency of `^14.0.0`, which caused problems for some methods of installing forked footers. This updates to a version of `frontend-slot-footer` that allows for any version of `frontend-component-footer` in the peer dependency.	2024-05-16 16:02:55 -03:00
sundasnoreen12	90da11782f	Merge pull request #1049 from openedx/sundas/INF-1360 fix: fixed environment variable issue for email cadence	2024-05-16 13:32:47 +05:00
sundasnoreen12	82c9e07f0f	refactor: optimize function for empty array	2024-05-16 12:53:36 +05:00
Brian Smith	16fb3a1bb4	fix: import `FooterSlot` from `frontend-slot-footer` package (#1048 )	2024-05-15 16:46:34 -04:00
sundasnoreen12	e623f03c4b	fix: hide type and web option from the header when there is no preference under app	2024-05-15 17:57:54 +05:00
sundasnoreen12	b2173afb9c	refactor: removed lowercase function	2024-05-15 15:36:50 +05:00
sundasnoreen12	c787a77f9e	refactor: fixed name	2024-05-15 15:11:15 +05:00
sundasnoreen12	075587c1f0	refactor: refactor name for notification channels	2024-05-15 14:20:13 +05:00
sundasnoreen12	a0b0b1f8d4	fix: fixed channels alignment issue	2024-05-15 14:13:00 +05:00
sundasnoreen12	16f20cad66	fix: fixed environment variable issue for email cadence	2024-05-15 13:21:58 +05:00
Muhammad Abdullah Waheed	40c67995a4	fix: reverted footer plugin to use simple footer (#1047 )	2024-05-14 18:02:17 +05:00
sundasnoreen12	0fc68f7d93	Merge pull request #1043 from openedx/Ayesha/INF-1360-fix fix: fixed hover color of cadence button	2024-05-14 16:12:49 +05:00
sundasnoreen12	90d3668128	fix: added paragon token for color	2024-05-14 16:09:40 +05:00
sundasnoreen12	1440c8239c	Merge pull request #1046 from openedx/sundas/INF-1283 fix: core notification is now not visible under updates	2024-05-14 13:08:32 +05:00
sundasnoreen12	bb29f9624e	fix: fixed test cases	2024-05-13 17:21:53 +05:00
sundasnoreen12	746b0fed4b	fix: core notification is now not visible under updates	2024-05-13 16:03:13 +05:00
ayeshoali	02d14b95a7	fix: fixed hover color of cadence button	2024-05-13 14:58:14 +05:00
ayeshoali	484fc95ea0	refactor: added utils file for showEmailChannel	2024-05-13 13:36:08 +05:00
renovate[bot]	bdb851eb8b	fix(deps): update dependency @edx/frontend-component-header to v5.3.1	2024-05-13 06:37:27 +00:00
ayeshoali	b984296550	refactor: grouped imports	2024-05-10 17:12:21 +05:00
ayeshoali	39fca96523	refactor: updated logic to handle show email channel env variable	2024-05-10 17:05:11 +05:00
Brian Smith	d1e817d4ba	feat: use frontend-plugin-framework to provide a FooterSlot	2024-05-09 14:13:27 -03:00
ayeshoali	b35042ca97	refactor: resolved comments	2024-05-09 13:43:16 +05:00
ayeshoali	88e9eb3fdf	refactor: added environment variable for email channel	2024-05-09 01:05:19 +05:00
ayeshoali	4409be4cc6	fix: fixed hover color of cadence button	2024-05-08 17:55:41 +05:00
ayesha waris	e314de2042	feat: implemented notification preference UI for cadence (#1033 ) * feat: implented notification preference UI for cadence * refactor: refactored code * refactor: refactored code * refactor: clean code after adding email cadence * refactor: refactored and restructured notificationPreferences page * refactor: refactored and implemented mobile view * fix: fixed disabled for email cadence * refactor: resolved spaces and changed font size class * refactor: resolved conflicts --------- Co-authored-by: Awais Ansari <awais.ansari63@gmail.com>	2024-05-07 16:54:15 +05:00
renovate[bot]	fc329fe9c2	chore(deps): update dependency @testing-library/jest-dom to v6.4.5	2024-05-06 07:21:07 +00:00
Ahtisham Shahid	aea3a7c830	fix: updated notification app name to grading (#1041 )	2024-05-06 12:17:34 +05:00
Ahtisham Shahid	35b5459dec	fix: removed core type from ora app (#1040 )	2024-04-30 18:09:28 +05:00
renovate[bot]	2b82ac9faf	fix(deps): update react-router monorepo to v6.23.0	2024-04-29 07:39:32 +00:00
renovate[bot]	24ad8851e6	fix(deps): update dependency core-js to v3.37.0	2024-04-29 04:53:22 +00:00
renovate[bot]	b62645349e	fix(deps): update dependency @edx/frontend-platform to v8.0.1	2024-04-29 04:52:47 +00:00
Awais Ansari	d2c160b771	Merge pull request #1035 from openedx/ahtisham/regen-lock-file chore: regenerated package lock file	2024-04-25 15:48:05 +05:00
Ahtisham Shahid	6e39072334	chore: regenerated package lock file	2024-04-25 15:02:44 +05:00
Bilal Qamar	245bf9aa6b	feat: updated frontend-build & frontend-platform major versions (#958 ) * chore: bumped jest to v29, updated snapshots * refactor: switched frontend-build to openedx, updated snapshots * refactor: added overrides to resolve dependency issues * refactor: updated frontend-build to the version which has eslint alpha synced with master * refactor: updated frontend-build to alpha branch * refactor: updated frontend-build to alpha version * refactor: updated overrides * feat: updated build and platform major versions, along with edx packages	2024-04-24 18:02:11 +05:00
renovate[bot]	b8a4163629	fix(deps): update dependency @edx/frontend-platform to v7.1.4	2024-04-22 06:20:33 +00:00
Ahtisham Shahid	a5730b625a	feat: added new messages for ora notification (#1026 )	2024-04-22 11:16:52 +05:00
renovate[bot]	f03ac8b6d9	fix(deps): update dependency @edx/frontend-component-footer to v13.0.5	2024-04-15 06:54:54 +00:00
renovate[bot]	9e72f1c9e9	fix(deps): update dependency qs to v6.12.1	2024-04-15 04:21:13 +00:00
ayesha waris	9693d938c6	Revert "feat: implented notification preference UI for cadence (#1013 )" (#1029 ) This reverts commit `a266e3dca9`.	2024-04-05 16:53:13 +05:00
Muhammad Ammar	f45bb43064	Merge pull request #1027 from openedx/ammar/add-more-languages feat: add new languages	2024-04-04 23:50:13 +05:00
muhammad-ammar	32f9804e4a	feat: add new languages	2024-04-04 14:38:43 +05:00
renovate[bot]	feef40f6d0	fix(deps): update dependency @edx/frontend-platform to v7.1.3	2024-04-01 04:04:33 +00:00
ayesha waris	a266e3dca9	feat: implented notification preference UI for cadence (#1013 ) * feat: implented notification preference UI for cadence * refactor: refactored code * refactor: refactored code * refactor: clean code after adding email cadence * refactor: refactored and restructured notificationPreferences page * refactor: refactored and implemented mobile view --------- Co-authored-by: Awais Ansari <awais.ansari63@gmail.com>	2024-03-25 20:52:22 +05:00
renovate[bot]	6cc50a983e	fix(deps): update dependency core-js to v3.36.1	2024-03-25 06:48:12 +00:00