docs: add comprehensive readme documentation for plugin slots (#1770 )

fix(docs): correct ProgressCertificateStatusSlot README title (#1689 )
fix(docs): correct CourseRecommendationsSlot README title (#1688 )
2025-08-06 16:41:36 +05:30 · 2025-07-21 13:11:29 -04:00 · 2025-07-21 13:11:29 -04:00
107 changed files with 1404 additions and 2580 deletions
--- a/.env
+++ b/.env
@@ -12,12 +12,10 @@ CREDIT_HELP_LINK_URL=''
 CSRF_TOKEN_API_PATH=''
 DISCOVERY_API_BASE_URL=''
 DISCUSSIONS_MFE_BASE_URL=''
-DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
-ENTERPRISE_LEARNER_PORTAL_URL=''
 EXAMS_BASE_URL=''
 FAVICON_URL=''
 IGNORED_ERROR_REGEX=''
@@ -51,6 +49,3 @@ TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
-FEATURE_ENABLE_CHAT_V2_ENDPOINT=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -12,12 +12,10 @@ CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-co
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
-DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
-ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 EXAMS_BASE_URL=''
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=''
@@ -53,6 +51,3 @@ CHAT_RESPONSE_URL='http://localhost:18000/api/learning_assistant/v1/course_id'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
-FEATURE_ENABLE_CHAT_V2_ENDPOINT='false'
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -12,12 +12,10 @@ CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-co
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
-DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
-ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 EXAMS_BASE_URL='http://localhost:18740'
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=''
@@ -50,5 +48,3 @@ TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
-ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:Enterprise'
-FEATURE_ENABLE_CHAT_V2_ENDPOINT='false'
--- a/.github/workflows/add-issue-to-btr-project.yml
+++ b/.github/workflows/add-issue-to-btr-project.yml
@@ -1,18 +0,0 @@
-# Run the workflow that adds new tickets that are labelled "release testing"
-# to the org-wide BTR project board
-
-name: Add release testing issues to the BTR project board
-
-on:
-  issues:
-    types: [labeled]
-    # This workflow is triggered when an issue is labeled with 'release testing'.
-    # It adds the issue to the BTR project and applies the 'needs triage' label
-    # if it doesn't already have it.
-
-jobs:
-  handle-release-testing:
-    uses: openedx/.github/.github/workflows/add-issue-to-btr-project.yml@master
-    secrets:
-      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
-      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,10 @@
        "@edx/browserslist-config": "1.5.0",
        "@edx/frontend-component-footer": "^14.6.0",
        "@edx/frontend-component-header": "^6.2.0",
-        "@edx/frontend-lib-learning-assistant": "^2.23.1",
-        "@edx/frontend-lib-special-exams": "^4.0.0",
+        "@edx/frontend-lib-learning-assistant": "^2.20.0",
+        "@edx/frontend-lib-special-exams": "^3.5.0",
        "@edx/frontend-platform": "^8.3.1",
-        "@edx/openedx-atlas": "^0.7.0",
+        "@edx/openedx-atlas": "^0.6.0",
        "@edx/react-unit-test-utils": "^4.0.0",
        "@fortawesome/free-brands-svg-icons": "5.15.4",
        "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -24,7 +24,7 @@
        "@fortawesome/react-fontawesome": "^0.1.4",
        "@openedx/frontend-build": "^14.5.0",
        "@openedx/frontend-plugin-framework": "^1.7.0",
-        "@openedx/paragon": "^23.4.5",
+        "@openedx/paragon": "^22.16.0",
        "@popperjs/core": "2.11.8",
        "@reduxjs/toolkit": "1.9.7",
        "buffer": "^6.0.3",
@@ -1940,158 +1940,6 @@
      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
      "license": "MIT"
    },
-    "node_modules/@bundled-es-modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==",
-      "license": "ISC",
-      "dependencies": {
-        "deepmerge": "^4.3.1"
-      }
-    },
-    "node_modules/@bundled-es-modules/glob": {
-      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz",
-      "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==",
-      "hasInstallScript": true,
-      "license": "ISC",
-      "dependencies": {
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "glob": "^10.4.2",
-        "patch-package": "^8.0.0",
-        "path": "^0.12.7",
-        "stream": "^0.0.3",
-        "string_decoder": "^1.3.0",
-        "url": "^0.11.3"
-      }
-    },
-    "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@bundled-es-modules/glob/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@bundled-es-modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@bundled-es-modules/memfs": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.17.0.tgz",
-      "integrity": "sha512-ykdrkEmQr9BV804yd37ikXfNnvxrwYfY9Z2/EtMHFEFadEjsQXJ1zL9bVZrKNLDtm91UdUOEHso6Aweg93K6xQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "assert": "^2.1.0",
-        "buffer": "^6.0.3",
-        "events": "^3.3.0",
-        "memfs": "^4.17.0",
-        "path": "^0.12.7",
-        "stream": "^0.0.3",
-        "util": "^0.12.5"
-      }
-    },
-    "node_modules/@bundled-es-modules/memfs/node_modules/memfs": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.17.1.tgz",
-      "integrity": "sha512-thuTRd7F4m4dReCIy7vv4eNYnU6XI/tHMLSMMHLiortw/Y0QxqKtinG523U2aerzwYWGi606oBP4oMPy4+edag==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@jsonjoy.com/json-pack": "^1.0.3",
-        "@jsonjoy.com/util": "^1.3.0",
-        "tree-dump": "^1.0.1",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      }
-    },
-    "node_modules/@bundled-es-modules/postcss-calc-ast-parser": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz",
-      "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==",
-      "license": "ISC",
-      "dependencies": {
-        "postcss-calc-ast-parser": "^0.1.4"
-      }
-    },
-    "node_modules/@chevrotain/cst-dts-gen": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
-      "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@chevrotain/gast": "11.0.3",
-        "@chevrotain/types": "11.0.3",
-        "lodash-es": "4.17.21"
-      }
-    },
-    "node_modules/@chevrotain/gast": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
-      "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@chevrotain/types": "11.0.3",
-        "lodash-es": "4.17.21"
-      }
-    },
-    "node_modules/@chevrotain/regexp-to-ast": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
-      "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@chevrotain/types": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
-      "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@chevrotain/utils": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
-      "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
-      "license": "Apache-2.0"
-    },
    "node_modules/@cospired/i18n-iso-languages": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-4.2.0.tgz",
@@ -2228,9 +2076,9 @@
      }
    },
    "node_modules/@edx/frontend-component-footer": {
-      "version": "14.7.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.7.1.tgz",
-      "integrity": "sha512-LsT3b1xtZdPeQmIlej+voN3RvGOjl0bUq2JEEtELESRr0F6bNVySmKFzrPwD4wActlMaeyQrat53ZZeK+NQNrw==",
+      "version": "14.6.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.6.0.tgz",
+      "integrity": "sha512-cgRhom6W/WErQ9yvLmfgB6ANBs+rBDLOH73NcvJIhfwWgAg67q+MLUscIbcX9N/9Yykk+kb7Ytr3CDefiKS7HA==",
      "license": "AGPL-3.0",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "6.7.2",
@@ -2413,9 +2261,9 @@
      }
    },
    "node_modules/@edx/frontend-lib-learning-assistant": {
-      "version": "2.23.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-learning-assistant/-/frontend-lib-learning-assistant-2.23.1.tgz",
-      "integrity": "sha512-0rDHlE3tlADWOcqKaVIKkMK2YGonbRaYJfmBSgH+Sn6+BFg2e541fn7NC9e5rIaiV1BnMREF7dxyRa/IEYLZLA==",
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-learning-assistant/-/frontend-lib-learning-assistant-2.21.0.tgz",
+      "integrity": "sha512-CUzPCQaBgXi6E1kvY0nyBSVFu8RUGpwKH4V0p8ZuysyHyRHpA+339b+gEi9FvVBMP/X4IxZHsZhi7nphlr43Iw==",
      "license": "AGPL-3.0",
      "dependencies": {
        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
@@ -2439,9 +2287,9 @@
      }
    },
    "node_modules/@edx/frontend-lib-special-exams": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-special-exams/-/frontend-lib-special-exams-4.0.0.tgz",
-      "integrity": "sha512-mJdrxebdKO9NxDFkQZ1vyWVUvWCk393pIVHJyz9vH42Kvn08LC5db8/gYk37srCfsA4Dl78pMLa408CoT14JMA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-special-exams/-/frontend-lib-special-exams-3.5.0.tgz",
+      "integrity": "sha512-lRKD3K+XAuoKAaxbZxb7QLTWkSlV9yIy08XflYoHh/weClesVTETU3+NtJ5YRsC/kYHZrzSYIpMZnBnkKTGTww==",
      "license": "AGPL-3.0",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -2538,16 +2386,16 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "8.3.7",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.3.7.tgz",
-      "integrity": "sha512-ya5ObMvtJlfQmoeL36OtzjFBh0hzJgXN/R2ppyIJ+IbCtY2BCfv5NqvmKD7CplwnSGJTBugpv5hQHeGmi+v97w==",
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.3.4.tgz",
+      "integrity": "sha512-V3XtTo3KP8QSmId+Vvi4+qzpOVkxvTMNA6jH/i3Bfz+/jHjHBRnmp/Cc2pjTxiTgGNoKX4D1twiZkOBO+kWw1Q==",
      "license": "AGPL-3.0",
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.2.0",
        "@formatjs/intl-pluralrules": "4.3.3",
        "@formatjs/intl-relativetimeformat": "10.0.1",
-        "axios": "1.9.0",
-        "axios-cache-interceptor": "1.8.0",
+        "axios": "1.8.4",
+        "axios-cache-interceptor": "1.6.2",
        "form-urlencoded": "4.1.4",
        "glob": "7.2.3",
        "history": "4.10.1",
@@ -2588,9 +2436,9 @@
      }
    },
    "node_modules/@edx/openedx-atlas": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@edx/openedx-atlas/-/openedx-atlas-0.7.0.tgz",
-      "integrity": "sha512-jqv0IV1pHsSn9+RO8Rdsr8jm3SOd84CCzzmo2QC9yvh1MK1+p4YDURQLpmmgKJ0JzE5Cb6ImhnNL/ogpJ2wetQ==",
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@edx/openedx-atlas/-/openedx-atlas-0.6.2.tgz",
+      "integrity": "sha512-28Q8vzJDMS4wUxdkbIUBQpzWJ3HTdMaGlaEhFjrVGfuZkh++1AG6Tn/7FMD88cegalYAkphu530VQCHEkMZQhw==",
      "license": "AGPL-3.0",
      "bin": {
        "atlas": "atlas"
@@ -3306,102 +3154,6 @@
      "deprecated": "Use @eslint/object-schema instead",
      "license": "BSD-3-Clause"
    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT"
-    },
-    "node_modules/@isaacs/cliui/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
    "node_modules/@istanbuljs/load-nyc-config": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -3804,60 +3556,6 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
-    "node_modules/@jsonjoy.com/base64": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
-      "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      },
-      "peerDependencies": {
-        "tslib": "2"
-      }
-    },
-    "node_modules/@jsonjoy.com/json-pack": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.2.0.tgz",
-      "integrity": "sha512-io1zEbbYcElht3tdlqEOFxZ0dMTYrHz9iMf0gqn1pPjZFTCgM5R4R5IMA20Chb2UPYYsxjzs8CgZ7Nb5n2K2rA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@jsonjoy.com/base64": "^1.1.1",
-        "@jsonjoy.com/util": "^1.1.2",
-        "hyperdyperid": "^1.2.0",
-        "thingies": "^1.20.0"
-      },
-      "engines": {
-        "node": ">=10.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      },
-      "peerDependencies": {
-        "tslib": "2"
-      }
-    },
-    "node_modules/@jsonjoy.com/util": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.6.0.tgz",
-      "integrity": "sha512-sw/RMbehRhN68WRtcKCpQOPfnH6lLP4GJfqzi3iYej8tnzpZUDr6UkZYJjcjjC0FWEJOJbyM3PTIwxucUmDG2A==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      },
-      "peerDependencies": {
-        "tslib": "2"
-      }
-    },
    "node_modules/@leichtgewicht/ip-codec": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -4439,9 +4137,9 @@
      }
    },
    "node_modules/@openedx/paragon": {
-      "version": "23.4.5",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.4.5.tgz",
-      "integrity": "sha512-baBTZDO6hdCjI+Jj3oSQaz5GkFTR2TEs94pPMOls7bc/Fsv4zQIN8xDPo4NzAVo/2+3eSuEzUz3xzBeb+94rtw==",
+      "version": "22.17.0",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.17.0.tgz",
+      "integrity": "sha512-MzOLQ0myaOErwumPJwxVZXTw7zJKrARtu4YMSaISF5Sz6pE1/dYz9qfRcqaraYRcJGNdbPRzOG0v3iqbZo1uHQ==",
      "license": "Apache-2.0",
      "workspaces": [
        "example",
@@ -4451,32 +4149,20 @@
        "dependent-usage-analyzer"
      ],
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
        "@popperjs/core": "^2.11.4",
-        "@tokens-studio/sd-transforms": "^1.2.4",
-        "axios": "^0.27.2",
        "bootstrap": "^4.6.2",
        "chalk": "^4.1.2",
        "child_process": "^1.0.2",
-        "chroma-js": "^2.4.2",
        "classnames": "^2.3.1",
-        "cli-progress": "^3.12.0",
-        "commander": "^9.4.1",
        "email-prop-type": "^3.0.0",
        "file-selector": "^0.6.0",
+        "font-awesome": "^4.7.0",
        "glob": "^8.0.3",
        "inquirer": "^8.2.5",
-        "js-toml": "^1.0.0",
        "lodash.uniqby": "^4.7.0",
-        "log-update": "^4.0.0",
        "mailto-link": "^2.0.0",
-        "minimist": "^1.2.8",
-        "ora": "^5.4.1",
-        "postcss": "^8.4.21",
-        "postcss-combine-duplicated-selectors": "^10.0.3",
-        "postcss-custom-media": "^9.1.2",
-        "postcss-import": "^15.1.0",
-        "postcss-map": "^0.11.0",
-        "postcss-minify": "^1.1.0",
        "prop-types": "^15.8.1",
        "react-bootstrap": "^1.6.5",
        "react-colorful": "^5.6.1",
@@ -4489,8 +4175,6 @@
        "react-responsive": "^8.2.0",
        "react-table": "^7.7.0",
        "react-transition-group": "^4.4.2",
-        "sass": "^1.58.3",
-        "style-dictionary": "^4.3.2",
        "tabbable": "^5.3.3",
        "uncontrollable": "^7.2.1",
        "uuid": "^9.0.0"
@@ -4504,16 +4188,6 @@
        "react-intl": "^5.25.1 || ^6.4.0"
      }
    },
-    "node_modules/@openedx/paragon/node_modules/axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
-      }
-    },
    "node_modules/@openedx/paragon/node_modules/brace-expansion": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -4523,15 +4197,6 @@
        "balanced-match": "^1.0.0"
      }
    },
-    "node_modules/@openedx/paragon/node_modules/commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || >=14"
-      }
-    },
    "node_modules/@openedx/paragon/node_modules/glob": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
@@ -4564,34 +4229,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/@openedx/paragon/node_modules/postcss-custom-media": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz",
-      "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.2",
-        "@csstools/css-parser-algorithms": "^2.2.0",
-        "@csstools/css-tokenizer": "^2.1.1",
-        "@csstools/media-query-list-parser": "^2.1.1"
-      },
-      "engines": {
-        "node": "^14 || ^16 || >=18"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
    "node_modules/@optimizely/js-sdk-logging": {
      "version": "0.3.1",
      "resolved": "https://registry.npmjs.org/@optimizely/js-sdk-logging/-/js-sdk-logging-0.3.1.tgz",
@@ -5094,16 +4731,6 @@
        "url": "https://opencollective.com/parcel"
      }
    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
      "version": "0.5.15",
      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz",
@@ -5641,32 +5268,6 @@
        "@testing-library/dom": ">=7.21.4"
      }
    },
-    "node_modules/@tokens-studio/sd-transforms": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.3.0.tgz",
-      "integrity": "sha512-zVbiYjTGWpSuwzZwiuvcWf79CQEcTMKSxrOaQJ0zHXFxEmrpETWeIRxv2IO8rtMos/cS8mvnDwPngoHQOMs1SA==",
-      "license": "MIT",
-      "dependencies": {
-        "@bundled-es-modules/deepmerge": "^4.3.1",
-        "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
-        "@tokens-studio/types": "^0.5.1",
-        "colorjs.io": "^0.5.2",
-        "expr-eval-fork": "^2.0.2",
-        "is-mergeable-object": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "style-dictionary": "^4.3.0 || ^5.0.0-rc.0"
-      }
-    },
-    "node_modules/@tokens-studio/types": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.2.tgz",
-      "integrity": "sha512-rzMcZP0bj2E5jaa7Fj0LGgYHysoCrbrxILVbT0ohsCUH5uCHY/u6J7Qw/TE0n6gR9Js/c9ZO9T8mOoz0HdLMbA==",
-      "license": "MIT"
-    },
    "node_modules/@tootallnate/once": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -6903,23 +6504,6 @@
      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
      "license": "Apache-2.0"
    },
-    "node_modules/@yarnpkg/lockfile": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
-      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/@zip.js/zip.js": {
-      "version": "2.7.60",
-      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.60.tgz",
-      "integrity": "sha512-vA3rLyqdxBrVo1FWSsbyoecaqWTV+vgPRf0QKeM7kVDG0r+lHUqd7zQDv1TO9k4BcAoNzNDSNrrel24Mk6addA==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "bun": ">=0.7.0",
-        "deno": ">=1.0.0",
-        "node": ">=16.5.0"
-      }
-    },
    "node_modules/abab": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -7371,19 +6955,6 @@
      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
      "license": "MIT"
    },
-    "node_modules/assert": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
-      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-nan": "^1.3.2",
-        "object-is": "^1.1.5",
-        "object.assign": "^4.1.4",
-        "util": "^0.12.5"
-      }
-    },
    "node_modules/assert-ok": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/assert-ok/-/assert-ok-1.0.0.tgz",
@@ -7396,15 +6967,6 @@
      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==",
      "license": "ISC"
    },
-    "node_modules/astral-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
-      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/async": {
      "version": "3.2.6",
      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -7516,9 +7078,9 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
-      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
      "license": "MIT",
      "dependencies": {
        "follow-redirects": "^1.15.6",
@@ -7527,9 +7089,9 @@
      }
    },
    "node_modules/axios-cache-interceptor": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.8.0.tgz",
-      "integrity": "sha512-cTNnPGJyQkxnWp0EWvE3NRvgURU5cWw/Qx3dIhXyHSM4Ip0c7EEe0I3an0Jwa549m1CAOg57ibj27YRNLmQCcg==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.6.2.tgz",
+      "integrity": "sha512-YLbAODIHZZIcD4b3WYFVQOa5W2TY/WnJ6sBHqAg6Z+hx+RVj8/OcjQyRopO6awn7/kOkGL5X9TP16AucnlJ/lw==",
      "license": "MIT",
      "dependencies": {
        "cache-parser": "1.2.5",
@@ -8322,9 +7884,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001721",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz",
-      "integrity": "sha512-cOuvmUVtKrtEaoKiO0rSc29jcjwMwX5tOHDy4MgVFEWiUXj4uBMJkwI8MDySkgXidpMiHUcviogAvFi4pA2hDQ==",
+      "version": "1.0.30001715",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001715.tgz",
+      "integrity": "sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw==",
      "funding": [
        {
          "type": "opencollective",
@@ -8372,12 +7934,6 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
-    "node_modules/change-case": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
-      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
-      "license": "MIT"
-    },
    "node_modules/char-regex": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -8521,20 +8077,6 @@
        "boolbase": "~1.0.0"
      }
    },
-    "node_modules/chevrotain": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
-      "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@chevrotain/cst-dts-gen": "11.0.3",
-        "@chevrotain/gast": "11.0.3",
-        "@chevrotain/regexp-to-ast": "11.0.3",
-        "@chevrotain/types": "11.0.3",
-        "@chevrotain/utils": "11.0.3",
-        "lodash-es": "4.17.21"
-      }
-    },
    "node_modules/child_process": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -8571,12 +8113,6 @@
      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
      "license": "ISC"
    },
-    "node_modules/chroma-js": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz",
-      "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==",
-      "license": "(BSD-3-Clause AND Apache-2.0)"
-    },
    "node_modules/chrome-trace-event": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -8668,18 +8204,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/cli-progress": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
-      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^4.2.3"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/cli-spinners": {
      "version": "2.9.2",
      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
@@ -8824,12 +8348,6 @@
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "license": "MIT"
    },
-    "node_modules/colorjs.io": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
-      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
-      "license": "MIT"
-    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -10138,12 +9656,6 @@
      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
      "license": "MIT"
    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "license": "MIT"
-    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -11547,12 +11059,6 @@
        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
      }
    },
-    "node_modules/expr-eval-fork": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz",
-      "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ==",
-      "license": "MIT"
-    },
    "node_modules/express": {
      "version": "4.21.2",
      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
@@ -11973,15 +11479,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/find-yarn-workspace-root": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
-      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "micromatch": "^4.0.2"
-      }
-    },
    "node_modules/flat": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -12059,6 +11556,15 @@
        }
      }
    },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "license": "(OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.5",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -12074,34 +11580,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/foreground-child/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
    "node_modules/fork-ts-checker-webpack-plugin": {
      "version": "6.5.3",
      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
@@ -13186,15 +12664,6 @@
        "node": ">=10.17.0"
      }
    },
-    "node_modules/hyperdyperid": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
-      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.18"
-      }
-    },
    "node_modules/hyphenate-style-name": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
@@ -13570,22 +13039,6 @@
        "node": ">= 0.10"
      }
    },
-    "node_modules/is-arguments": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
-      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-array-buffer": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -13916,28 +13369,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-mergeable-object": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz",
-      "integrity": "sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==",
-      "license": "MIT"
-    },
-    "node_modules/is-nan": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
-      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -14387,21 +13818,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
    "node_modules/jake": {
      "version": "10.9.2",
      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -15376,16 +14792,6 @@
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "license": "MIT"
    },
-    "node_modules/js-toml": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/js-toml/-/js-toml-1.0.1.tgz",
-      "integrity": "sha512-rHd/IolpFm2V5BmHCEY8CckHs8NDsYZZ64H5RNgA6Opsr9vX4QyTiQPplgtqg7b3ztqYShZC38nl6CUg7QuhXg==",
-      "license": "MIT",
-      "dependencies": {
-        "chevrotain": "^11.0.3",
-        "xregexp": "^5.1.1"
-      }
-    },
    "node_modules/js-yaml": {
      "version": "3.14.1",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
@@ -15631,15 +15037,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/klaw-sync": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
-      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.1.11"
-      }
-    },
    "node_modules/kleur": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -15781,12 +15178,6 @@
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "license": "MIT"
    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "license": "MIT"
-    },
    "node_modules/lodash.assignin": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz",
@@ -15941,24 +15332,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/log-update": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
-      "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-escapes": "^4.3.0",
-        "cli-cursor": "^3.1.0",
-        "slice-ansi": "^4.0.0",
-        "wrap-ansi": "^6.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -16818,15 +16191,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
    "node_modules/mkdirp-classic": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
@@ -17128,22 +16492,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/object-is": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
-      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -17481,12 +16829,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "license": "BlueOak-1.0.0"
-    },
    "node_modules/param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -17558,95 +16900,6 @@
        "tslib": "^2.0.3"
      }
    },
-    "node_modules/patch-package": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
-      "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
-      "license": "MIT",
-      "dependencies": {
-        "@yarnpkg/lockfile": "^1.1.0",
-        "chalk": "^4.1.2",
-        "ci-info": "^3.7.0",
-        "cross-spawn": "^7.0.3",
-        "find-yarn-workspace-root": "^2.0.0",
-        "fs-extra": "^9.0.0",
-        "json-stable-stringify": "^1.0.2",
-        "klaw-sync": "^6.0.0",
-        "minimist": "^1.2.6",
-        "open": "^7.4.2",
-        "rimraf": "^2.6.3",
-        "semver": "^7.5.3",
-        "slash": "^2.0.0",
-        "tmp": "^0.0.33",
-        "yaml": "^2.2.2"
-      },
-      "bin": {
-        "patch-package": "index.js"
-      },
-      "engines": {
-        "node": ">=14",
-        "npm": ">5"
-      }
-    },
-    "node_modules/patch-package/node_modules/open": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/patch-package/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/patch-package/node_modules/slash": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/patch-package/node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/path": {
-      "version": "0.12.7",
-      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
-      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
-      "license": "MIT",
-      "dependencies": {
-        "process": "^0.11.1",
-        "util": "^0.10.3"
-      }
-    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -17686,28 +16939,6 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "license": "MIT"
    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "license": "ISC"
-    },
    "node_modules/path-to-regexp": {
      "version": "0.1.12",
      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
@@ -17723,27 +16954,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/path-unified": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.2.0.tgz",
-      "integrity": "sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==",
-      "license": "MIT"
-    },
-    "node_modules/path/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-      "license": "ISC"
-    },
-    "node_modules/path/node_modules/util": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
-      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "2.0.3"
-      }
-    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -18147,24 +17357,6 @@
        "postcss": "^8.2.2"
      }
    },
-    "node_modules/postcss-calc-ast-parser": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz",
-      "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^3.3.1"
-      },
-      "engines": {
-        "node": ">=6.5"
-      }
-    },
-    "node_modules/postcss-calc-ast-parser/node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "license": "MIT"
-    },
    "node_modules/postcss-colormin": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.1.0.tgz",
@@ -18183,21 +17375,6 @@
        "postcss": "^8.4.31"
      }
    },
-    "node_modules/postcss-combine-duplicated-selectors": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz",
-      "integrity": "sha512-IP0BmwFloCskv7DV7xqvzDXqMHpwdczJa6ZvIW8abgHdcIHs9mCJX2ltFhu3EwA51ozp13DByng30+Ke+eIExA==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10.0.0 || ^12.0.0 || >=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
    "node_modules/postcss-convert-values": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz",
@@ -18290,23 +17467,6 @@
        "postcss": "^8.4.31"
      }
    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
    "node_modules/postcss-loader": {
      "version": "8.1.1",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
@@ -18394,52 +17554,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/postcss-map": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/postcss-map/-/postcss-map-0.11.0.tgz",
-      "integrity": "sha512-cgHYZrH9aAMds90upYUPhYz8xnAcRD45SwuNns/nQHONIrPQDhpwk3JLsAQGOndQxnRVXfB6nB+3WqSMy8fqlA==",
-      "license": "Unlicense",
-      "dependencies": {
-        "js-yaml": "^3.12.0",
-        "postcss": "^7.0.2",
-        "reduce-function-call": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/postcss-map/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "license": "ISC"
-    },
-    "node_modules/postcss-map/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "license": "MIT",
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/postcss-map/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/postcss-merge-longhand": {
      "version": "6.0.5",
      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz",
@@ -18474,19 +17588,6 @@
        "postcss": "^8.4.31"
      }
    },
-    "node_modules/postcss-minify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify/-/postcss-minify-1.1.0.tgz",
-      "integrity": "sha512-9D64ueIW0DL2FdLajQTlXrnTN8Ox9NjuXqigKMmB819RhdClNPYx5Zp3i5x0ghjjy3vGrLBBYEYvJjY/1eMNbw==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0",
-        "postcss-value-parser": "^4.1"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0"
-      }
-    },
    "node_modules/postcss-minify-font-values": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz",
@@ -18917,9 +18018,9 @@
      }
    },
    "node_modules/prebuild-install/node_modules/tar-fs": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
-      "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz",
+      "integrity": "sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==",
      "license": "MIT",
      "dependencies": {
        "chownr": "^1.1.1",
@@ -18953,21 +18054,6 @@
        "node": ">= 0.8.0"
      }
    },
-    "node_modules/prettier": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
-      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
    "node_modules/pretty-error": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -19014,6 +18100,7 @@
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.6.0"
@@ -20078,24 +19165,6 @@
        "react-dom": ">=16.6.0"
      }
    },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/read-cache/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -20223,15 +19292,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/reduce-function-call": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
-      "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
    "node_modules/redux": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@@ -21448,23 +20508,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/slice-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
-      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "astral-regex": "^2.0.0",
-        "is-fullwidth-code-point": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
-      }
-    },
    "node_modules/snake-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
@@ -21723,27 +20766,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/stream": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz",
-      "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==",
-      "license": "MIT",
-      "dependencies": {
-        "component-emitter": "^2.0.0"
-      }
-    },
-    "node_modules/stream/node_modules/component-emitter": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
-      "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/streamx": {
      "version": "2.22.0",
      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz",
@@ -21802,27 +20824,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
    "node_modules/string-width/node_modules/emoji-regex": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -21924,19 +20925,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/strip-bom": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -21979,55 +20967,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/style-dictionary": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.4.0.tgz",
-      "integrity": "sha512-+xU0IA1StzqAqFs/QtXkK+XJa7wpS4X5H+JQccRKsRCElgeLGocFU1U/UMvMUylKFw6vwGV+Y/a2wb2pm5rFFQ==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@bundled-es-modules/deepmerge": "^4.3.1",
-        "@bundled-es-modules/glob": "^10.4.2",
-        "@bundled-es-modules/memfs": "^4.9.4",
-        "@zip.js/zip.js": "^2.7.44",
-        "chalk": "^5.3.0",
-        "change-case": "^5.3.0",
-        "commander": "^12.1.0",
-        "is-plain-obj": "^4.1.0",
-        "json5": "^2.2.2",
-        "patch-package": "^8.0.0",
-        "path-unified": "^0.2.0",
-        "prettier": "^3.3.3",
-        "tinycolor2": "^1.6.0"
-      },
-      "bin": {
-        "style-dictionary": "bin/style-dictionary.js"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/style-dictionary/node_modules/chalk": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
-      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/style-dictionary/node_modules/commander": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
-      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
    "node_modules/style-loader": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -22247,9 +21186,9 @@
      }
    },
    "node_modules/tar-fs": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.9.tgz",
-      "integrity": "sha512-XF4w9Xp+ZQgifKakjZYmFdkLoSWd34VGKcsTCwlNWM7QG3ZbaxnTsaBwnjFZqHRf/rROxaR8rXnbtwdvaDI+lA==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz",
+      "integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==",
      "license": "MIT",
      "dependencies": {
        "pump": "^3.0.0",
@@ -22406,18 +21345,6 @@
      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
      "license": "MIT"
    },
-    "node_modules/thingies": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
-      "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
-      "license": "Unlicense",
-      "engines": {
-        "node": ">=10.18"
-      },
-      "peerDependencies": {
-        "tslib": "^2"
-      }
-    },
    "node_modules/thread-stream": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-2.7.0.tgz",
@@ -22452,12 +21379,6 @@
      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
      "license": "MIT"
    },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "license": "MIT"
-    },
    "node_modules/tinyglobby": {
      "version": "0.2.13",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -22584,22 +21505,6 @@
        "node": ">=12"
      }
    },
-    "node_modules/tree-dump": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
-      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/streamich"
-      },
-      "peerDependencies": {
-        "tslib": "2"
-      }
-    },
    "node_modules/trim-lines": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -23292,19 +22197,6 @@
        "punycode": "^2.1.0"
      }
    },
-    "node_modules/url": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
-      "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^1.4.1",
-        "qs": "^6.12.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
    "node_modules/url-loader": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -23360,12 +22252,6 @@
        "requires-port": "^1.0.0"
      }
    },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-      "license": "MIT"
-    },
    "node_modules/use-callback-ref": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -23418,19 +22304,6 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
-    "node_modules/util": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "license": "MIT",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "which-typed-array": "^1.1.2"
-      }
-    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -24190,24 +23063,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -24263,15 +23118,6 @@
      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
      "license": "MIT"
    },
-    "node_modules/xregexp": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-5.1.2.tgz",
-      "integrity": "sha512-6hGgEMCGhqCTFEJbqmWrNIPqfpdirdGWkqshu7fFZddmTSfgv5Sn9D2SaKloR79s5VUiUlpwzg3CM3G6D3VIlw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime-corejs3": "^7.26.9"
-      }
-    },
    "node_modules/y18n": {
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
--- a/package.json
+++ b/package.json
@@ -17,9 +17,8 @@
    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "start:with-theme": "paragon install-theme && npm start && npm install",
    "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
-    "test": "NODE_ENV=test fedx-scripts jest --coverage --passWithNoTests",
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
    "test:watch": "fedx-scripts jest --watch --passWithNoTests",
    "types": "tsc --noEmit"
  },
@@ -37,10 +36,10 @@
    "@edx/browserslist-config": "1.5.0",
    "@edx/frontend-component-footer": "^14.6.0",
    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-lib-learning-assistant": "^2.23.1",
-    "@edx/frontend-lib-special-exams": "^4.0.0",
+    "@edx/frontend-lib-learning-assistant": "^2.20.0",
+    "@edx/frontend-lib-special-exams": "^3.5.0",
    "@edx/frontend-platform": "^8.3.1",
-    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/openedx-atlas": "^0.6.0",
    "@edx/react-unit-test-utils": "^4.0.0",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -48,7 +47,7 @@
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@openedx/frontend-build": "^14.5.0",
    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.5",
+    "@openedx/paragon": "^22.16.0",
    "@popperjs/core": "2.11.8",
    "@reduxjs/toolkit": "1.9.7",
    "buffer": "^6.0.3",
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -34,192 +34,188 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
    <PathFixesProvider>
      <NoticesProvider>
        <UserMessagesProvider>
-          <div
-            className="app-container"
-          >
-            <Routes>
-              <Route
-                element={
-                  <PageWrap>
-                    <Page Not Found />
-                  </PageWrap>
-                }
-                path="*"
-              />
-              <Route
-                element={
-                  <PageWrap>
-                    <Goal Unsubscribe />
-                  </PageWrap>
-                }
-                path="/goal-unsubscribe/:token"
-              />
-              <Route
-                element={
-                  <PageWrap>
-                    <Courseware Redirect Landing Page />
-                  </PageWrap>
-                }
-                path="/redirect/*"
-              />
-              <Route
-                element={
-                  <PageWrap>
-                    <Preferences Unsubscribe />
-                  </PageWrap>
-                }
-                path="/preferences-unsubscribe/:userToken/:updatePatch?"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Course Access Error Page />
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/access-denied"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      slice="courseHome"
-                      tab="outline"
-                    >
-                      <Outline Tab />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/home"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      slice="courseHome"
-                      tab="lti_live"
-                    >
-                      <Live Tab />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/live"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      slice="courseHome"
-                      tab="dates"
-                    >
-                      <Dates Tab />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/dates"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      slice="courseHome"
-                      tab="discussion"
-                    >
-                      <Discussion Tab />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/discussion/:path/*"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      isProgressTab={true}
-                      slice="courseHome"
-                      tab="progress"
-                    >
-                      <Progress Tab />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/progress/:targetUserId/"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      isProgressTab={true}
-                      slice="courseHome"
-                      tab="progress"
-                    >
-                      <Progress Tab />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/progress"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Tab Container
-                      fetch={[Function]}
-                      slice="courseware"
-                      tab="courseware"
-                    >
-                      <Course Exit />
-                    </Tab Container>
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/course-end"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Courseware Container />
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/:sequenceId/:unitId"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Courseware Container />
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId/:sequenceId"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Courseware Container />
-                  </DecodePageRoute>
-                }
-                path="/course/:courseId"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Courseware Container />
-                  </DecodePageRoute>
-                }
-                path="/preview/course/:courseId/:sequenceId/:unitId"
-              />
-              <Route
-                element={
-                  <DecodePageRoute>
-                    <Courseware Container />
-                  </DecodePageRoute>
-                }
-                path="/preview/course/:courseId/:sequenceId"
-              />
-            </Routes>
-          </div>
+          <Routes>
+            <Route
+              element={
+                <PageWrap>
+                  <Page Not Found />
+                </PageWrap>
+              }
+              path="*"
+            />
+            <Route
+              element={
+                <PageWrap>
+                  <Goal Unsubscribe />
+                </PageWrap>
+              }
+              path="/goal-unsubscribe/:token"
+            />
+            <Route
+              element={
+                <PageWrap>
+                  <Courseware Redirect Landing Page />
+                </PageWrap>
+              }
+              path="/redirect/*"
+            />
+            <Route
+              element={
+                <PageWrap>
+                  <Preferences Unsubscribe />
+                </PageWrap>
+              }
+              path="/preferences-unsubscribe/:userToken/:updatePatch"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Course Access Error Page />
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/access-denied"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    slice="courseHome"
+                    tab="outline"
+                  >
+                    <Outline Tab />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/home"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    slice="courseHome"
+                    tab="lti_live"
+                  >
+                    <Live Tab />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/live"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    slice="courseHome"
+                    tab="dates"
+                  >
+                    <Dates Tab />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/dates"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    slice="courseHome"
+                    tab="discussion"
+                  >
+                    <Discussion Tab />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/discussion/:path/*"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    isProgressTab={true}
+                    slice="courseHome"
+                    tab="progress"
+                  >
+                    <Progress Tab />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/progress/:targetUserId/"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    isProgressTab={true}
+                    slice="courseHome"
+                    tab="progress"
+                  >
+                    <Progress Tab />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/progress"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Tab Container
+                    fetch={[Function]}
+                    slice="courseware"
+                    tab="courseware"
+                  >
+                    <Course Exit />
+                  </Tab Container>
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/course-end"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Courseware Container />
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/:sequenceId/:unitId"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Courseware Container />
+                </DecodePageRoute>
+              }
+              path="/course/:courseId/:sequenceId"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Courseware Container />
+                </DecodePageRoute>
+              }
+              path="/course/:courseId"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Courseware Container />
+                </DecodePageRoute>
+              }
+              path="/preview/course/:courseId/:sequenceId/:unitId"
+            />
+            <Route
+              element={
+                <DecodePageRoute>
+                  <Courseware Container />
+                </DecodePageRoute>
+              }
+              path="/preview/course/:courseId/:sequenceId"
+            />
+          </Routes>
        </UserMessagesProvider>
      </NoticesProvider>
    </PathFixesProvider>
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -22,7 +22,7 @@ export const DECODE_ROUTES = {

 export const ROUTES = {
  UNSUBSCRIBE: '/goal-unsubscribe/:token',
-  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch?',
+  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch',
  REDIRECT: '/redirect/*',
  DASHBOARD: 'dashboard',
  ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
--- a/src/course-home/courseware-search/courseware-search.scss
+++ b/src/course-home/courseware-search/courseware-search.scss
@@ -9,8 +9,8 @@
  height: 100%;
  max-width: none;
  margin: 0;
-  border-top: 1px solid var(--pgn-color-light-300);
-  z-index: var(--pgn-elevation-modal-zindex); // Bootstrap's z-index layer for Modals.
+  border-top: 1px solid $light-300;
+  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.

  &__form {
    position: relative;
@@ -47,7 +47,7 @@

  &__results-summary {
    font-size: .9rem;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
    padding: 1rem 0 .5rem;
  }

@@ -62,7 +62,7 @@
  margin-top: 1.5rem;

  &__empty {
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
    padding: 6rem 0;
    text-align: center;
  }
@@ -76,17 +76,17 @@

    &:hover {
      text-decoration: none;
-      background: var(--pgn-color-light-300);
+      background: $light-300;
    }

    &:not(:first-child) {
-      border-top: 1px solid var(--pgn-color-light-300);
+      border-top: 1px solid $light-300;
    }
  }

  &__icon {
    padding: 0.375rem 0 0 0.375rem;
-    color: var(--pgn-color-gray-300);
+    color: $gray-300;
  }

  &__info {
@@ -99,7 +99,7 @@
    align-items: center;
    line-height: 2.5;
    font-size: 0.875rem;
-    color: var(--pgn-color-black);
+    color: $black;

    > span {
      display: block;
@@ -113,7 +113,7 @@
      font-variant-numeric: lining-nums tabular-nums;
      min-width: 1.25rem;
      line-height: 1rem;
-      background: var(--pgn-color-light-300);
+      background: $light-300;
      border-radius: 99rem;
      font-style: normal;
      margin-left: 0.375rem;
@@ -125,7 +125,7 @@
  &__breadcrumbs {
    display: flex;
    gap: 1.25rem;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
    overflow: hidden;
    list-style: none;
    padding: 0;
@@ -156,14 +156,14 @@
 }

 .courseware-search-results-tabs {
-  border-bottom-color: var(--pgn-color-gray-400) !important;
+  border-bottom-color: $gray-400 !important;

  &.nav-tabs .nav-link.active {
    border-bottom-width: 4px !important;
  }
 }

-@media (--pgn-size-breakpoint-min-width-md) {
+@media (min-width: map-get($grid-breakpoints, 'md')) {
  .courseware-search {
    &__close {
      right: -2.5rem;
--- a/src/course-home/outline-tab/DateSummary.jsx
+++ b/src/course-home/outline-tab/DateSummary.jsx
@@ -65,7 +65,6 @@ const DateSummary = ({
        )}
        {!linkedTitle && dateBlock.link && (
          <a
-            id={dateBlock.dateType === 'verified-upgrade-deadline' ? 'date-verified-upgrade-deadline' : ''}
            href={dateBlock.link}
            onClick={dateBlock.dateType === 'verified-upgrade-deadline' ? logVerifiedUpgradeClick : () => {}}
            className="description-link"
--- a/src/course-home/outline-tab/widgets/CourseDates.jsx
+++ b/src/course-home/outline-tab/widgets/CourseDates.jsx
@@ -39,7 +39,7 @@ const CourseDates = () => {
            />
          ))}
        </ol>
-        <a id="dates-tab-link" className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
+        <a className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
          {intl.formatMessage(messages.allDates)}
        </a>
      </div>
--- a/src/course-home/outline-tab/widgets/FlagButton.scss
+++ b/src/course-home/outline-tab/widgets/FlagButton.scss
@@ -1,18 +1,22 @@
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
 .flag-button {
-  background-color: var(--pgn-color-white);
-  border: 1px solid var(--pgn-color-light-400);
+  background-color: $white;
+  border: 1px solid $light-400;
  border-radius: .2rem;
-  box-shadow: 0 0 0 2px var(--pgn-color-light-400);
+  box-shadow: 0 0 0 2px $light-400;

  &:hover {
-    border: 1px solid var(--pgn-color-primary-300);
-    box-shadow: 0 0 0 2px var(--pgn-color-white);
+    border: 1px solid $primary-300;
+    box-shadow: 0 0 0 2px $white;
  }
 }

 .flag-button-selected {
-  border: 1px solid var(--pgn-color-primary-300);
-  box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
+  border: 1px solid $primary-300;
+  box-shadow: 0 0 0 2px $primary-300;
  pointer-events: none;
 }

--- a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss
+++ b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss
@@ -1,10 +1,10 @@
 .outline-sidebar-proctoring-panel {
-  border: 1px solid var(--pgn-color-dark-500);
-  border-top: 5px solid var(--pgn-color-brand-600);
+  border: 1px solid $dark-500;
+  border-top: 5px solid $brand-600;
 }
 .proctoring-onboarding-success {
-  border-top: 5px solid var(--pgn-color-primary-500);
+  border-top: 5px solid $primary-500;
 }
 .proctoring-onboarding-submitted {
-  border-top: 5px solid var(--pgn-color-dark-500);
+  border-top: 5px solid $dark-500;
 }
--- a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
+++ b/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
@@ -7,18 +7,18 @@

 .donut-chart-label {
  font: {
-    family: var(--pgn-typography-font-family-sans-serif);
+    family: $font-family-sans-serif;
    size: .2rem;
-    weight: var(--pgn-typography-font-weight-normal);
+    weight: $font-weight-normal;
  }
  text-anchor: middle;
 }

 .donut-chart-number {
  font: {
-    family: var(--pgn-typography-font-family-monospace);
+    family: $font-family-monospace;
    size: .5rem;
-    weight: var(--pgn-typography-font-weight-bold);
+    weight: $font-weight-bold;
  }
  line-height: 1rem;
  text-anchor: middle;
@@ -29,7 +29,7 @@
 }

 .donut-chart-text {
-  fill: var(--pgn-color-primary-500);
+  fill: $primary-500;
  -moz-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@

 .donut-ring, .donut-segment, .donut-hole {
  &.complete-stroke {
-    stroke: var(--pgn-color-info-500);
+    stroke: $info-500;
  }

  &.divider-stroke {
@@ -65,10 +65,10 @@
  }

  &.incomplete-stroke {
-    stroke: var(--pgn-color-light-300);
+    stroke: $light-300;
  }

  &.locked-stroke {
-    stroke: var(--pgn-color-primary-500);
+    stroke: $primary-500;
  }
 }
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
@@ -48,7 +48,7 @@ const CourseGradeHeader = () => {
    previewText = intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody);
  }
  return (
-    <div id="grade-course-header" className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
+    <div className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
      <div className={`col-12 ${verifiedMode ? 'col-md-9' : ''} p-0`}>
        <div className="row w-100 m-0 p-0">
          <div className="col-1 p-0">
@@ -71,7 +71,7 @@ const CourseGradeHeader = () => {
      </div>
      {verifiedMode && (
        <div className="col-12 col-md-3 mt-3 mt-md-0 p-0 align-self-center text-right">
-          <Button id="upgrade-button" variant="brand" size="sm" href={verifiedMode.upgradeUrl} onClick={logUpgradeButtonClick}>
+          <Button variant="brand" size="sm" href={verifiedMode.upgradeUrl} onClick={logUpgradeButtonClick}>
            {intl.formatMessage(messages.courseGradePreviewUpgradeButton)}
          </Button>
        </div>
--- a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
+++ b/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
@@ -4,24 +4,24 @@
  }

  .grade-bar__base {
-    fill: var(--pgn-color-light-300);
+    fill: $light-300;
  }

  .grade-bar__divider {
-    fill: var(--pgn-color-primary-500);
+    fill: $primary-500;
    width: 1px;
  }

  .grade-bar--passing {
-    fill: var(--pgn-color-primary-500);
+    fill: $primary-500;
  }

  .grade-bar--current-passing {
-    fill: var(--pgn-color-success-500);
+    fill: $success-500;
  }

  .grade-bar--current-non-passing {
-    fill: var(--pgn-color-accent-b);
+    fill: $accent-b;
  }
 }

@@ -31,22 +31,22 @@

 #minimum-grade-tooltip {
  .arrow::after {
-    border-bottom-color: var(--pgn-color-primary-500);
+    border-bottom-color: $primary-500;
  }
 }

 #passing-grade-tooltip {
-  background: var(--pgn-color-success-500);
+  background: $success-500;

  .arrow::after {
-    border-top-color: var(--pgn-color-success-500);
+    border-top-color: $success-500;
  }
 }

 #non-passing-grade-tooltip {
-  background: var(--pgn-color-accent-b);
+  background: $accent-b;

  .arrow::after {
-    border-top-color: var(--pgn-color-accent-b);
+    border-top-color: $accent-b;
  }
 }
--- a/src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx
@@ -34,7 +34,7 @@ const UpgradeToCompleteAlert = ({ logUpgradeLinkClick }) => {
  }

  return (
-    <Alert id="upgrade-complete-alert" className="bg-light-200">
+    <Alert className="bg-light-200">
      <Row className="w-100 m-0">
        <Col xs={12} md={9} className="small p-0 pr-md-2">
          <Alert.Heading>{intl.formatMessage(messages.upgradeToCompleteHeader)}</Alert.Heading>
--- a/src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx
@@ -36,7 +36,7 @@ const UpgradeToShiftDatesAlert = ({ logUpgradeLinkClick, model }) => {
  }

  return (
-    <Alert id="upgrade-shift-dates-alert" className="bg-light-200">
+    <Alert className="bg-light-200">
      <Row className="w-100 m-0">
        <Col xs={12} md={9} className="small p-0 pr-md-2">
          <strong>{intl.formatMessage(messages.missedDeadlines)}</strong>
--- a/src/course-tabs/course-tabs-navigation.scss
+++ b/src/course-tabs/course-tabs-navigation.scss
@@ -5,13 +5,13 @@
  .nav a,
  .nav button {
    &:hover {
-      background-color: var(--pgn-color-light-400);
+      background-color: $light-400;
    }
  }

  .nav a {
    &:not(.active):hover {
-      background-color: var(--pgn-color-light-400);
+      background-color: $light-400;
      border-bottom: none;
    }
  }
--- a/src/courseware/RedirectPage.jsx
+++ b/src/courseware/RedirectPage.jsx
@@ -1,20 +1,18 @@
+import PropTypes from 'prop-types';
 import {
-  generatePath, useParams, useLocation, useSearchParams,
+  generatePath, useParams, useLocation,
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';

+import queryString from 'query-string';
 import { REDIRECT_MODES } from '../constants';

-interface Props {
-  pattern: string;
-  mode: string;
-}
-
-const RedirectPage = ({ pattern = '', mode }: Props) => {
+const RedirectPage = ({
+  pattern, mode,
+}) => {
  const { courseId } = useParams();
  const location = useLocation();
-  const [searchParams] = useSearchParams();
-  const consentPath = searchParams.get('consentPath') ?? '';
+  const { consentPath } = queryString.parse(location?.search);

  const {
    LMS_BASE_URL,
@@ -41,4 +39,13 @@ const RedirectPage = ({ pattern = '', mode }: Props) => {
  return null;
 };

+RedirectPage.propTypes = {
+  pattern: PropTypes.string,
+  mode: PropTypes.string.isRequired,
+};
+
+RedirectPage.defaultProps = {
+  pattern: null,
+};
+
 export default RedirectPage;
--- a/src/courseware/RedirectPage.test.jsx
+++ b/src/courseware/RedirectPage.test.jsx
@@ -16,7 +16,6 @@ jest.mock('react-router-dom', () => ({
  useLocation: () => ({
    search: '?consentPath=/some-path',
  }),
-  useSearchParams: () => [new URLSearchParams('?consentPath=/some-path'), () => {}],
 }));

 describe('RedirectPage component', () => {
--- a/src/courseware/course/celebration/CelebrationModal.scss
+++ b/src/courseware/course/celebration/CelebrationModal.scss
@@ -22,6 +22,7 @@
    justify-content: center;

    button {
+      @extend .btn-primary;
      font-size: 1.2rem;
      width: 50%;
    }
--- a/src/courseware/course/content-tools/calculator/Calculator.jsx
+++ b/src/courseware/course/content-tools/calculator/Calculator.jsx
@@ -149,7 +149,7 @@ const Calculator = () => {
                />
              </li>
            </ul>
-            <table className="pgn__data-table small">
+            <table className="table small">
              <thead>
                <tr>
                  <th scope="col">
--- a/src/courseware/course/content-tools/calculator/calculator.scss
+++ b/src/courseware/course/content-tools/calculator/calculator.scss
@@ -4,19 +4,4 @@
    background-color: #f1f1f1;
    box-shadow: 0 -1px 0 0 #ddd;
  }
-
-  table {
-    tr {
-      border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-border);
-    }
-
-    thead tr {
-      border-bottom: calc(2 *  var(--pgn-size-border-width)) solid var(--pgn-color-border);
-      border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
-    }
-  
-    tbody tr {
-      vertical-align: top;
-    }
-  }
 }
--- a/src/courseware/course/content-tools/contentTools.scss
+++ b/src/courseware/course/content-tools/contentTools.scss
@@ -8,8 +8,8 @@
    display: inline-block;
    position: relative;
    z-index: 2;
-    background-color: #f1f1f1 !important;
-    border: solid 1px #ddd !important;
+    background-color: #f1f1f1;
+    border: solid 1px #ddd;
    border-bottom: none;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
--- a/src/courseware/course/course-exit/CourseCelebration.jsx
+++ b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -18,19 +18,19 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';

 import CelebrationMobile from './assets/celebration_456x328.gif';
 import CelebrationDesktop from './assets/celebration_750x540.gif';
-import certificate from '../../../generic/assets/edX_certificate.png';
-import certificateLocked from '../../../generic/assets/edX_locked_certificate.png';
+import certificate from '../../../generic/assets/openedx_certificate.png';
+import certificateLocked from '../../../generic/assets/openedx_locked_certificate.png';
 import { FormattedPricing } from '../../../generic/upgrade-button';
 import messages from './messages';
 import { useModel } from '../../../generic/model-store';
 import { requestCert } from '../../../course-home/data/thunks';
 import ProgramCompletion from './ProgramCompletion';
+import DashboardFootnote from './DashboardFootnote';
 import UpgradeFootnote from './UpgradeFootnote';
 import SocialIcons from '../../social-share/SocialIcons';
 import { logClick, logVisit } from './utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
-import DashboardFootnote from './DashboardFootnote';
-import { CourseRecommendationsSlot } from '../../../plugin-slots/CourseExitPluginSlots';
+import CourseRecommendationsSlot from '../../../plugin-slots/CourseRecommendationsSlot';

 const LINKEDIN_BLUE = '#2867B2';

--- a/src/courseware/course/course-exit/CourseExit.jsx
+++ b/src/courseware/course/course-exit/CourseExit.jsx
@@ -1,5 +1,8 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';

+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';

@@ -7,12 +10,13 @@ import CourseCelebration from './CourseCelebration';
 import CourseInProgress from './CourseInProgress';
 import CourseNonPassing from './CourseNonPassing';
 import { COURSE_EXIT_MODES, getCourseExitMode } from './utils';
+import messages from './messages';
 import { unsubscribeFromGoalReminders } from './data/thunks';
-import { CourseExitViewCoursesPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';

 import { useModel } from '../../../generic/model-store';

 const CourseExit = () => {
+  const intl = useIntl();
  const { courseId } = useSelector(state => state.courseware);
  const {
    certificateData,
@@ -60,7 +64,14 @@ const CourseExit = () => {

  return (
    <>
-      <CourseExitViewCoursesPluginSlot />
+      <div className="row w-100 mt-2 mb-4 justify-content-end">
+        <Button
+          variant="outline-primary"
+          href={`${getConfig().LMS_BASE_URL}/dashboard`}
+        >
+          {intl.formatMessage(messages.viewCoursesButton)}
+        </Button>
+      </div>
      {body}
    </>
  );
--- a/src/courseware/course/course-exit/DashboardFootnote.jsx
+++ b/src/courseware/course/course-exit/DashboardFootnote.jsx
@@ -1,19 +1,47 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
+import { useSelector } from 'react-redux';
+
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@openedx/paragon';
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
+import { getConfig } from '@edx/frontend-platform';
+
+import { useModel } from '../../../generic/model-store';

-import { DashboardFootnoteLinkPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 import Footnote from './Footnote';
 import messages from './messages';
+import { logClick } from './utils';

 const DashboardFootnote = ({ variant }) => {
  const intl = useIntl();
-  const dashboardLink = (<DashboardFootnoteLinkPluginSlot variant={variant} />);
+  const { courseId } = useSelector(state => state.courseware);
+  const { org } = useModel('courseHomeMeta', courseId);
+  const { administrator } = getAuthenticatedUser();
+
+  const dashboardLink = (
+    <Hyperlink
+      style={{ textDecoration: 'underline' }}
+      destination={`${getConfig().LMS_BASE_URL}/dashboard`}
+      className="text-reset"
+      onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
+    >
+      {intl.formatMessage(messages.dashboardLink)}
+    </Hyperlink>
+  );

  return (
    <Footnote
      icon={faCalendarAlt}
-      text={intl.formatMessage(messages.dashboardInfo, { dashboardLink })}
+      text={(
+        <FormattedMessage
+          id="courseCelebration.dashboardInfo" // for historical reasons
+          defaultMessage="You can access this course and its materials on your {dashboardLink}."
+          description="Text that precedes link to learner's dashboard"
+          values={{ dashboardLink }}
+        />
+      )}
    />
  );
 };
--- a/src/courseware/course/course-exit/Footnote.jsx
+++ b/src/courseware/course/course-exit/Footnote.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 const Footnote = ({ icon, text }) => (
-  <div id="celebration-footnote-wrapper" className="row w-100 mx-0 my-4 justify-content-center">
+  <div className="row w-100 mx-0 my-4 justify-content-center">
    <p className="text-gray-700">
      <FontAwesomeIcon icon={icon} style={{ width: '20px' }} />&nbsp;
      {text}
--- a/src/courseware/course/course-exit/ProgramCompletion.jsx
+++ b/src/courseware/course/course-exit/ProgramCompletion.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Button, Hyperlink } from '@openedx/paragon';
-import certImage from '../../../generic/assets/edX_certificate.png';
+import certImage from '../../../generic/assets/openedx_certificate.png';
 import messages from './messages';

 /**
--- a/src/courseware/course/course-exit/UpgradeFootnote.jsx
+++ b/src/courseware/course/course-exit/UpgradeFootnote.jsx
@@ -20,7 +20,6 @@ const UpgradeFootnote = ({ deadline, href }) => {

  const upgradeLink = (
    <Hyperlink
-      id="upgrade-link"
      style={{ textDecoration: 'underline' }}
      destination={href}
      className="text-reset"
--- a/src/courseware/course/course-exit/messages.ts
+++ b/src/courseware/course/course-exit/messages.ts
@@ -76,11 +76,6 @@ const messages = defineMessages({
    defaultMessage: 'Dashboard',
    description: 'Link to user’s dashboard',
  },
-  dashboardInfo: {
-    id: 'courseCelebration.dashboardInfo', // for historical reasons
-    defaultMessage: 'You can access this course and its materials on your {dashboardLink}.',
-    description: "Text that precedes link to learner's dashboard",
-  },
  endOfCourseDescription: {
    id: 'courseExit.endOfCourseDescription',
    defaultMessage: 'Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.',
--- a/src/courseware/course/new-sidebar/SidebarContextProvider.tsx
+++ b/src/courseware/course/new-sidebar/SidebarContextProvider.tsx
@@ -54,8 +54,6 @@ const SidebarProvider: React.FC<Props> = ({
  }, [courseId]);

  useEffect(() => {
-    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
-    window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'open');
    setHideDiscussionbar(!isDiscussionbarAvailable);
    setHideNotificationbar(!isNotificationbarAvailable);
    if (initialSidebar && currentSidebar !== initialSidebar) {
--- a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx
+++ b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx
@@ -1,13 +1,11 @@
 import React from 'react';

-import { fireEvent } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';

 import { getConfig } from '@edx/frontend-platform';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';

-import { getSessionStorage, setSessionStorage } from '../../../../../../data/sessionStorage';
 import {
  initializeMockApp, initializeTestStore, render, screen,
 } from '../../../../../../setupTest';
@@ -16,19 +14,11 @@ import { buildTopicsFromUnits } from '../../../../../data/__factories__/discussi
 import { getCourseDiscussionTopics } from '../../../../../data/thunks';
 import SidebarContext from '../../../SidebarContext';
 import DiscussionsNotificationsSidebar from '../DiscussionsNotificationsSidebar';
-import DiscussionsNotificationsTrigger from '../DiscussionsNotificationsTrigger';
 import DiscussionsWidget from './DiscussionsWidget';

 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');

-jest.mock('../../../../../../data/sessionStorage', () => ({
-  getSessionStorage: jest.fn(),
-  setSessionStorage: jest.fn(),
-}));
-
-const onClickMock = jest.fn();
-
 describe('DiscussionsWidget', () => {
  let axiosMock;
  let mockData;
@@ -91,34 +81,4 @@ describe('DiscussionsWidget', () => {
    expect(screen.queryByText('Back to course')).toBeInTheDocument();
    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
  });
-
-  it('should open notification tray if closed', () => {
-    (getSessionStorage as jest.Mock).mockReturnValue('closed');
-
-    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
-
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
-
-    expect(setSessionStorage).toHaveBeenCalledWith(
-      `notificationTrayStatus.${courseId}`,
-      'open',
-    );
-    expect(onClickMock).toHaveBeenCalled();
-  });
-
-  it('should close notification tray if open', () => {
-    (getSessionStorage as jest.Mock).mockReturnValue('open');
-
-    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
-
-    const button = screen.getByRole('button');
-    fireEvent.click(button);
-
-    expect(setSessionStorage).toHaveBeenCalledWith(
-      `notificationTrayStatus.${courseId}`,
-      'open',
-    );
-    expect(onClickMock).toHaveBeenCalled();
-  });
 });
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -13,18 +13,17 @@ import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '@src/alerts/sequence-alerts/hooks';
-import SequenceContainerSlot from '@src/plugin-slots/SequenceContainerSlot';
-import { CourseOutlineSidebarSlot } from '@src/plugin-slots/CourseOutlineSidebarSlot';
-import { CourseOutlineSidebarTriggerSlot } from '@src/plugin-slots/CourseOutlineSidebarTriggerSlot';
-import { NotificationsDiscussionsSidebarSlot } from '@src/plugin-slots/NotificationsDiscussionsSidebarSlot';
-import SequenceNavigationSlot from '@src/plugin-slots/SequenceNavigationSlot';
+import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot';

 import { getCoursewareOutlineSidebarSettings } from '../../data/selectors';
 import CourseLicense from '../course-license';
+import { NotificationsDiscussionsSidebarSlot } from '../../../plugin-slots/NotificationsDiscussionsSidebarSlot';
 import messages from './messages';
 import HiddenAfterDue from './hidden-after-due';
-import { UnitNavigation } from './sequence-navigation';
+import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
+import { CourseOutlineSidebarSlot } from '../../../plugin-slots/CourseOutlineSidebarSlot';
+import { CourseOutlineSidebarTriggerSlot } from '../../../plugin-slots/CourseOutlineSidebarTriggerSlot';

 const Sequence = ({
  unitId,
@@ -173,7 +172,7 @@ const Sequence = ({
        <div className="sequence w-100">
          {!isEnabledOutlineSidebar && (
            <div className="sequence-navigation-container">
-              <SequenceNavigationSlot
+              <SequenceNavigation
                sequenceId={sequenceId}
                unitId={unitId}
                nextHandler={() => {
@@ -218,20 +217,18 @@ const Sequence = ({

  if (sequenceStatus === 'loaded') {
    return (
-      <>
-        <div className="d-flex flex-column flex-grow-1 justify-content-center">
-          <SequenceExamWrapper
-            sequence={sequence}
-            courseId={courseId}
-            isStaff={isStaff}
-            originalUserIsStaff={originalUserIsStaff}
-            canAccessProctoredExams={canAccessProctoredExams}
-          >
-            {defaultContent}
-          </SequenceExamWrapper>
-        </div>
+      <div>
+        <SequenceExamWrapper
+          sequence={sequence}
+          courseId={courseId}
+          isStaff={isStaff}
+          originalUserIsStaff={originalUserIsStaff}
+          canAccessProctoredExams={canAccessProctoredExams}
+        >
+          {defaultContent}
+        </SequenceExamWrapper>
        <CourseLicense license={license || undefined} />
-      </>
+      </div>
    );
  }

--- a/src/courseware/course/sequence/Unit/ContentIFrame.jsx
+++ b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
+import React from 'react';

-import { ModalDialog } from '@openedx/paragon';
+import { ErrorPage } from '@edx/frontend-platform/react';
+import { StrictDict } from '@edx/react-unit-test-utils';
+import { ModalDialog, Modal } from '@openedx/paragon';
 import { ContentIFrameLoaderSlot } from '../../../../plugin-slots/ContentIFrameLoaderSlot';
-import { ContentIFrameErrorSlot } from '../../../../plugin-slots/ContentIFrameErrorSlot';

 import * as hooks from './hooks';

@@ -20,10 +22,10 @@ export const IFRAME_FEATURE_POLICY = (
  'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *; autoplay *'
 );

-export const testIDs = {
+export const testIDs = StrictDict({
  contentIFrame: 'content-iframe-test-id',
  modalIFrame: 'modal-iframe-test-id',
-};
+});

 const ContentIFrame = ({
  iframeUrl,
@@ -63,44 +65,54 @@ const ContentIFrame = ({
    onLoad: handleIFrameLoad,
  };

+  let modalContent;
+  if (modalOptions.isOpen) {
+    modalContent = modalOptions.body
+      ? <div className="unit-modal">{ modalOptions.body }</div>
+      : (
+        <iframe
+          title={modalOptions.title}
+          allow={IFRAME_FEATURE_POLICY}
+          frameBorder="0"
+          src={modalOptions.url}
+          style={{ width: '100%', height: modalOptions.height }}
+        />
+      );
+  }
+
  return (
    <>
      {(shouldShowContent && !hasLoaded) && (
-        showError ? (
-          <ContentIFrameErrorSlot courseId={courseId} />
-        ) : (
-          <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
-        )
+        showError ? <ErrorPage /> : <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
      )}
      {shouldShowContent && (
        <div className="unit-iframe-wrapper">
          <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
        </div>
      )}
-      {modalOptions.isOpen
-          && (
+      {modalOptions.isOpen && (modalOptions.isFullscreen
+        ? (
          <ModalDialog
-            className="modal-lti"
+            dialogClassName="modal-lti"
            onClose={handleModalClose}
-            size={modalOptions.isFullscreen ? 'fullscreen' : 'md'}
+            size="fullscreen"
            isOpen
            hasCloseButton={false}
          >
            <ModalDialog.Body className={modalOptions.modalBodyClassName}>
-              {modalOptions.body
-                ? <div className="unit-modal">{ modalOptions.body }</div>
-                : (
-                  <iframe
-                    title={modalOptions.title}
-                    allow={IFRAME_FEATURE_POLICY}
-                    frameBorder="0"
-                    src={modalOptions.url}
-                    style={{ width: '100%', height: modalOptions.height }}
-                  />
-                )}
+              {modalContent}
            </ModalDialog.Body>
          </ModalDialog>
-          )}
+
+        ) : (
+          <Modal
+            body={modalContent}
+            dialogClassName="modal-lti"
+            onClose={handleModalClose}
+            open
+          />
+        )
+      )}
    </>
  );
 };
--- a/src/courseware/course/sequence/Unit/ContentIFrame.test.jsx
+++ b/src/courseware/course/sequence/Unit/ContentIFrame.test.jsx
@@ -1,11 +1,26 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';

+import { ErrorPage } from '@edx/frontend-platform/react';
+import { ModalDialog, Modal } from '@openedx/paragon';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import PageLoading from '@src/generic/PageLoading';
+
+import { ContentIFrameLoaderSlot } from '@src/plugin-slots/ContentIFrameLoaderSlot';
 import * as hooks from './hooks';
-import ContentIFrame, { IFRAME_FEATURE_POLICY } from './ContentIFrame';
+import ContentIFrame, { IFRAME_FEATURE_POLICY, testIDs } from './ContentIFrame';

-jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: () => <div>ErrorPage</div> }));
+jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));

-jest.mock('@src/generic/PageLoading', () => jest.fn(() => <div>PageLoading</div>));
+jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
+  .mockComponents({
+    Modal: 'Modal',
+    ModalDialog: {
+      Body: 'ModalDialog.Body',
+    },
+  }));
+
+jest.mock('@src/generic/PageLoading', () => 'PageLoading');

 jest.mock('./hooks', () => ({
  useIFrameBehavior: jest.fn(),
@@ -53,13 +68,14 @@ const props = {
  title: 'test-title',
 };

+let el;
 describe('ContentIFrame Component', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
  describe('behavior', () => {
    beforeEach(() => {
-      render(<ContentIFrame {...props} />);
+      el = shallow(<ContentIFrame {...props} />);
    });
    it('initializes iframe behavior hook', () => {
      expect(hooks.useIFrameBehavior).toHaveBeenCalledWith({
@@ -74,61 +90,61 @@ describe('ContentIFrame Component', () => {
    });
  });
  describe('output', () => {
+    let component;
    describe('if shouldShowContent', () => {
      describe('if not hasLoaded', () => {
        it('displays errorPage if showError', () => {
          hooks.useIFrameBehavior.mockReturnValueOnce({ ...iframeBehavior, showError: true });
-          render(<ContentIFrame {...props} />);
-          const errorPage = screen.getByText('ErrorPage');
-          expect(errorPage).toBeInTheDocument();
+          el = shallow(<ContentIFrame {...props} />);
+          expect(el.instance.findByType(ErrorPage).length).toEqual(1);
        });
        it('displays PageLoading component if not showError', () => {
-          render(<ContentIFrame {...props} />);
-          const pageLoading = screen.getByText('PageLoading');
-          expect(pageLoading).toBeInTheDocument();
+          el = shallow(<ContentIFrame {...props} />);
+          [component] = el.instance.findByType(ContentIFrameLoaderSlot);
+          expect(component.props.loadingMessage).toEqual(props.loadingMessage);
        });
      });
      describe('hasLoaded', () => {
        it('does not display PageLoading or ErrorPage', () => {
          hooks.useIFrameBehavior.mockReturnValueOnce({ ...iframeBehavior, hasLoaded: true });
-          render(<ContentIFrame {...props} />);
-          const pageLoading = screen.queryByText('PageLoading');
-          expect(pageLoading).toBeNull();
-          const errorPage = screen.queryByText('ErrorPage');
-          expect(errorPage).toBeNull();
+          el = shallow(<ContentIFrame {...props} />);
+          expect(el.instance.findByType(PageLoading).length).toEqual(0);
+          expect(el.instance.findByType(ErrorPage).length).toEqual(0);
        });
      });
      it('display iframe with props from hooks', () => {
-        render(<ContentIFrame {...props} />);
-        const iframe = screen.getByTitle(props.title);
-        expect(iframe).toBeInTheDocument();
-        expect(iframe).toHaveAttribute('id', props.elementId);
-        expect(iframe).toHaveAttribute('src', props.iframeUrl);
-        expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
-        expect(iframe).toHaveAttribute('allowfullscreen', '');
-        expect(iframe).toHaveAttribute('scrolling', 'no');
-        expect(iframe).toHaveAttribute('referrerpolicy', 'origin');
+        el = shallow(<ContentIFrame {...props} />);
+        [component] = el.instance.findByTestId(testIDs.contentIFrame);
+        expect(component.props).toEqual({
+          allow: IFRAME_FEATURE_POLICY,
+          allowFullScreen: true,
+          scrolling: 'no',
+          referrerPolicy: 'origin',
+          title: props.title,
+          id: props.elementId,
+          src: props.iframeUrl,
+          height: iframeBehavior.iframeHeight,
+          onLoad: iframeBehavior.handleIFrameLoad,
+          'data-testid': testIDs.contentIFrame,
+        });
      });
    });
    describe('if not shouldShowContent', () => {
      it('does not show PageLoading, ErrorPage, or unit-iframe-wrapper', () => {
-        render(<ContentIFrame {...{ ...props, shouldShowContent: false }} />);
-        expect(screen.queryByText('PageLoading')).toBeNull();
-        expect(screen.queryByText('ErrorPage')).toBeNull();
-        expect(screen.queryByTitle(props.title)).toBeNull();
+        el = shallow(<ContentIFrame {...{ ...props, shouldShowContent: false }} />);
+        expect(el.instance.findByType(PageLoading).length).toEqual(0);
+        expect(el.instance.findByType(ErrorPage).length).toEqual(0);
+        expect(el.instance.findByTestId(testIDs.contentIFrame).length).toEqual(0);
      });
    });
    it('does not display modal if modalOptions returns isOpen: false', () => {
-      render(<ContentIFrame {...props} />);
-      const modal = screen.queryByRole('dialog');
-      expect(modal).toBeNull();
+      el = shallow(<ContentIFrame {...props} />);
+      expect(el.instance.findByType(Modal).length).toEqual(0);
    });
    describe('if modalOptions.isOpen', () => {
      const testModalOpenAndHandleClose = () => {
-        it('closes modal on close button click', () => {
-          const closeButton = screen.getByTestId('modal-backdrop');
-          closeButton.click();
-          expect(modalIFrameData.handleModalClose).toHaveBeenCalled();
+        test('Modal component isOpen, with handleModalClose from hook', () => {
+          expect(component.props.onClose).toEqual(modalIFrameData.handleModalClose);
        });
      };
      describe('fullscreen modal', () => {
@@ -138,13 +154,14 @@ describe('ContentIFrame Component', () => {
              ...modalIFrameData,
              modalOptions: { ...modalOptions.withBody, isFullscreen: true },
            });
-            render(<ContentIFrame {...props} />);
+            el = shallow(<ContentIFrame {...props} />);
+            [component] = el.instance.findByType(ModalDialog);
          });
          it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-            const dialog = screen.getByRole('dialog');
-            expect(dialog).toBeInTheDocument();
-            const modalBody = screen.getByText(modalOptions.withBody.body);
-            expect(modalBody).toBeInTheDocument();
+            const content = component.findByType(ModalDialog.Body)[0].children[0];
+            expect(content.matches(shallow(
+              <div className="unit-modal">{modalOptions.withBody.body}</div>,
+            ))).toEqual(true);
          });
          testModalOpenAndHandleClose();
        });
@@ -155,42 +172,53 @@ describe('ContentIFrame Component', () => {
                ...modalIFrameData,
                modalOptions: { ...modalOptions.withUrl, isFullscreen: true },
              });
-            render(<ContentIFrame {...props} />);
-          });
-          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-            const iframe = screen.getByTitle(modalOptions.withUrl.title);
-            expect(iframe).toBeInTheDocument();
-            expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
-            expect(iframe).toHaveAttribute('src', modalOptions.withUrl.url);
+            el = shallow(<ContentIFrame {...props} />);
+            [component] = el.instance.findByType(ModalDialog);
          });
          testModalOpenAndHandleClose();
+          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+            const content = component.findByType(ModalDialog.Body)[0].children[0];
+            expect(content.matches(shallow(
+              <iframe
+                title={modalOptions.withUrl.title}
+                allow={IFRAME_FEATURE_POLICY}
+                frameBorder="0"
+                src={modalOptions.withUrl.url}
+                style={{ width: '100%', height: modalOptions.withUrl.height }}
+              />,
+            ))).toEqual(true);
+          });
        });
      });
      describe('body modal', () => {
        beforeEach(() => {
          hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
-          render(<ContentIFrame {...props} />);
+          el = shallow(<ContentIFrame {...props} />);
+          [component] = el.instance.findByType(Modal);
        });
        it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          const dialog = screen.getByRole('dialog');
-          expect(dialog).toBeInTheDocument();
-          const modalBody = screen.getByText(modalOptions.withBody.body);
-          expect(modalBody).toBeInTheDocument();
+          expect(component.props.body).toEqual(<div className="unit-modal">{modalOptions.withBody.body}</div>);
        });
        testModalOpenAndHandleClose();
      });
      describe('url modal', () => {
        beforeEach(() => {
          hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
-          render(<ContentIFrame {...props} />);
-        });
-        it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-          const iframe = screen.getByTitle(modalOptions.withUrl.title);
-          expect(iframe).toBeInTheDocument();
-          expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
-          expect(iframe).toHaveAttribute('src', modalOptions.withUrl.url);
+          el = shallow(<ContentIFrame {...props} />);
+          [component] = el.instance.findByType(Modal);
        });
        testModalOpenAndHandleClose();
+        it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+          expect(component.props.body).toEqual(
+            <iframe
+              title={modalOptions.withUrl.title}
+              allow={IFRAME_FEATURE_POLICY}
+              frameBorder="0"
+              src={modalOptions.withUrl.url}
+              style={{ width: '100%', height: modalOptions.withUrl.height }}
+            />,
+          );
+        });
      });
    });
  });
--- a/src/courseware/course/sequence/Unit/UnitSuspense.test.jsx
+++ b/src/courseware/course/sequence/Unit/UnitSuspense.test.jsx
@@ -1,15 +1,22 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import React from 'react';
+
+import { formatMessage, shallow } from '@edx/react-unit-test-utils';

 import { useModel } from '@src/generic/model-store';
+import PageLoading from '@src/generic/PageLoading';
+
+import { GatedUnitContentMessageSlot } from '@src/plugin-slots/GatedUnitContentMessageSlot';
+import messages from '../messages';
+import HonorCode from '../honor-code';
+import LockPaywall from '../lock-paywall';
 import hooks from './hooks';
 import { modelKeys } from './constants';

 import UnitSuspense from './UnitSuspense';

 jest.mock('@edx/frontend-platform/i18n', () => ({
-  ...jest.requireActual('@edx/frontend-platform/i18n'),
  defineMessages: m => m,
+  useIntl: () => ({ formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage }),
 }));

 jest.mock('react', () => ({
@@ -17,9 +24,10 @@ jest.mock('react', () => ({
  Suspense: 'Suspense',
 }));

-jest.mock('../honor-code', () => jest.fn(() => <div>HonorCode</div>));
-jest.mock('../lock-paywall', () => jest.fn(() => <div>LockPaywall</div>));
+jest.mock('../honor-code', () => 'HonorCode');
+jest.mock('../lock-paywall', () => 'LockPaywall');
 jest.mock('@src/generic/model-store', () => ({ useModel: jest.fn() }));
+jest.mock('@src/generic/PageLoading', () => 'PageLoading');

 jest.mock('./hooks', () => ({
  useShouldDisplayHonorCode: jest.fn(() => false),
@@ -38,6 +46,7 @@ const props = {
  id: 'test-id',
 };

+let el;
 describe('UnitSuspense component', () => {
  beforeEach(() => {
    jest.clearAllMocks();
@@ -45,7 +54,7 @@ describe('UnitSuspense component', () => {
  });
  describe('behavior', () => {
    it('initializes models', () => {
-      render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+      el = shallow(<UnitSuspense {...props} />);
      const { calls } = useModel.mock;
      const [unitCall] = calls.filter(call => call[0] === modelKeys.units);
      const [metaCall] = calls.filter(call => call[0] === modelKeys.coursewareMeta);
@@ -57,9 +66,8 @@ describe('UnitSuspense component', () => {
    describe('LockPaywall', () => {
      const testNoPaywall = () => {
        it('does not display LockPaywall', () => {
-          render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
-          const lockPaywall = screen.queryByText('LockPaywall');
-          expect(lockPaywall).toBeNull();
+          el = shallow(<UnitSuspense {...props} />);
+          expect(el.instance.findByType(LockPaywall).length).toEqual(0);
        });
      };
      describe('gating not enabled', () => { testNoPaywall(); });
@@ -70,29 +78,29 @@ describe('UnitSuspense component', () => {
      describe('gating enabled, gated content included', () => {
        beforeEach(() => { mockModels(true, true); });
        it('displays LockPaywall in Suspense wrapper with PageLoading fallback', () => {
-          hooks.useShouldDisplayHonorCode.mockReturnValueOnce(false);
-          render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
-          const lockPaywall = screen.getByText('LockPaywall');
-          expect(lockPaywall).toBeInTheDocument();
-          const suspenseWrapper = lockPaywall.closest('suspense');
-          expect(suspenseWrapper).toBeInTheDocument();
+          el = shallow(<UnitSuspense {...props} />);
+          const [component] = el.instance.findByType(GatedUnitContentMessageSlot);
+          expect(component.parent.type).toEqual('Suspense');
+          expect(component.parent.props.fallback)
+            .toEqual(<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />);
+          expect(component.props.courseId).toEqual(props.courseId);
        });
      });
    });
    describe('HonorCode', () => {
      it('does not display HonorCode if useShouldDisplayHonorCode => false', () => {
        hooks.useShouldDisplayHonorCode.mockReturnValueOnce(false);
-        render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
-        const honorCode = screen.queryByText('HonorCode');
-        expect(honorCode).toBeNull();
+        el = shallow(<UnitSuspense {...props} />);
+        expect(el.instance.findByType(HonorCode).length).toEqual(0);
      });
      it('displays HonorCode component in Suspense wrapper with PageLoading fallback if shouldDisplayHonorCode', () => {
        hooks.useShouldDisplayHonorCode.mockReturnValueOnce(true);
-        render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
-        const honorCode = screen.getByText('HonorCode');
-        expect(honorCode).toBeInTheDocument();
-        const suspenseWrapper = honorCode.closest('suspense');
-        expect(suspenseWrapper).toBeInTheDocument();
+        el = shallow(<UnitSuspense {...props} />);
+        const [component] = el.instance.findByType(HonorCode);
+        expect(component.parent.type).toEqual('Suspense');
+        expect(component.parent.props.fallback)
+          .toEqual(<PageLoading srMessage={formatMessage(messages.loadingHonorCode)} />);
+        expect(component.props.courseId).toEqual(props.courseId);
      });
    });
  });
--- a/src/courseware/course/sequence/Unit/constants.js
+++ b/src/courseware/course/sequence/Unit/constants.js
@@ -1,25 +1,26 @@
-export const modelKeys = {
+import { StrictDict } from '@edx/react-unit-test-utils/dist';
+
+export const modelKeys = StrictDict({
  units: 'units',
  coursewareMeta: 'coursewareMeta',
-} as const;
+});

-export const views = {
+export const views = StrictDict({
  student: 'student_view',
  public: 'public_view',
-} as const;
+});

 export const loadingState = 'loading';

-export const messageTypes = {
+export const messageTypes = StrictDict({
  modal: 'plugin.modal',
  resize: 'plugin.resize',
  videoFullScreen: 'plugin.videoFullScreen',
-  autoAdvance: 'plugin.autoAdvance',
-} as const;
+});

-export default {
+export default StrictDict({
  modelKeys,
  views,
  loadingState,
  messageTypes,
-};
+});
--- a/src/courseware/course/sequence/Unit/hooks/useExamAccess.js
+++ b/src/courseware/course/sequence/Unit/hooks/useExamAccess.js
@@ -1,13 +1,19 @@
 import React from 'react';

 import { logError } from '@edx/frontend-platform/logging';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
 import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from '@edx/frontend-lib-special-exams';

+export const stateKeys = StrictDict({
+  accessToken: 'accessToken',
+  blockAccess: 'blockAccess',
+});
+
 const useExamAccess = ({
  id,
 }) => {
  const isExam = useIsExam();
-  const [blockAccess, setBlockAccess] = React.useState(isExam);
+  const [blockAccess, setBlockAccess] = useKeyedState(stateKeys.blockAccess, isExam);

  const fetchExamAccessToken = useFetchExamAccessToken();

--- a/src/courseware/course/sequence/Unit/urls.js
+++ b/src/courseware/course/sequence/Unit/urls.js
@@ -0,0 +1,35 @@
+import { getConfig } from '@edx/frontend-platform';
+import { stringifyUrl } from 'query-string';
+
+export const iframeParams = {
+  show_title: 0,
+  show_bookmark: 0,
+  recheck_access: 1,
+};
+
+export const getIFrameUrl = ({
+  id,
+  view,
+  format,
+  examAccess,
+  jumpToId,
+  preview,
+}) => {
+  const xblockUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}`;
+  return stringifyUrl({
+    url: xblockUrl,
+    query: {
+      ...iframeParams,
+      view,
+      preview,
+      ...(format && { format }),
+      ...(!examAccess.blockAccess && { exam_access: examAccess.accessToken }),
+      jumpToId, // Pass jumpToId as query param as fragmentIdentifier is not passed to server.
+    },
+    fragmentIdentifier: jumpToId, // this is used by browser to scroll to correct block.
+  });
+};
+
+export default {
+  getIFrameUrl,
+};
--- a/src/courseware/course/sequence/Unit/urls.test.js
+++ b/src/courseware/course/sequence/Unit/urls.test.js
@@ -0,0 +1,83 @@
+import { getConfig } from '@edx/frontend-platform';
+import { stringifyUrl } from 'query-string';
+import { getIFrameUrl, iframeParams } from './urls';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+jest.mock('query-string', () => ({
+  stringifyUrl: jest.fn((arg) => ({ stringifyUrl: arg })),
+}));
+
+const config = { LMS_BASE_URL: 'test-lms-url' };
+getConfig.mockReturnValue(config);
+
+const props = {
+  id: 'test-id',
+  view: 'test-view',
+  format: 'test-format',
+  examAccess: { blockAccess: false, accessToken: 'test-access-token' },
+  preview: false,
+};
+
+describe('urls module getIFrameUrl', () => {
+  test('format provided, exam access and token available', () => {
+    const url = stringifyUrl({
+      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
+      query: {
+        ...iframeParams,
+        view: props.view,
+        format: props.format,
+        exam_access: props.examAccess.accessToken,
+        preview: props.preview,
+      },
+    });
+    expect(getIFrameUrl(props)).toEqual(url);
+  });
+  test('no format provided, exam access blocked', () => {
+    const url = stringifyUrl({
+      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
+      query: { ...iframeParams, view: props.view, preview: props.preview },
+    });
+    expect(getIFrameUrl({
+      id: props.id,
+      view: props.view,
+      preview: props.preview,
+      examAccess: { blockAccess: true },
+    })).toEqual(url);
+  });
+  test('jumpToId and fragmentIdentifier is added to url', () => {
+    const url = stringifyUrl({
+      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
+      query: {
+        ...iframeParams,
+        view: props.view,
+        format: props.format,
+        preview: props.preview,
+        exam_access: props.examAccess.accessToken,
+        jumpToId: 'some-xblock-id',
+      },
+      fragmentIdentifier: 'some-xblock-id',
+    });
+    expect(getIFrameUrl({
+      ...props,
+      jumpToId: 'some-xblock-id',
+    })).toEqual(url);
+  });
+  test('preview is true and url param equals 1', () => {
+    const url = stringifyUrl({
+      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
+      query: {
+        ...iframeParams,
+        view: props.view,
+        format: props.format,
+        preview: true,
+        exam_access: props.examAccess.accessToken,
+      },
+    });
+    expect(getIFrameUrl({
+      ...props,
+      preview: true,
+    })).toEqual(url);
+  });
+});
--- a/src/courseware/course/sequence/Unit/urls.test.ts
+++ b/src/courseware/course/sequence/Unit/urls.test.ts
@@ -1,42 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { getIFrameUrl } from './urls';
-
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(),
-}));
-const config = { LMS_BASE_URL: 'https://test-lms-url' };
-getConfig.mockReturnValue(config);
-
-const props = {
-  id: 'test-id',
-  view: 'test-view',
-  format: 'test-format',
-  examAccess: { blockAccess: false, accessToken: 'test-access-token' },
-  preview: false,
-};
-
-describe('urls module getIFrameUrl', () => {
-  test('format provided, exam access and token available', () => {
-    expect(getIFrameUrl(props)).toEqual('https://test-lms-url/xblock/test-id?exam_access=test-access-token&format=test-format&preview=false&recheck_access=1&show_bookmark=0&show_title=0&view=test-view');
-  });
-  test('no format provided, exam access blocked', () => {
-    expect(getIFrameUrl({
-      id: props.id,
-      view: props.view,
-      preview: props.preview,
-      examAccess: { blockAccess: true },
-    })).toEqual('https://test-lms-url/xblock/test-id?preview=false&recheck_access=1&show_bookmark=0&show_title=0&view=test-view');
-  });
-  test('jumpToId and fragmentIdentifier is added to url', () => {
-    expect(getIFrameUrl({
-      ...props,
-      jumpToId: 'some-xblock-id',
-    })).toEqual('https://test-lms-url/xblock/test-id?exam_access=test-access-token&format=test-format&jumpToId=some-xblock-id&preview=false&recheck_access=1&show_bookmark=0&show_title=0&view=test-view#some-xblock-id');
-  });
-  test('preview is true and url param equals 1', () => {
-    expect(getIFrameUrl({
-      ...props,
-      preview: true,
-    })).toEqual('https://test-lms-url/xblock/test-id?exam_access=test-access-token&format=test-format&preview=true&recheck_access=1&show_bookmark=0&show_title=0&view=test-view');
-  });
-});
--- a/src/courseware/course/sequence/Unit/urls.ts
+++ b/src/courseware/course/sequence/Unit/urls.ts
@@ -1,49 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-
-export const iframeParams = {
-  show_title: 0,
-  show_bookmark: 0,
-  recheck_access: 1,
-};
-
-interface Props {
-  id: string;
-  view: string;
-  format?: string | null;
-  examAccess: { blockAccess: boolean, accessToken?: string };
-  jumpToId?: string;
-  preview: boolean;
-}
-
-export const getIFrameUrl = ({
-  id,
-  view,
-  format = null,
-  examAccess,
-  jumpToId,
-  preview,
-}: Props) => {
-  const xblockUrl = new URL(`${getConfig().LMS_BASE_URL}/xblock/${id}`);
-  for (const [key, value] of Object.entries(iframeParams)) {
-    xblockUrl.searchParams.set(key, String(value));
-  }
-  xblockUrl.searchParams.set('view', view);
-  xblockUrl.searchParams.set('preview', String(preview));
-  if (format) {
-    xblockUrl.searchParams.set('format', format);
-  }
-  if (!examAccess.blockAccess) {
-    xblockUrl.searchParams.set('exam_access', examAccess.accessToken!);
-  }
-  // Pass jumpToId as query param as fragmentIdentifier is not passed to server.
-  if (jumpToId) {
-    xblockUrl.searchParams.set('jumpToId', jumpToId);
-    xblockUrl.hash = `#${jumpToId}`; // this is used by browser to scroll to correct block.
-  }
-  xblockUrl.searchParams.sort();
-  return xblockUrl.toString();
-};
-
-export default {
-  getIFrameUrl,
-};
--- a/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
+++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.jsx
@@ -9,7 +9,7 @@ import {
 import { Locked } from '@openedx/paragon/icons';
 import SidebarContext from '../../sidebar/SidebarContext';
 import messages from './messages';
-import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
+import certificateLocked from '../../../../generic/assets/openedx_locked_certificate.png';
 import { useModel } from '../../../../generic/model-store';
 import { UpgradeButton } from '../../../../generic/upgrade-button';
 import {
--- a/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
+++ b/src/courseware/course/sequence/lock-paywall/LockPaywall.scss
@@ -4,7 +4,7 @@
 }

 .lock-paywall-container svg {
-    color: var(--pgn-color-primary-700);
+    color: $primary-700;
 }

@media only screen and (min-width: 992px) and (max-width: 1100px) {
--- a/src/courseware/course/share/ShareButton.jsx
+++ b/src/courseware/course/share/ShareButton.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { TwitterShareButton, TwitterIcon } from 'react-share';
+import { stringifyUrl } from 'query-string';
+
+import { Icon } from '@openedx/paragon';
+import messages from './messages';
+
+const ShareTwitterIcon = () => (
+  <TwitterIcon
+    round
+    iconFillColor="#0A3055"
+    bgStyle={{
+      fill: '#fff',
+    }}
+  />
+);
+
+const ShareButton = ({ url }) => {
+  const { formatMessage } = useIntl();
+
+  const twitterUrl = stringifyUrl({
+    url,
+    query: {
+      utm_source: 'twitter',
+      utm_medium: 'social',
+      utm_campaign: 'social-share-exp',
+    },
+  });
+
+  return (
+    <TwitterShareButton
+      url={twitterUrl}
+      title={formatMessage(messages.shareQuote)}
+      resetButtonStyle={false}
+      className="px-1 ml-n1 btn-sm text-primary-500 btn btn-link"
+    >
+      <Icon src={ShareTwitterIcon} />
+      {formatMessage(messages.shareButton)}
+    </TwitterShareButton>
+  );
+};
+
+ShareButton.propTypes = {
+  url: PropTypes.string.isRequired,
+};
+
+export default ShareButton;
--- a/src/courseware/course/share/messages.ts
+++ b/src/courseware/course/share/messages.ts
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  shareButton: {
+    id: 'learn.sequence.share.button',
+    defaultMessage: 'Share this content',
+    description: 'share message button message',
+  },
+  shareModalTitle: {
+    id: 'learn.sequence.share.modal.title',
+    defaultMessage: 'Title',
+    description: 'share message modal title',
+  },
+  shareModalBody: {
+    id: 'learn.sequence.share.modal.body',
+    defaultMessage: 'Copy the link below to share this content.',
+    description: 'share message modal body',
+  },
+  shareQuote: {
+    id: 'learn.sequence.share.quote',
+    defaultMessage: 'Here\'s a fun clip from a class I\'m taking on @edXonline.\n',
+    description: 'share message quote',
+  },
+});
+
+export default messages;
--- a/src/courseware/course/sidebar/common/SidebarBase.scss
+++ b/src/courseware/course/sidebar/common/SidebarBase.scss
@@ -1,5 +1,5 @@
 #course-sidebar {
-    @media (--pgn-size-breakpoint-max-width-lg) {
+    @media (max-width: -1 + map-get($grid-breakpoints, "lg")) {
        overflow-y: scroll;
        padding: 0 .625rem !important;
    }
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
@@ -7,6 +7,7 @@ import {
  ChevronLeft as ChevronLeftIcon,
 } from '@openedx/paragon/icons';

+import { useModel } from '@src/generic/model-store';
 import { LOADING } from '@src/constants';
 import PageLoading from '@src/generic/PageLoading';
 import SidebarSection from './components/SidebarSection';
@@ -34,13 +35,13 @@ const CourseOutlineTray = () => {
    sequences,
  } = useCourseOutlineSidebar();

-  const resolvedSectionId = selectedSection
-    || Object.keys(sections).find(
-      (sectionId) => sections[sectionId].sequenceIds.includes(activeSequenceId),
-    );
+  const {
+    sectionId: activeSectionId,
+  } = useModel('sequences', activeSequenceId);
+
  const sectionsIds = Object.keys(sections);
-  const sequenceIds = sections[resolvedSectionId]?.sequenceIds || [];
-  const backButtonTitle = sections[resolvedSectionId]?.title;
+  const sequenceIds = sections[selectedSection || activeSectionId]?.sequenceIds || [];
+  const backButtonTitle = sections[selectedSection || activeSectionId]?.title;

  const handleBackToSectionLevel = () => {
    setDisplaySectionLevel();
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
@@ -1,12 +1,14 @@
 .outline-sidebar-wrapper {
    width: 32.125rem;
    max-width: 100%;
+    overflow: auto;
    position: relative;
    flex-shrink: 0;
 }

 .outline-sidebar {
-    @media (--pgn-size-breakpoint-min-width-xl) {
+    @media (min-width: map-get($grid-breakpoints, "xl")) {
+        position: absolute;
        left: 0;
        top: 0;
    }
@@ -23,12 +25,12 @@
    }

    .outline-sidebar-heading {
-        font-weight: var(--pgn-typography-font-weight-bold);
+        font-weight: $font-weight-bold;
    }
 }

 .course-sidebar-section {
-    background: var(--pgn-color-white);
+    background: $white;
    border: 1px solid #d7d3d1;

    button {
@@ -52,7 +54,7 @@
 #outline-sidebar-outline {
    margin-top: -1px;

-    @media (--pgn-size-breakpoint-min-width-xl) {
+    @media (min-width: map-get($grid-breakpoints, "xl")) {
        margin-bottom: 0;
    }

@@ -62,14 +64,14 @@

        .collapsible-trigger {
            border-radius: 0;
-            padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5);
+            padding: map-get($spacers, 3\.5) map-get($spacers, 4) map-get($spacers, 3\.5) map-get($spacers, 5);

-            @media (--pgn-size-breakpoint-max-width-sm) {
-                padding-left: var(--pgn-spacing-spacer-4);
+            @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+                padding-left: map-get($spacers, 4);
            }

            &:hover {
-                background-color: var(--pgn-color-light-500);
+                background-color: $light-500;
            }

            .collapsible-icon {
@@ -78,7 +80,7 @@
        }

        &:last-child .pgn_collapsible {
-            margin-bottom: 0px !important;
+            @extend .mb-0;
        }
    }

@@ -86,15 +88,15 @@
        padding: 0;

        ol li > a {
-            padding: var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-4) var(--pgn-spacing-spacer-3-5) var(--pgn-spacing-spacer-5-5);
+            padding: map-get($spacers, 3\.5) map-get($spacers, 4) map-get($spacers, 3\.5) map-get($spacers, 5\.5);

-            @media (--pgn-size-breakpoint-max-width-sm) {
-                padding-left: var(--pgn-spacing-spacer-4-5);
+            @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+                padding-left: map-get($spacers, 4\.5);
            }

            &:hover {
                text-decoration: none;
-                background-color: var(--pgn-color-light-500);
+                background-color: $light-500;
            }
        }
    }
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
@@ -102,21 +102,6 @@ describe('<CourseOutlineTray />', () => {
    expect(mockToggleSidebar).toHaveBeenCalledWith(null);
  });

-  it('collapses sidebar correctly when screen is resized', async () => {
-    const mockToggleSidebar = jest.fn();
-    await initTestStore();
-    renderWithProvider({ toggleSidebar: mockToggleSidebar });
-
-    const collapseBtn = screen.getByRole('button', { name: messages.toggleCourseOutlineTrigger.defaultMessage });
-    expect(collapseBtn).toBeInTheDocument();
-
-    // Simulate screen resize
-    window.innerWidth = 500;
-    window.dispatchEvent(new Event('resize'));
-
-    expect(mockToggleSidebar).toHaveBeenCalledWith(null);
-  });
-
  it('navigates to section or sequence level correctly on click by back/section button', async () => {
    const user = userEvent.setup();
    await initTestStore();
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx
@@ -6,12 +6,12 @@ import {

 import { DashedCircleIcon } from '../icons';

-const CompletionIcon = ({ completionStat: { completed = 0, total = 0 }, enabled }) => {
+const CompletionIcon = ({ completionStat: { completed = 0, total = 0 } }) => {
  const percentage = total !== 0 ? Math.min((completed / total) * 100, 100) : 0;
  const remainder = 100 - percentage;

  switch (true) {
-    case !completed || !enabled:
+    case !completed:
      return <LmsCompletionSolidIcon className="text-gray-300" data-testid="completion-solid-icon" />;
    case completed === total:
      return <CheckCircleIcon className="text-success" data-testid="check-circle-icon" />;
@@ -25,7 +25,6 @@ CompletionIcon.propTypes = {
    completed: PropTypes.number,
    total: PropTypes.number,
  }).isRequired,
-  enabled: PropTypes.bool.isRequired,
 };

 export default CompletionIcon;
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.jsx
@@ -3,33 +3,21 @@ import { render, screen } from '@testing-library/react';
 import CompletionIcon from './CompletionIcon';

 describe('CompletionIcon', () => {
-  it('renders check circle icon when completion is equal to total and completion tracking is enabled', () => {
+  it('renders check circle icon when completion is equal to total', () => {
    const completionStat = { completed: 5, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} enabled />);
+    render(<CompletionIcon completionStat={completionStat} />);
    expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
  });

-  it('renders dashed circle icon when completion is between 0 and total and completion tracking is enabled', () => {
+  it('renders dashed circle icon when completion is between 0 and total', () => {
    const completionStat = { completed: 2, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} enabled />);
+    render(<CompletionIcon completionStat={completionStat} />);
    expect(screen.getByTestId('dashed-circle-icon')).toBeInTheDocument();
  });

-  it('renders completion solid icon when completion is between 0 and total and completion tracking is not enabled', () => {
-    const completionStat = { completed: 2, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} enabled={false} />);
-    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
-  });
-
-  it('renders completion solid icon when completion is 0 and enabled', () => {
+  it('renders completion solid icon when completion is 0', () => {
    const completionStat = { completed: 0, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} enabled />);
-    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
-  });
-
-  it('renders completion solid icon when completion is at any value and not enabled', () => {
-    const completionStat = { completed: 0, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} enabled={false} />);
+    render(<CompletionIcon completionStat={completionStat} />);
    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
  });
 });
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
@@ -18,24 +18,21 @@ const SidebarSection = ({ section, handleSelectSection }) => {
    completionStat,
  } = section;

-  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId } = useCourseOutlineSidebar();
  const isActiveSection = sequenceIds.includes(activeSequenceId);

  const sectionTitle = (
    <>
      <div className="col-auto p-0">
-        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
+        <CompletionIcon completionStat={completionStat} />
      </div>
      <div className="col-10 ml-3 p-0 flex-grow-1 text-dark-500 text-left text-break">
        {title}
-        {isEnabledCompletionTracking && (
-          <span className="sr-only">
-            , {intl.formatMessage(complete
-            ? courseOutlineMessages.completedSection
-            : courseOutlineMessages.incompleteSection)}
-          </span>
-        )}
-
+        <span className="sr-only">
+          , {intl.formatMessage(complete
+          ? courseOutlineMessages.completedSection
+          : courseOutlineMessages.incompleteSection)}
+        </span>
      </div>
    </>
  );
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx
@@ -28,24 +28,22 @@ const SidebarSequence = ({
  } = sequence;

  const [open, setOpen] = useState(defaultOpen);
-  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineSidebar();
+  const { activeSequenceId, units } = useCourseOutlineSidebar();
  const isActiveSequence = id === activeSequenceId;

  const sectionTitle = (
    <>
      <div className="col-auto p-0" style={{ fontSize: '1.1rem' }}>
-        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
+        <CompletionIcon completionStat={completionStat} />
      </div>
      <div className="col-9 d-flex flex-column flex-grow-1 ml-3 mr-auto p-0 text-left">
        <span className="align-middle text-dark-500">{title}</span>
        {specialExamInfo && <span className="align-middle small text-muted">{specialExamInfo}</span>}
-        {isEnabledCompletionTracking && (
-          <span className="sr-only">
-            , {intl.formatMessage(complete
-            ? courseOutlineMessages.completedAssignment
-            : courseOutlineMessages.incompleteAssignment)}
-          </span>
-        )}
+        <span className="sr-only">
+          , {intl.formatMessage(complete
+          ? courseOutlineMessages.completedAssignment
+          : courseOutlineMessages.incompleteAssignment)}
+        </span>
      </div>
    </>
  );
@@ -71,7 +69,6 @@ const SidebarSequence = ({
              activeUnitId={activeUnitId}
              isFirst={index === 0}
              isLocked={type === UNIT_ICON_TYPES.lock}
-              isCompletionTrackingEnabled={isEnabledCompletionTracking}
            />
          ))}
        </ol>
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.test.jsx
@@ -66,7 +66,7 @@ describe('<SidebarSequence />', () => {
    expect(screen.queryByText(unit.title)).not.toBeInTheDocument();
  });

-  it('renders correctly when sequence is not collapsed and complete and completion tracking enabled', async () => {
+  it('renders correctly when sequence is not collapsed and complete', async () => {
    const user = userEvent.setup();
    await initTestStore();
    renderWithProvider({
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
@@ -15,7 +15,6 @@ const SidebarUnit = ({
  isActive,
  isLocked,
  activeUnitId,
-  isCompletionTrackingEnabled,
 }) => {
  const intl = useIntl();
  const {
@@ -25,7 +24,6 @@ const SidebarUnit = ({
  } = unit;

  const iconType = isLocked ? UNIT_ICON_TYPES.lock : icon;
-  const completeAndEnabled = complete && isCompletionTrackingEnabled;

  return (
    <li className={classNames({ 'bg-info-100': isActive, 'border-top border-light': !isFirst })}>
@@ -38,17 +36,15 @@ const SidebarUnit = ({
        }}
      >
        <div className="col-auto p-0">
-          <UnitIcon type={iconType} isCompleted={completeAndEnabled} />
+          <UnitIcon type={iconType} isCompleted={complete} />
        </div>
        <div className="col-10 p-0 ml-3 text-break">
          <span className="align-middle">
            {title}
          </span>
-          {isCompletionTrackingEnabled && (
-            <span className="sr-only">
-              , {intl.formatMessage(complete ? messages.completedUnit : messages.incompleteUnit)}
-            </span>
-          )}
+          <span className="sr-only">
+            , {intl.formatMessage(complete ? messages.completedUnit : messages.incompleteUnit)}
+          </span>
        </div>
      </UnitLinkWrapper>
    </li>
@@ -70,7 +66,6 @@ SidebarUnit.propTypes = {
  courseId: PropTypes.string.isRequired,
  sequenceId: PropTypes.string.isRequired,
  activeUnitId: PropTypes.string.isRequired,
-  isCompletionTrackingEnabled: PropTypes.bool.isRequired,
 };

 export default SidebarUnit;
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx
@@ -50,7 +50,6 @@ describe('<SidebarUnit />', () => {
                unit={{ ...unit, icon: 'video', isLocked: false }}
                isActive={false}
                activeUnitId={unit.id}
-                isCompletionTrackingEnabled
                {...props}
              />
            </MemoryRouter>
@@ -69,7 +68,7 @@ describe('<SidebarUnit />', () => {
    expect(container.querySelector('.text-success')).not.toBeInTheDocument();
  });

-  it('renders correctly when unit is complete and tracking enabled', async () => {
+  it('renders correctly when unit is complete', async () => {
    await initTestStore();
    const container = renderWithProvider({ unit: { ...unit, complete: true } });

--- a/src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx
@@ -1,10 +1,7 @@
-import {
-  useContext, useEffect, useLayoutEffect, useState,
-} from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { breakpoints } from '@openedx/paragon';

 import { useModel } from '@src/generic/model-store';
 import { LOADED } from '@src/constants';
@@ -25,10 +22,7 @@ import { ID } from './constants';
 export const useCourseOutlineSidebar = () => {
  const dispatch = useDispatch();
  const isCollapsedOutlineSidebar = window.sessionStorage.getItem('hideCourseOutlineSidebar');
-  const {
-    enableNavigationSidebar: isEnabledSidebar,
-    enableCompletionTracking: isEnabledCompletionTracking,
-  } = useSelector(getCoursewareOutlineSidebarSettings);
+  const { enableNavigationSidebar: isEnabledSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
  const courseOutlineShouldUpdate = useSelector(getCourseOutlineShouldUpdate);
  const courseOutlineStatus = useSelector(getCourseOutlineStatus);
  const sequenceStatus = useSelector(getSequenceStatus);
@@ -57,18 +51,13 @@ export const useCourseOutlineSidebar = () => {
  } = course.entranceExamData || {};
  const isActiveEntranceExam = entranceExamEnabled && !entranceExamPassed;

-  const collapseSidebar = () => {
-    toggleSidebar(null);
-    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
-  };
-
  const handleToggleCollapse = () => {
    if (currentSidebar === ID) {
-      collapseSidebar();
+      toggleSidebar(null);
+      window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
    } else {
      toggleSidebar(ID);
      window.sessionStorage.removeItem('hideCourseOutlineSidebar');
-      window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'closed');
    }
  };

@@ -115,28 +104,12 @@ export const useCourseOutlineSidebar = () => {
    }
  }, [courseId, isEnabledSidebar, courseOutlineShouldUpdate]);

-  // Collapse sidebar if screen resized to a width that displays the sidebar automatically
-  useLayoutEffect(() => {
-    const handleResize = () => {
-      // breakpoints.large.maxWidth is 1200px and currently the breakpoint for showing the sidebar
-      if (currentSidebar === ID && global.innerWidth < breakpoints.large.maxWidth) {
-        collapseSidebar();
-      }
-    };
-
-    global.addEventListener('resize', handleResize);
-    return () => {
-      global.removeEventListener('resize', handleResize);
-    };
-  }, [isOpen]);
-
  return {
    courseId,
    unitId,
    currentSidebar,
    shouldDisplayFullScreen,
    isEnabledSidebar,
-    isEnabledCompletionTracking,
    isOpen,
    setIsOpen,
    handleToggleCollapse,
--- a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
+++ b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss
@@ -1,5 +1,5 @@
 .discussions-sidebar-frame {
-    @media (--pgn-size-breakpoint-max-width-xl) {
+    @media (max-width: -1 + map-get($grid-breakpoints, "xl")) {
        max-height: calc(100vh - 65px);
    }
 }
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -115,6 +115,5 @@ export async function getCoursewareOutlineSidebarToggles(courseId) {
  return {
    enable_navigation_sidebar: data.enable_navigation_sidebar || false,
    always_open_auxiliary_sidebar: data.always_open_auxiliary_sidebar || false,
-    enable_completion_tracking: data.enable_completion_tracking || false,
  };
 }
--- a/src/courseware/data/redux.test.js
+++ b/src/courseware/data/redux.test.js
@@ -113,7 +113,6 @@ describe('Data layer integration tests', () => {
      axiosMock.onGet(coursewareSidebarSettingsUrl).reply(200, {
        enable_navigation_sidebar: true,
        always_open_auxiliary_sidebar: true,
-        enable_completion_tracking: true,
      });

      await executeThunk(thunks.fetchCourse(courseId), store.dispatch);
@@ -127,7 +126,6 @@ describe('Data layer integration tests', () => {
      expect(state.courseware.coursewareOutlineSidebarSettings).toEqual({
        enableNavigationSidebar: true,
        alwaysOpenAuxiliarySidebar: true,
-        enableCompletionTracking: true,
      });

      // check that at least one key camel cased, thus course data normalized
@@ -156,7 +154,6 @@ describe('Data layer integration tests', () => {
      expect(state.courseware.coursewareOutlineSidebarSettings).toEqual({
        enableNavigationSidebar: false,
        alwaysOpenAuxiliarySidebar: false,
-        enableCompletionTracking: false,
      });

      // check that at least one key camel cased, thus course data normalized
--- a/src/courseware/data/thunks.js
+++ b/src/courseware/data/thunks.js
@@ -90,11 +90,8 @@ export function fetchCourse(courseId) {
        const {
          enable_navigation_sidebar: enableNavigationSidebar,
          always_open_auxiliary_sidebar: alwaysOpenAuxiliarySidebar,
-          enable_completion_tracking: enableCompletionTracking,
        } = coursewareOutlineSidebarTogglesResult.value;
-        dispatch(setCoursewareOutlineSidebarToggles(
-          { enableNavigationSidebar, alwaysOpenAuxiliarySidebar, enableCompletionTracking },
-        ));
+        dispatch(setCoursewareOutlineSidebarToggles({ enableNavigationSidebar, alwaysOpenAuxiliarySidebar }));
      }

      // Log errors for each request if needed. Outline failures may occur
--- a/src/generic/assets/edX_certificate.png
+++ b/src/generic/assets/edX_certificate.png
--- a/src/generic/assets/edX_locked_certificate.png
+++ b/src/generic/assets/edX_locked_certificate.png
--- a/src/generic/assets/openedx_certificate.png
+++ b/src/generic/assets/openedx_certificate.png
--- a/src/generic/assets/openedx_locked_certificate.png
+++ b/src/generic/assets/openedx_locked_certificate.png
--- a/src/generic/notices/NoticesProvider.jsx
+++ b/src/generic/notices/NoticesProvider.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import { getNotices } from './api';
@@ -25,7 +25,11 @@ const NoticesProvider = ({ children }) => {
    getData();
  }, []);

-  return isRedirected === true ? null : children;
+  return (
+    <div>
+      {isRedirected === true ? null : children}
+    </div>
+  );
 };

 NoticesProvider.propTypes = {
--- a/src/generic/upsell-bullets/UpsellBullets.scss
+++ b/src/generic/upsell-bullets/UpsellBullets.scss
@@ -8,6 +8,6 @@
 }

 .upsell-bullet a {
-  color: var(--pgn-color-primary-500);
+  color: $primary-500;
 }

--- a/src/index.jsx
+++ b/src/index.jsx
@@ -49,102 +49,100 @@ subscribe(APP_READY, () => {
        <PathFixesProvider>
          <NoticesProvider>
            <UserMessagesProvider>
-              <div className="app-container">
-                <Routes>
-                  <Route path="*" element={<PageWrap><PageNotFound /></PageWrap>} />
-                  <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
-                  <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
+              <Routes>
+                <Route path="*" element={<PageWrap><PageNotFound /></PageWrap>} />
+                <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
+                <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
+                <Route
+                  path={ROUTES.PREFERENCES_UNSUBSCRIBE}
+                  element={
+                    <PageWrap><PreferencesUnsubscribe /></PageWrap>
+                }
+                />
+                <Route
+                  path={DECODE_ROUTES.ACCESS_DENIED}
+                  element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
+                />
+                <Route
+                  path={DECODE_ROUTES.HOME}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
+                        <OutlineTab />
+                      </TabContainer>
+                    </DecodePageRoute>
+              )}
+                />
+                <Route
+                  path={DECODE_ROUTES.LIVE}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
+                        <LiveTab />
+                      </TabContainer>
+                    </DecodePageRoute>
+                )}
+                />
+                <Route
+                  path={DECODE_ROUTES.DATES}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
+                        <DatesTab />
+                      </TabContainer>
+                    </DecodePageRoute>
+                )}
+                />
+                <Route
+                  path={DECODE_ROUTES.DISCUSSION}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
+                        <DiscussionTab />
+                      </TabContainer>
+                    </DecodePageRoute>
+                )}
+                />
+                {DECODE_ROUTES.PROGRESS.map((route) => (
                  <Route
-                    path={ROUTES.PREFERENCES_UNSUBSCRIBE}
-                    element={
-                      <PageWrap><PreferencesUnsubscribe /></PageWrap>
-                    }
-                  />
-                  <Route
-                    path={DECODE_ROUTES.ACCESS_DENIED}
-                    element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
-                  />
-                  <Route
-                    path={DECODE_ROUTES.HOME}
+                    key={route}
+                    path={route}
                    element={(
                      <DecodePageRoute>
-                        <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
-                          <OutlineTab />
+                        <TabContainer
+                          tab="progress"
+                          fetch={fetchProgressTab}
+                          slice="courseHome"
+                          isProgressTab
+                        >
+                          <ProgressTab />
                        </TabContainer>
                      </DecodePageRoute>
-                    )}
+                  )}
                  />
+                ))}
+                <Route
+                  path={DECODE_ROUTES.COURSE_END}
+                  element={(
+                    <DecodePageRoute>
+                      <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
+                        <CourseExit />
+                      </TabContainer>
+                    </DecodePageRoute>
+                )}
+                />
+                {DECODE_ROUTES.COURSEWARE.map((route) => (
                  <Route
-                    path={DECODE_ROUTES.LIVE}
+                    key={route}
+                    path={route}
                    element={(
                      <DecodePageRoute>
-                        <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
-                          <LiveTab />
-                        </TabContainer>
+                        <CoursewareContainer />
                      </DecodePageRoute>
-                    )}
+                  )}
                  />
-                  <Route
-                    path={DECODE_ROUTES.DATES}
-                    element={(
-                      <DecodePageRoute>
-                        <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
-                          <DatesTab />
-                        </TabContainer>
-                      </DecodePageRoute>
-                    )}
-                  />
-                  <Route
-                    path={DECODE_ROUTES.DISCUSSION}
-                    element={(
-                      <DecodePageRoute>
-                        <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
-                          <DiscussionTab />
-                        </TabContainer>
-                      </DecodePageRoute>
-                    )}
-                  />
-                  {DECODE_ROUTES.PROGRESS.map((route) => (
-                    <Route
-                      key={route}
-                      path={route}
-                      element={(
-                        <DecodePageRoute>
-                          <TabContainer
-                            tab="progress"
-                            fetch={fetchProgressTab}
-                            slice="courseHome"
-                            isProgressTab
-                          >
-                            <ProgressTab />
-                          </TabContainer>
-                        </DecodePageRoute>
-                      )}
-                    />
-                  ))}
-                  <Route
-                    path={DECODE_ROUTES.COURSE_END}
-                    element={(
-                      <DecodePageRoute>
-                        <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
-                          <CourseExit />
-                        </TabContainer>
-                      </DecodePageRoute>
-                    )}
-                  />
-                  {DECODE_ROUTES.COURSEWARE.map((route) => (
-                    <Route
-                      key={route}
-                      path={route}
-                      element={(
-                        <DecodePageRoute>
-                          <CoursewareContainer />
-                        </DecodePageRoute>
-                      )}
-                    />
-                  ))}
-                </Routes>
-              </div>
+                ))}
+              </Routes>
            </UserMessagesProvider>
          </NoticesProvider>
        </PathFixesProvider>
@@ -166,15 +164,12 @@ subscribe(APP_INIT_ERROR, (error) => {
 initialize({
  handlers: {
    config: () => {
-      /* istanbul ignore next */
      mergeConfig({
        CONTACT_URL: process.env.CONTACT_URL || null,
        CREDENTIALS_BASE_URL: process.env.CREDENTIALS_BASE_URL || null,
        CREDIT_HELP_LINK_URL: process.env.CREDIT_HELP_LINK_URL || null,
        DISCUSSIONS_MFE_BASE_URL: process.env.DISCUSSIONS_MFE_BASE_URL || null,
-        DISCOUNT_CODE_INFO_URL: process.env.DISCOUNT_CODE_INFO_URL || null,
        ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME || null,
-        ENTERPRISE_LEARNER_PORTAL_URL: process.env.ENTERPRISE_LEARNER_PORTAL_URL || null,
        ENABLE_JUMPNAV: process.env.ENABLE_JUMPNAV || null,
        ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
        INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
@@ -196,7 +191,6 @@ initialize({
        PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL || null,
        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: process.env.SHOW_UNGRADED_ASSIGNMENT_PROGRESS || false,
        ENABLE_XPERT_AUDIT: process.env.ENABLE_XPERT_AUDIT || false,
-        FEATURE_ENABLE_CHAT_V2_ENDPOINT: process.env.FEATURE_ENABLE_CHAT_V2_ENDPOINT || false,
      }, 'LearnerAppConfig');
    },
  },
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,24 +1,20 @@
-@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";

@import "~@edx/frontend-component-footer/dist/footer";
@import "~@edx/frontend-component-header/dist/index";


 #root {
-  .app-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100svh;
-  }
-  
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
  main {
    flex-grow: 1;
  }
-  #main-content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-  }

  header {
    flex: 0 0 auto;
@@ -48,7 +44,7 @@
  .nav-link {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
-    color: var(--pgn-color-gray-700);
+    color: $gray-700;

    // temporary until we can remove .btn class from dropdowns
    border-left: 0;
@@ -58,9 +54,9 @@
    &:hover,
    &:focus,
    &.active {
-      font-weight: var(--pgn-typography-font-weight-normal);
-      color: var(--pgn-color-primary-500);
-      border-bottom-color: var(--pgn-color-primary-500);
+      font-weight: $font-weight-normal;
+      color: $primary-500;
+      border-bottom-color: $primary-500;
    }
  }
 }
@@ -79,7 +75,7 @@
 }

 .sequence {
-  @media (--pgn-size-breakpoint-min-width-sm) {
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
    border: solid 1px #eaeaea;
    border-radius: 4px;
  }
@@ -91,7 +87,7 @@
 }

 .notification-btn {
-  @media (--pgn-size-breakpoint-max-width-xs) {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
    height: 3rem;
  }
 }
@@ -100,15 +96,15 @@
  display: flex;
  flex-grow: 1;

-  @media (--pgn-size-breakpoint-max-width-xs) {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
    max-width: 100%;
  }

-  @media (--pgn-size-breakpoint-min-width-sm) {
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
    margin: -1px -1px 0;
  }

-  @media (--pgn-size-breakpoint-max-width-xs) {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
    width: 100% !important;
  }

@@ -124,13 +120,13 @@
    height: 3rem;
    justify-content: center;
    align-items: center;
-    color: var(--pgn-color-gray-500);
+    color: $gray-500;
    white-space: nowrap;

    &:hover,
    &:focus,
    &.active {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
    }

    &:focus {
@@ -145,13 +141,13 @@
        left: 0;
        right: 0;
        height: 2px;
-        background: var(--pgn-color-primary-base);
+        background: $primary;
      }
    }

    &.complete {
      background-color: #eef7e5;
-      color: var(--pgn-color-success-base);
+      color: $success;
    }

    &:first-child {
@@ -215,12 +211,12 @@
        min-width: 0;
        margin: 0 1rem;
        text-overflow: ellipsis;
-        color: var(--pgn-color-gray-700);
+        color: $gray-700;
      }

      &.active {
        .unit-icon {
-          color: var(--pgn-color-primary-500);
+          color: $primary-500;
        }

        &:after {
@@ -232,7 +228,7 @@
          right: auto;
          width: 2px;
          height: auto;
-          background: var(--pgn-color-primary-base);
+          background: $primary;
        }
      }
    }
@@ -247,18 +243,18 @@

  .previous-btn,
  .next-btn {
-    border: 1px solid var(--pgn-color-light-400) !important;
-    color: var(--pgn-color-gray-700);
+    border: 1px solid $light-400 !important;
+    color: $gray-700;
    display: inline-flex;
    justify-content: center;
    align-items: center;

-    @media (--pgn-size-breakpoint-max-width-sm) {
+    @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
      min-width: fit-content;
      padding-left: 2rem;
      padding-right: 2rem;
@@ -269,7 +265,7 @@
    border-left-width: 0;
    margin-left: 0;

-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
      border-left-width: 1px;
      border-top-left-radius: 4px;
    }
@@ -279,7 +275,7 @@
    border-left-width: 1px;
    border-right-width: 0;

-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
      border-top-right-radius: 4px;
      border-right-width: 1px;
    }
@@ -293,9 +289,9 @@
  margin-left: auto;
  margin-right: auto;

-  @media (--pgn-size-breakpoint-min-width-sm) {
-    padding-left: var(--pgn-spacing-grid-gutter-width);
-    padding-right: var(--pgn-spacing-grid-gutter-width);
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
+    padding-left: $grid-gutter-width;
+    padding-right: $grid-gutter-width;
  }

  @media (min-width: 830px) {
@@ -313,8 +309,8 @@
  // here we compensate for the padding of the parent div with "container-xl"
  // class to ensure that the viewport width is the same as the width of the
  // iframe.
-  margin-left: calc(var(--pgn-spacing-grid-gutter-width) * -0.5);
-  margin-right: calc(var(--pgn-spacing-grid-gutter-width) * -0.5);
+  margin-left: -$grid-gutter-width * .5;
+  margin-right: -$grid-gutter-width * .5;

  margin-bottom: 2rem;

@@ -332,13 +328,12 @@
 .unit-navigation {
  display: flex;
  justify-content: center;
-  gap: 5px;
  max-width: 640px;
  margin: 0 auto;

-  @media (--pgn-size-breakpoint-max-width-xs) {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
    flex-direction: column;
-    gap: var(--pgn-spacing-spacer-base);
+    gap: $spacer;
  }

  .previous-button,
@@ -349,12 +344,27 @@
      border-radius: 6px;
    }
  }
+
+  .next-button {
+    flex-basis: 75%;
+
+     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+       flex-basis: 100%;
+     }
+  }
+
+  .previous-button {
+    flex-basis: 25%;
+
+     @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+       flex-basis: 100%;
+     }
+  }
 }

 .top-unit-navigation {
  display: flex;
  max-width: 100%;
-  gap: 5px;
  justify-content: flex-end;

  .next-button,
@@ -367,22 +377,19 @@
 // window (retaining padding around the edge).  Bootstrap modals don't have a full-screen
 // size like this.  Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that.
 .modal-lti {
-  height: 80vh;
+  height: 100%;
  max-width: 100% !important;

  // I don't like this.  We need to set a height of 100% on a div created by react-focus-on, a
  // package we use in our Modal.  That div has no class name or ID, so instead we're uniquely
  // identifying it by based on a unique attribute it has which its siblings don't share.
  > div[data-focus-lock-disabled="false"] {
-    height: 80vh;
+    height: 100%;
  }

  // Along with setting the height of modal-content's parent div from react-focus-on, we need to
  // set modal-content's height as well to get the modal to expand to full-screen height.
  .modal-content {
-    height: 80vh;
-  }
-  .pgn__modal-body-content {
    height: 100%;
  }
 }
@@ -411,8 +418,8 @@

 .icon-hover {
  &:hover {
-    color: var(--pgn-color-primary-500) !important;
-    background-color: var(--pgn-color-light-300) !important;
+    color: $primary-500 !important;
+    background-color: $light-300 !important;
  }
 }

@@ -435,7 +442,7 @@
  height: 56px !important;
 }

-@media (--pgn-size-breakpoint-max-width-xs) {
+@include media-breakpoint-down(xs) {
  .course-outline-tab .pgn__card {
    .pgn__card-header {
      display: block;
--- a/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.tsx
+++ b/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Form } from '@openedx/paragon';
+import { Input } from '@openedx/paragon';

 import { MasqueradeStatus, Payload } from './data/api';
 import messages from './messages';
@@ -40,10 +40,11 @@ export const MasqueradeUserNameInput: React.FC<Props> = ({ onSubmit, onError, ..
  }, [handleSubmit]);

  return (
-    <Form.Control
+    <Input
      aria-labelledby="masquerade-search-label"
      label={intl.formatMessage(messages.userNameLabel)}
      onKeyPress={handleKeyPress}
+      type="text"
      {...otherProps}
    />
  );
--- a/src/plugin-slots/ContentIFrameErrorSlot/README.md
+++ b/src/plugin-slots/ContentIFrameErrorSlot/README.md
@@ -1,39 +0,0 @@
-# Content iFrame Error Slot
-
-### Slot ID: `org.openedx.frontend.learning.content_iframe_error.v1`
-
-### Parameters: `courseId`
-
-## Description
-
-This slot is used to replace/modify the content iframe error page.
-
-## Example
-
-The following `env.config.jsx` will replace the error page with emojis.
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.learning.content_iframe_error.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_error_page',
-            type: DIRECT_PLUGIN,
-            RenderWidget: ({courseId}) => (
-              <h1>🚨🤖💥</h1>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```
--- a/src/plugin-slots/ContentIFrameErrorSlot/index.tsx
+++ b/src/plugin-slots/ContentIFrameErrorSlot/index.tsx
@@ -1,15 +0,0 @@
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import { ErrorPage } from '@edx/frontend-platform/react';
-
-interface Props {
-  courseId: string;
-}
-
-export const ContentIFrameErrorSlot : React.FC<Props> = ({ courseId }: Props) => (
-  <PluginSlot
-    id="org.openedx.frontend.learning.content_iframe_error.v1"
-    pluginProps={{ courseId }}
-  >
-    <ErrorPage />
-  </PluginSlot>
-);
--- a/src/plugin-slots/ContentIFrameLoaderSlot/README.md
+++ b/src/plugin-slots/ContentIFrameLoaderSlot/README.md
@@ -1,4 +1,4 @@
-# Content iframe Loader Slot
+# Content IFrame Loader Slot

 ### Slot ID: `org.openedx.frontend.learning.content_iframe_loader.v1`

@@ -6,5 +6,51 @@
 * `content_iframe_loader_slot`

 ### Props:
-* `courseId`
-* `defaultLoaderComponent`
+* `courseId` - String identifier for the current course
+* `defaultLoaderComponent` - React component used as the default loading indicator
+
+## Description
+
+This slot is used to customize the loading indicator displayed while course content is being loaded in an iframe. It appears when content is loading but hasn't fully rendered yet, providing a customizable loading experience for learners.
+
+The default implementation shows a `PageLoading` component with a screen reader message.
+
+## Example
+
+The following `env.config.jsx` will replace the default loading spinner with a custom loading component that shows the course ID and a custom message.
+
+![Content Iframe Loader Example](./images/loader-example.png)
+
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.content_iframe_loader.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widgetId: 'default_contents',
+          widget: {
+            id: 'custom_iframe_loader',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({ courseId, defaultLoaderComponent }) => (
+              <div style={{ textAlign: 'center', padding: '2rem' }}>
+                <h3>Loading course content...</h3>
+                <p>Course: {courseId}</p>
+                <div style={{ margin: '1rem 0' }}>
+                  {defaultLoaderComponent}
+                </div>
+                <p>Please wait while we prepare your learning experience</p>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/ContentIFrameLoaderSlot/images/loader-example.png
+++ b/src/plugin-slots/ContentIFrameLoaderSlot/images/loader-example.png
--- a/src/plugin-slots/CourseExitPluginSlots/CourseExitViewCoursesPluginSlot/README.md
+++ b/src/plugin-slots/CourseExitPluginSlots/CourseExitViewCoursesPluginSlot/README.md
@@ -1,37 +0,0 @@
-# Course Exit "View Courses" Button Plugin Slot
-
-### Slot ID: `org.openedx.frontend.learning.course_exit_view_courses.v1`
-### Props:
-* `content: { href }`
-
-## Description
-
-This slot is used for modifying "View Courses" button in the course exit screen
-
-## Example
-
-The following `env.config.jsx` will make the link link to `example.com` 
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.learning.course_exit_view_courses.v1: {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Modify,
-          widgetId: 'default_contents',
-          fn: (widget) => {
-            widget.content.href = 'http://www.example.com';
-            return widget;
-          }
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```
--- a/src/plugin-slots/CourseExitPluginSlots/CourseExitViewCoursesPluginSlot/index.tsx
+++ b/src/plugin-slots/CourseExitPluginSlots/CourseExitViewCoursesPluginSlot/index.tsx
@@ -1,37 +0,0 @@
-import { Button } from '@openedx/paragon';
-import { getConfig } from '@edx/frontend-platform';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import messages from '../../../courseware/course/course-exit/messages';
-
-interface Props {
-  href: string
-}
-
-const ViewCoursesLink: React.FC<Props> = ({ href }: Props) => {
-  const intl = useIntl();
-  return (
-    <div className="row w-100 mt-2 mb-4 justify-content-end">
-      <Button
-        variant="outline-primary"
-        href={href}
-      >
-        {intl.formatMessage(messages.viewCoursesButton)}
-      </Button>
-    </div>
-  );
-};
-
-export const CourseExitViewCoursesPluginSlot: React.FC = () => {
-  const href = `${getConfig().LMS_BASE_URL}/dashboard`;
-  return (
-    <PluginSlot
-      id="org.openedx.frontend.learning.course_exit_view_courses.v1"
-      slotOptions={{
-        mergeProps: true,
-      }}
-    >
-      <ViewCoursesLink href={href} />
-    </PluginSlot>
-  );
-};
--- a/src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/index.tsx
+++ b/src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/index.tsx
@@ -1,15 +0,0 @@
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import CourseRecommendations from '../../../courseware/course/course-exit/CourseRecommendations';
-
-interface Props {
-  variant: string;
-}
-
-export const CourseRecommendationsSlot: React.FC<Props> = ({ variant }: Props) => (
-  <PluginSlot
-    id="org.openedx.frontend.learning.course_recommendations.v1"
-    idAliases={['course_recommendations_slot']}
-  >
-    <CourseRecommendations variant={variant} />
-  </PluginSlot>
-);
--- a/src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/README.md
+++ b/src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/README.md
@@ -1,40 +0,0 @@
-# Course Exit Dashboard Footnote Link Plugin Slot
-
-### Slot ID: `org.openedx.frontend.learning.course_exit_dashboard_footnote_link.v1`
-### Props:
-* `variant`
-* `content: { destination }`
-
-## Description
-
-This slot is used for modifying the link to the learner dashboard in the footnote on the course exit page
-
-## Example
-
-The following `env.config.jsx` will change the link to point to `example.com` 
-
-![Screenshot of modified course celebration](./screenshot_custom.png)
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.learning.course_exit_dashboard_footnote_link.v1': {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Modify,
-          widgetId: 'default_contents',
-          fn: (widget) => {
-            widget.content.destination = 'http://www.example.com';
-            return widget;
-          }
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```
--- a/src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/index.tsx
+++ b/src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/index.tsx
@@ -1,49 +0,0 @@
-import { Hyperlink } from '@openedx/paragon';
-import { getConfig } from '@edx/frontend-platform';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import messages from '../../../courseware/course/course-exit/messages';
-import { logClick } from '../../../courseware/course/course-exit/utils';
-import { useModel } from '../../../generic/model-store';
-import { useContextId } from '../../../data/hooks';
-
-interface LinkProps {
-  variant: string;
-  destination: string;
-}
-
-const DashboardFootnoteLink: React.FC<LinkProps> = ({ variant, destination }: LinkProps) => {
-  const intl = useIntl();
-  const courseId = useContextId();
-  const { org } = useModel('courseHomeMeta', courseId);
-  const { administrator } = getAuthenticatedUser();
-  return (
-    <Hyperlink
-      style={{ textDecoration: 'underline' }}
-      destination={destination}
-      className="text-reset"
-      onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
-    >
-      {intl.formatMessage(messages.dashboardLink)}
-    </Hyperlink>
-  );
-};
-
-interface PluginProps {
-  variant: string
-}
-
-export const DashboardFootnoteLinkPluginSlot: React.FC = ({ variant }: PluginProps) => {
-  const destination = `${getConfig().LMS_BASE_URL}/dashboard`;
-  return (
-    <PluginSlot
-      id="org.openedx.frontend.learning.course_exit_dashboard_footnote_link.v1"
-      slotOptions={{
-        mergeProps: true,
-      }}
-    >
-      <DashboardFootnoteLink variant={variant} destination={destination} />
-    </PluginSlot>
-  );
-};
--- a/src/plugin-slots/CourseExitPluginSlots/index.jsx
+++ b/src/plugin-slots/CourseExitPluginSlots/index.jsx
@@ -1,9 +0,0 @@
-import { DashboardFootnoteLinkPluginSlot } from './DashboardFootnoteLinkPluginSlot';
-import { CourseRecommendationsSlot } from './CourseRecommendationsSlot';
-import { CourseExitViewCoursesPluginSlot } from './CourseExitViewCoursesPluginSlot';
-
-export {
-  DashboardFootnoteLinkPluginSlot,
-  CourseRecommendationsSlot,
-  CourseExitViewCoursesPluginSlot,
-};
--- a/src/plugin-slots/CourseOutlineTabNotificationsSlot/README.md
+++ b/src/plugin-slots/CourseOutlineTabNotificationsSlot/README.md
@@ -6,5 +6,55 @@
 * `outline_tab_notifications_slot`

 ### Props:
-* `courseId`
-* `model`
+* `courseId` - String identifier for the current course
+* `model` - String indicating the context model (set to 'outline')
+
+## Description
+
+This slot is used to add custom notification components to the course outline tab sidebar. It appears in the right sidebar of the course outline/home tab, positioned between the Course Tools widget and the Course Dates widget.
+
+The slot provides a flexible way to inject custom notifications, announcements, or informational components that are contextually relevant to the course outline view.
+
+## Example
+
+The following `env.config.jsx` will add a custom notification component to the course outline tab sidebar.
+
+![Course notification example](./images/course-outline-notification-example.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.course_outline_tab_notifications.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_outline_notification',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({ courseId, model }) => (
+              <div className="card mb-3">
+                <div className="card-body">
+                  <h5 className="card-title">📢 Course Announcement</h5>
+                  <p className="card-text">
+                    Important updates for course {courseId}
+                  </p>
+                  <p className="text-muted small">
+                    Context: {model}
+                  </p>
+                  <button className="btn btn-primary btn-sm">
+                    View Details
+                  </button>
+                </div>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/CourseOutlineTabNotificationsSlot/images/course-outline-notification-example.png
+++ b/src/plugin-slots/CourseOutlineTabNotificationsSlot/images/course-outline-notification-example.png
--- a/src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/README.md
+++ b/src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/README.md
--- a/src/plugin-slots/CourseRecommendationsSlot/index.jsx
+++ b/src/plugin-slots/CourseRecommendationsSlot/index.jsx
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseRecommendations from '../../courseware/course/course-exit/CourseRecommendations';
+
+const CourseRecommendationsSlot = ({ variant }) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.course_recommendations.v1"
+    idAliases={['course_recommendations_slot']}
+  >
+    <CourseRecommendations variant={variant} />
+  </PluginSlot>
+);
+
+CourseRecommendationsSlot.propTypes = {
+  variant: PropTypes.string.isRequired,
+};
+
+export default CourseRecommendationsSlot;
--- a/src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/screenshot_custom.png
+++ b/src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/screenshot_custom.png
--- a/src/plugin-slots/GatedUnitContentMessageSlot/README.md
+++ b/src/plugin-slots/GatedUnitContentMessageSlot/README.md
@@ -6,4 +6,65 @@
 * `gated_unit_content_message_slot`

 ### Props:
-* `courseId`
+* `courseId` - String identifier for the current course
+
+## Description
+
+This slot is used to customize the message displayed when course content is gated or locked for learners who haven't upgraded to a verified track. It appears when a unit contains content that requires a paid enrollment (such as graded assignments) and the learner is on the audit track.
+
+The default implementation shows a `LockPaywall` component that displays an upgrade message with benefits of upgrading, including access to graded assignments, certificates, and full course features.
+
+This slot is conditionally rendered only when `contentTypeGatingEnabled` is true and the unit `containsContentTypeGatedContent`.
+
+## Example
+
+The following `env.config.jsx` will replace the default paywall message with a custom gated content component.
+
+![Gated unit message example](./images/gated-unit-message-example.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.gated_unit_content_message.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widgetId: 'default_contents',
+          widget: {
+            id: 'custom_gated_message',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({ courseId }) => (
+              <div className="alert alert-warning" role="alert">
+                <div className="d-flex align-items-center mb-3">
+                  <i className="fa fa-lock fa-2x me-3" aria-hidden="true"></i>
+                  <div>
+                    <h4 className="alert-heading mb-1">Premium Content</h4>
+                    <p className="mb-0">This content is available to verified learners only.</p>
+                  </div>
+                </div>
+                <hr />
+                <p className="mb-3">
+                  Upgrade your enrollment for course {courseId} to access:
+                </p>
+                <ul className="mb-3">
+                  <li>✅ Graded assignments and quizzes</li>
+                  <li>🏆 Verified certificate upon completion</li>
+                  <li>💬 Full discussion forum access</li>
+                  <li>📱 Mobile app offline access</li>
+                </ul>
+                <button className="btn btn-success">
+                  Upgrade Now
+                </button>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/GatedUnitContentMessageSlot/images/gated-unit-message-example.png
+++ b/src/plugin-slots/GatedUnitContentMessageSlot/images/gated-unit-message-example.png
--- a/src/plugin-slots/NotificationTraySlot/README.md
+++ b/src/plugin-slots/NotificationTraySlot/README.md
@@ -6,6 +6,92 @@
 * `notification_tray_slot`

 ### Props:
-* `courseId`
-* `notificationCurrentState`
-* `setNotificationCurrentState`
+* `courseId` - String identifier for the current course
+* `model` - String indicating the context model (set to 'coursewareMeta')
+* `notificationCurrentState` - Current state of upgrade notifications (UpgradeNotificationState)
+* `setNotificationCurrentState` - Function to update the notification state
+
+## Description
+
+This slot is used to customize the notification tray that appears in the courseware sidebar. The notification tray displays upgrade-related notifications and alerts for learners in verified mode courses. It provides a way to show contextual notifications about course access, deadlines, and upgrade opportunities.
+
+The slot is conditionally rendered only for learners in verified mode courses. For non-verified courses, a simple "no notifications" message is displayed instead.
+
+The `notificationCurrentState` can be one of: `'accessLastHour'`, `'accessHoursLeft'`, `'accessDaysLeft'`, `'FPDdaysLeft'`, `'FPDLastHour'`, `'accessDateView'`, or `'PastExpirationDate'`.
+
+## Example
+
+The following `env.config.jsx` will customize the notification tray with additional notification types and styling.
+
+![Notification tray slot example](./images/notification-tray-slot-example.png)
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.notification_tray.v1': {
+      plugins: [
+        {
+          // Insert custom notification content
+          op: PLUGIN_OPERATIONS.Replace,
+          widget: {
+            id: 'custom_notifications',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({ 
+              courseId, 
+              model, 
+              notificationCurrentState, 
+              setNotificationCurrentState 
+            }) => (
+              <div className="p-3">
+                <h5 className="mb-3">📬 Course Notifications</h5>
+                
+                {notificationCurrentState === 'accessLastHour' && (
+                  <div className="alert alert-warning mb-3">
+                    <strong>⏰ Last Chance!</strong>
+                    <p className="mb-0">Your access expires in less than an hour.</p>
+                  </div>
+                )}
+                
+                {notificationCurrentState === 'accessDaysLeft' && (
+                  <div className="alert alert-info mb-3">
+                    <strong>📅 Access Reminder</strong>
+                    <p className="mb-0">Your course access expires in a few days.</p>
+                  </div>
+                )}
+                
+                <div className="notification-item p-2 mb-2 border rounded">
+                  <div className="d-flex justify-content-between align-items-center">
+                    <span>📚 New course material available</span>
+                    <button 
+                      className="btn btn-sm btn-outline-primary"
+                      onClick={() => setNotificationCurrentState('accessDateView')}
+                    >
+                      View
+                    </button>
+                  </div>
+                </div>
+                
+                <div className="notification-item p-2 mb-2 border rounded">
+                  <div className="d-flex justify-content-between align-items-center">
+                    <span>🎯 Assignment due tomorrow</span>
+                    <span className="badge bg-warning">Due Soon</span>
+                  </div>
+                </div>
+                
+                <div className="text-center mt-3">
+                  <small className="text-muted">
+                    Course: {courseId} | Model: {model}
+                  </small>
+                </div>
+              </div>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/NotificationTraySlot/images/notification-tray-slot-example.png
+++ b/src/plugin-slots/NotificationTraySlot/images/notification-tray-slot-example.png
--- a/src/plugin-slots/NotificationWidgetSlot/README.md
+++ b/src/plugin-slots/NotificationWidgetSlot/README.md
@@ -6,8 +6,125 @@
 * `notification_widget_slot`

 ### Props:
-* `courseId`
-* `model`
-* `notificationCurrentState`
-* `setNotificationCurrentState`
-* `toggleSidebar`
+* `courseId` - String identifier for the current course
+* `model` - String indicating the context model (set to 'coursewareMeta')
+* `notificationCurrentState` - Current state of upgrade notifications (UpgradeNotificationState)
+* `setNotificationCurrentState` - Function to update the notification state
+* `toggleSidebar` - Function to toggle the sidebar open/closed
+
+## Description
+
+This slot is used to customize the notification widget that appears in the discussions-notifications sidebar. The widget is displayed as a compact notification component that shows upgrade-related alerts and can trigger the full notification tray when clicked.
+
+The widget appears in the combined discussions-notifications sidebar and is conditionally rendered based on the `hideNotificationbar` and `isNotificationbarAvailable` flags. It automatically tracks user engagement and calls `onNotificationSeen` after a 3-second timeout.
+
+The `notificationCurrentState` can be one of: `'accessLastHour'`, `'accessHoursLeft'`, `'accessDaysLeft'`, `'FPDdaysLeft'`, `'FPDLastHour'`, `'accessDateView'`, or `'PastExpirationDate'`.
+
+## Example
+
+The following `env.config.jsx` will customize the notification widget with a more interactive design and additional functionality.
+
+![Notification widget slot example](./images/notification-widget-slot-example.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const NotificationWidget = ({
+  courseId,
+  model,
+  notificationCurrentState,
+  setNotificationCurrentState,
+  toggleSidebar
+}) => {
+  const getNotificationContent = () => {
+    switch (notificationCurrentState) {
+      case 'accessLastHour':
+        return {
+          icon: '⚠️',
+          title: 'Final Hour!',
+          message: 'Access expires in less than 1 hour',
+          variant: 'danger'
+        };
+      case 'accessHoursLeft':
+        return {
+          icon: '⏰',
+          title: 'Expiring Soon',
+          message: 'Access expires in a few hours',
+          variant: 'warning'
+        };
+      case 'accessDaysLeft':
+        return {
+          icon: '📅',
+          title: 'Access Reminder',
+          message: 'Access expires in a few days',
+          variant: 'info'
+        };
+      case 'FPDdaysLeft':
+      case 'FPDLastHour':
+        return {
+          icon: '🎯',
+          title: 'Upgrade Available',
+          message: 'Get full access to premium features',
+          variant: 'primary'
+        };
+      default:
+        return {
+          icon: '🔔',
+          title: 'Notifications',
+          message: 'Click to view updates',
+          variant: 'secondary'
+        };
+    }
+  };
+
+  const notification = getNotificationContent();
+
+  return (
+    <div
+      className={`alert alert-${notification.variant} mb-0 cursor-pointer`}
+      onClick={toggleSidebar}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggleSidebar();
+        }
+      }}
+    >
+      <div className="d-flex align-items-center">
+        <span className="me-2" style={{ fontSize: '1.2em' }}>
+          {notification.icon}
+        </span>
+        <div className="flex-fill">
+          <strong className="d-block">{notification.title}</strong>
+          <small>{notification.message}</small>
+        </div>
+        <div className="ms-2">
+          <i className="fa fa-chevron-right" aria-hidden="true"></i>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.notification_widget.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widgetId: 'default_contents',
+          widget: {
+            id: 'custom_notification_widget',
+            type: DIRECT_PLUGIN,
+            RenderWidget: NotificationWidget
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/NotificationWidgetSlot/images/notification-widget-slot-example.png
+++ b/src/plugin-slots/NotificationWidgetSlot/images/notification-widget-slot-example.png
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -23,5 +23,4 @@
 * [`org.openedx.frontend.learning.progress_tab_grade_breakdown.v1`](./ProgressTabGradeBreakdownSlot/)
 * [`org.openedx.frontend.learning.progress_tab_related_links.v1`](./ProgressTabRelatedLinksSlot/)
 * [`org.openedx.frontend.learning.sequence_container.v1`](./SequenceContainerSlot/)
-* [`org.openedx.frontend.learning.sequence_navigation.v1`](./SequenceNavigationSlot/)
 * [`org.openedx.frontend.learning.unit_title.v1`](./UnitTitleSlot/)
--- a/src/plugin-slots/SequenceNavigationSlot/README.md
+++ b/src/plugin-slots/SequenceNavigationSlot/README.md
@@ -1,80 +0,0 @@
-# Sequence Navigation Slot
-
-### Slot ID: `org.openedx.frontend.learning.sequence_navigation.v1`
-
-### Props:
-* `sequenceId` (string) — Current sequence identifier
-* `unitId` (string) — Current unit identifier
-* `nextHandler` (function) — Handler for next navigation action
-* `onNavigate` (function) — Handler for direct unit navigation
-* `previousHandler` (function) — Handler for previous navigation action
-
-## Description
-
-This slot is used to replace/modify/hide the sequence navigation component that controls navigation between units within a course sequence.
-
-## Example
-
-### Default content
-![Sequence navigation slot with default content](./screenshot_default.png)
-
-### Replaced with custom component
-![📖 in sequence navigation slot](./screenshot_custom.png)
-
-The following `env.config.jsx` will replace the sequence navigation with a custom implementation that uses all available props.
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.learning.sequence_navigation.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_sequence_navigation',
-            type: DIRECT_PLUGIN,
-            RenderWidget: ({ sequenceId, unitId, nextHandler, onNavigate, previousHandler }) => {
-              // Mock unit data for demonstration
-              const units = ['unit-1', 'unit-2', 'unit-3'];
-
-              return (
-                <Stack gap={2} direction="horizontal" className="p-3 bg-light w-100">
-                  <Button
-                    className="flex-grow-1"
-                    onClick={previousHandler}
-                  >
-                    ⬅️ Previous
-                  </Button>
-                  <Stack gap={2} direction="horizontal">
-                    {units.map((unit, index) => (
-                      <Button
-                        variant="outline-primary"
-                        key={unit}
-                        className={`btn btn-sm ${unitId === unit ? 'btn-primary' : 'btn-outline-secondary'}`}
-                        onClick={() => onNavigate(unit)}
-                      >
-                        {index + 1}
-                      </Button>
-                    ))}
-                  </Stack>
-                  <Button
-                    className="flex-grow-1"
-                    onClick={nextHandler}
-                  >
-                    Next ➡️
-                  </Button>
-                </Stack>
-              )
-            },
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```
--- a/src/plugin-slots/SequenceNavigationSlot/index.jsx
+++ b/src/plugin-slots/SequenceNavigationSlot/index.jsx
@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-
-import { SequenceNavigation } from '../../courseware/course/sequence/sequence-navigation';
-
-const SequenceNavigationSlot = ({
-  sequenceId,
-  unitId,
-  nextHandler,
-  onNavigate,
-  previousHandler,
-}) => (
-  <PluginSlot
-    id="org.openedx.frontend.learning.sequence_navigation.v1"
-    slotOptions={{
-      mergeProps: true,
-    }}
-    pluginProps={{
-      sequenceId,
-      unitId,
-      nextHandler,
-      onNavigate,
-      previousHandler,
-    }}
-  >
-    <SequenceNavigation
-      sequenceId={sequenceId}
-      unitId={unitId}
-      nextHandler={nextHandler}
-      onNavigate={onNavigate}
-      previousHandler={previousHandler}
-    />
-  </PluginSlot>
-);
-
-SequenceNavigationSlot.propTypes = {
-  sequenceId: PropTypes.string.isRequired,
-  unitId: PropTypes.string.isRequired,
-  nextHandler: PropTypes.func.isRequired,
-  onNavigate: PropTypes.func.isRequired,
-  previousHandler: PropTypes.func.isRequired,
-};
-
-export default SequenceNavigationSlot;
--- a/src/plugin-slots/SequenceNavigationSlot/screenshot_custom.png
+++ b/src/plugin-slots/SequenceNavigationSlot/screenshot_custom.png
--- a/src/plugin-slots/SequenceNavigationSlot/screenshot_default.png
+++ b/src/plugin-slots/SequenceNavigationSlot/screenshot_default.png
--- a/src/preferences-unsubscribe/data/api.js
+++ b/src/preferences-unsubscribe/data/api.js
@@ -1,11 +1,11 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-export const getUnsubscribeUrl = (userToken) => (
-  `${getConfig().LMS_BASE_URL}/api/notifications/preferences/update/${userToken}/`
+export const getUnsubscribeUrl = (userToken, updatePatch) => (
+  `${getConfig().LMS_BASE_URL}/api/notifications/preferences/update/${userToken}/${updatePatch}/`
 );

-export async function unsubscribeNotificationPreferences(userToken) {
-  const url = getUnsubscribeUrl(userToken);
+export async function unsubscribeNotificationPreferences(userToken, updatePatch) {
+  const url = getUnsubscribeUrl(userToken, updatePatch);
  return getAuthenticatedHttpClient().get(url);
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jacobo Dominguez	db0a56566f	docs: add comprehensive readme documentation for plugin slots (#1770 )	2025-08-06 16:41:36 +05:30
Brian Smith	b78e78313b	fix(docs): correct ProgressCertificateStatusSlot README title (#1689 )	2025-07-21 13:11:29 -04:00
Brian Smith	29ec85ddbe	fix(docs): correct CourseRecommendationsSlot README title (#1688 )	2025-07-21 13:11:29 -04:00