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 · 2025-05-05 20:43:01 +05:30
112 changed files with 1447 additions and 2539 deletions
--- a/.env
+++ b/.env
@@ -16,7 +16,6 @@ ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
-ENTERPRISE_LEARNER_PORTAL_URL=''
 EXAMS_BASE_URL=''
 FAVICON_URL=''
 IGNORED_ERROR_REGEX=''
@@ -50,5 +49,3 @@ TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
 SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.development
+++ b/.env.development
@@ -16,7 +16,6 @@ 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=''
@@ -52,5 +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=''
-# Fallback in local style files
-PARAGON_THEME_URLS={}
--- a/.env.test
+++ b/.env.test
@@ -16,7 +16,6 @@ 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=''
@@ -49,4 +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'
--- 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
@@ -14,9 +14,9 @@
        "@edx/frontend-component-footer": "^14.6.0",
        "@edx/frontend-component-header": "^6.2.0",
        "@edx/frontend-lib-learning-assistant": "^2.20.0",
-        "@edx/frontend-lib-special-exams": "^4.0.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.9.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.9.0.tgz",
-      "integrity": "sha512-eI3ffSvAKDoP1K/vBuQrCL7ca0U7hJqRlGjBq62dSAlsgOS59t+9T1ZkIWCSoRUzHLv4fS+taiBeCsIQVV356Q==",
+      "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",
@@ -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.4.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.4.0.tgz",
-      "integrity": "sha512-toWMU7qVx56f5bLk6/Sl5WWqlKtGp602qDs22JYp5r2VBp5F/nzcrpXXWC925/kH0TP5hI2OMolmLq6n2N8a4Q==",
+      "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",
@@ -2576,12 +2424,6 @@
        "react-redux": "^7.1.1 || ^8.1.1",
        "react-router-dom": "^6.0.0",
        "redux": "^4.0.4"
-      },
-      "peerDependenciesMeta": {
-        "@openedx/frontend-build": {
-          "optional": true,
-          "reason": "This package is only a peer dependency to ensure using a minimum compatible version that provides env.config and PARAGON_THEME support. It is not needed at runtime, and may be omitted with `--omit=optional`."
-        }
      }
    },
    "node_modules/@edx/new-relic-source-map-webpack-plugin": {
@@ -2594,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"
@@ -3312,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",
@@ -3810,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",
@@ -4016,9 +3708,9 @@
      }
    },
    "node_modules/@openedx/frontend-build": {
-      "version": "14.6.1",
-      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.6.1.tgz",
-      "integrity": "sha512-HPswCfxThP0F92fmKqOetQ+E7HNiXDmOE+vHkfrpdKYNUj6Sn+7jaBICn8pNfif8uq4tF2ZGRnAgfUphry2ORQ==",
+      "version": "14.5.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.5.0.tgz",
+      "integrity": "sha512-HY0PdXvXBxrvJHj8HsRA+VNCHDePENFhqOIvbSz9Ke7HDwHpfDjg2CeKk41aU/8iTyj3eESfPwKQr5fTE0A3Ww==",
      "license": "AGPL-3.0",
      "dependencies": {
        "@babel/cli": "7.24.8",
@@ -4207,9 +3899,9 @@
      }
    },
    "node_modules/@openedx/frontend-build/node_modules/postcss-loader/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "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"
@@ -4356,9 +4048,9 @@
      }
    },
    "node_modules/@openedx/frontend-build/node_modules/ts-jest/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "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"
@@ -4445,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",
@@ -4457,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",
@@ -4495,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"
@@ -4510,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",
@@ -4529,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",
@@ -4570,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",
@@ -5100,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",
@@ -5647,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",
@@ -6909,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",
@@ -7377,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",
@@ -7402,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",
@@ -7522,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",
@@ -7533,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",
@@ -8328,9 +7884,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001727",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "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",
@@ -8378,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",
@@ -8527,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",
@@ -8577,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",
@@ -8674,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",
@@ -8830,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",
@@ -10144,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",
@@ -11553,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",
@@ -11979,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",
@@ -12065,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",
@@ -12080,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",
@@ -12203,15 +11675,14 @@
      }
    },
    "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
      "license": "MIT",
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
        "mime-types": "^2.1.12"
      },
      "engines": {
@@ -13193,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",
@@ -13577,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",
@@ -13923,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",
@@ -14394,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",
@@ -15383,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",
@@ -15638,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",
@@ -15788,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",
@@ -15948,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",
@@ -16825,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",
@@ -17135,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",
@@ -17488,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",
@@ -17565,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",
@@ -17693,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",
@@ -17730,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",
@@ -18154,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",
@@ -18190,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",
@@ -18297,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",
@@ -18401,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",
@@ -18481,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",
@@ -18924,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",
@@ -18960,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",
@@ -19021,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"
@@ -20085,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",
@@ -20230,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",
@@ -21455,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",
@@ -21730,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",
@@ -21809,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",
@@ -21931,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",
@@ -21986,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",
@@ -22254,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",
@@ -22413,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",
@@ -22459,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",
@@ -22591,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",
@@ -23299,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",
@@ -23367,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",
@@ -23425,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",
@@ -24197,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",
@@ -24270,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"
  },
@@ -38,9 +37,9 @@
    "@edx/frontend-component-footer": "^14.6.0",
    "@edx/frontend-component-header": "^6.2.0",
    "@edx/frontend-lib-learning-assistant": "^2.20.0",
-    "@edx/frontend-lib-special-exams": "^4.0.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/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/CoursewareContainer.test.jsx
+++ b/src/courseware/CoursewareContainer.test.jsx
@@ -1,7 +1,7 @@
 import { getConfig, history } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { waitForElementToBeRemoved } from '@testing-library/dom';
+import { waitForElementToBeRemoved, fireEvent } from '@testing-library/dom';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
@@ -193,13 +193,15 @@ describe('CoursewareContainer', () => {
      expect(courseHeader.querySelector('.course-title')).toHaveTextContent(courseHomeMetadata.title);
    }

-    function assertNoSequenceNavigation(container) {
+    function assertSequenceNavigation(container, expectedUnitCount = 3) {
+      // Ensure we had appropriate sequence navigation buttons.  We should only have one unit.
      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
-      expect(sequenceNavButtons).toHaveLength(0);
+      expect(sequenceNavButtons).toHaveLength(expectedUnitCount + 2);

-      expect(container.querySelector('button, a')).not.toHaveTextContent('Previous');
-      expect(container.querySelector('svg.fa-tasks')).toBeNull();
-      expect(container.querySelector('button, a')).not.toHaveTextContent('Next');
+      expect(sequenceNavButtons[0]).toHaveTextContent('Previous');
+      // Prove this button is rendering an SVG tasks icon, meaning it's a unit/vertical.
+      expect(sequenceNavButtons[1].querySelector('svg')).toHaveClass('fa-tasks');
+      expect(sequenceNavButtons[sequenceNavButtons.length - 1]).toHaveTextContent('Next');
    }

    beforeEach(async () => {
@@ -222,7 +224,7 @@ describe('CoursewareContainer', () => {
        const container = await loadContainer();

        assertLoadedHeader(container);
-        assertNoSequenceNavigation(container);
+        assertSequenceNavigation(container);

        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -245,7 +247,7 @@ describe('CoursewareContainer', () => {
        const container = await loadContainer();

        assertLoadedHeader(container);
-        assertNoSequenceNavigation(container);
+        assertSequenceNavigation(container);

        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -272,12 +274,29 @@ describe('CoursewareContainer', () => {
        setUpMockRequests({ courseBlocks });
      });

+      // describe('when the URL contains a unit ID', () => {
+      //   it('should ignore the section ID and redirect based on the unit ID', async () => {
+      //     const urlUnit = unitTree[1][1][1];
+      //     setUrl(sectionTree[1].id, urlUnit.id);
+      //     const container = await loadContainer();
+      //     assertLoadedHeader(container);
+      //     assertSequenceNavigation(container, 2);
+      //     assertLocation(container, sequenceTree[1][1].id, urlUnit.id);
+      //   });
+
+      //   it('should ignore invalid unit IDs and redirect to the course root', async () => {
+      //     setUrl(sectionTree[1].id, 'foobar');
+      //     await loadContainer();
+      //     expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
+      //   });
+      // });
+
      describe('when the URL does not contain a unit ID', () => {
        it('should choose a unit within the section\'s first sequence', async () => {
          setUrl(sectionTree[1].id);
          const container = await loadContainer();
          assertLoadedHeader(container);
-          assertNoSequenceNavigation(container);
+          assertSequenceNavigation(container, 2);
          assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
        });
      });
@@ -323,6 +342,27 @@ describe('CoursewareContainer', () => {
      });
    });

+    // describe('when the URL only contains a unit ID', () => {
+    //   const { courseBlocks, unitTree, sequenceTree } = buildBinaryCourseBlocks(courseId, courseMetadata.name);
+
+    //   beforeEach(async () => {
+    //     setUpMockRequests({ courseBlocks });
+    //   });
+
+    //   it('should insert the sequence ID into the URL', async () => {
+    //     const unit = unitTree[1][0][1];
+    //     history.push(`/course/${courseId}/${unit.id}`);
+    //     const container = await loadContainer();
+
+    //     assertLoadedHeader(container);
+    //     assertSequenceNavigation(container, 2);
+    //     const expectedSequenceId = sequenceTree[1][0].id;
+    //     const expectedUrl = `http://localhost/course/${courseId}/${expectedSequenceId}/${unit.id}`;
+    //     expect(global.location.href).toEqual(expectedUrl);
+    //     expect(container.querySelector('.fake-unit')).toHaveTextContent(unit.id);
+    //   });
+    // });
+
    describe('when the URL contains a course ID and sequence ID', () => {
      const sequenceBlock = defaultSequenceBlock;
      const unitBlocks = defaultUnitBlocks;
@@ -332,7 +372,7 @@ describe('CoursewareContainer', () => {
        const container = await loadContainer();

        assertLoadedHeader(container);
-        assertNoSequenceNavigation(container);
+        assertSequenceNavigation(container);

        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -351,7 +391,7 @@ describe('CoursewareContainer', () => {
        const container = await loadContainer();

        assertLoadedHeader(container);
-        assertNoSequenceNavigation(container);
+        assertSequenceNavigation(container);

        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -368,24 +408,44 @@ describe('CoursewareContainer', () => {
        const container = await loadContainer();

        assertLoadedHeader(container);
-        assertNoSequenceNavigation(container);
+        assertSequenceNavigation(container);

        expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
        expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
      });

-      it('should render the sequence_navigation plugin slot correctly', async () => {
-        axiosMock
-          .onPost(`${courseId}/xblock/${sequenceBlock.id}/handler/get_completion`)
-          .reply(200, { complete: true });
+      it('should navigate between units and check block completion', async () => {
+        axiosMock.onPost(`${courseId}/xblock/${sequenceBlock.id}/handler/get_completion`).reply(200, {
+          complete: true,
+        });

        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        await loadContainer();
+        const container = await loadContainer();

-        expect(screen.getByTestId('org.openedx.frontend.learning.sequence_navigation.v1')).toBeInTheDocument();
+        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
+        const sequenceNextButton = sequenceNavButtons[4];
+        expect(sequenceNextButton).toHaveTextContent('Next');
+        fireEvent.click(sequenceNextButton);
+
+        expect(global.location.href).toEqual(`http://localhost/course/${courseId}/${sequenceBlock.id}/${unitBlocks[1].id}`);
      });
    });
+
+    // describe('when the current sequence is an exam', () => {
+    //   const { location } = window;
+
+    //   beforeEach(() => {
+    //     delete window.location;
+    //     window.location = {
+    //       assign: jest.fn(),
+    //     };
+    //   });
+
+    //   afterEach(() => {
+    //     window.location = location;
+    //   });
+    // });
  });

  describe('when receiving a course_access error_code', () => {
--- 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/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { breakpoints, useWindowSize } from '@openedx/paragon';

 import { AlertList } from '@src/generic/user-messages';
 import { useModel } from '@src/generic/model-store';
+import { getCoursewareOutlineSidebarSettings } from '../data/selectors';
 import Chat from './chat/Chat';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import NewSidebarProvider from './new-sidebar/SidebarContextProvider';
@@ -36,6 +37,8 @@ const Course = ({
  } = useModel('courseHomeMeta', courseId);
  const sequence = useModel('sequences', sequenceId);
  const section = useModel('sections', sequence ? sequence.sectionId : null);
+  const { enableNavigationSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
+  const navigationDisabled = enableNavigationSidebar || (sequence?.navigationDisabled ?? false);
  const navigate = useNavigate();
  const { pathname } = useLocation();

@@ -81,13 +84,17 @@ const Course = ({
        <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
      </Helmet>
      <div className="position-relative d-flex align-items-xl-center mb-4 mt-1 flex-column flex-xl-row">
-        <CourseBreadcrumbsSlot
-          courseId={courseId}
-          sectionId={section ? section.id : null}
-          sequenceId={sequenceId}
-          isStaff={isStaff}
-          unitId={unitId}
-        />
+        {navigationDisabled || (
+        <>
+          <CourseBreadcrumbsSlot
+            courseId={courseId}
+            sectionId={section ? section.id : null}
+            sequenceId={sequenceId}
+            isStaff={isStaff}
+            unitId={unitId}
+          />
+        </>
+        )}
        {shouldDisplayChat && (
          <>
            <Chat
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -202,7 +202,7 @@ describe('Course', () => {
    });
  });

-  it('doesn\'t renders course breadcrumbs by default', async () => {
+  it('renders course breadcrumbs as expected', async () => {
    const courseMetadata = Factory.build('courseMetadata');
    const unitBlocks = Array.from({ length: 3 }).map(() => Factory.build(
      'block',
@@ -210,7 +210,7 @@ describe('Course', () => {
      { courseId: courseMetadata.id },
    ));
    const testStore = await initializeTestStore({
-      courseMetadata, unitBlocks,
+      courseMetadata, unitBlocks, enableNavigationSidebar: { enable_navigation_sidebar: false },
    }, false);
    const { courseware, models } = testStore.getState();
    const { courseId, sequenceId } = courseware;
@@ -226,10 +226,10 @@ describe('Course', () => {
    await waitFor(() => {
      expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument();
    });
-    // expect the section and sequence "titles" not to be loaded in as breadcrumb labels.
-    await waitFor(() => {
-      expect(screen.queryByText(Object.values(models.sections)[0].title)).not.toBeInTheDocument();
-      expect(screen.queryByText(Object.values(models.sequences)[0].title)).not.toBeInTheDocument();
+    // expect the section and sequence "titles" to be loaded in as breadcrumb labels.
+    waitFor(() => {
+      expect(screen.findByText(Object.values(models.sections)[0].title)).toBeInTheDocument();
+      expect(screen.findByText(Object.values(models.sequences)[0].title)).toBeInTheDocument();
    });
  });

--- 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
@@ -25,12 +25,12 @@ 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/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,17 +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,
@@ -47,7 +47,7 @@ const Sequence = ({
  const unit = useModel('units', unitId);
  const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
  const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);
-
+  const { enableNavigationSidebar: isEnabledOutlineSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
  const handleNext = () => {
    const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
    const newUnitId = sequence.unitIds[nextIndex];
@@ -90,30 +90,6 @@ const Sequence = ({
    sendTrackingLogEvent(eventName, payload);
  };

-  /* istanbul ignore next */
-  const nextHandler = () => {
-    logEvent('edx.ui.lms.sequence.next_selected', 'top');
-    handleNext();
-  };
-
-  /* istanbul ignore next */
-  const previousHandler = () => {
-    logEvent('edx.ui.lms.sequence.previous_selected', 'top');
-    handlePrevious();
-  };
-
-  /* istanbul ignore next */
-  const onNavigate = (destinationUnitId) => {
-    logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
-    handleNavigate(destinationUnitId);
-  };
-
-  const sequenceNavProps = {
-    nextHandler,
-    previousHandler,
-    onNavigate,
-  };
-
  useSequenceBannerTextAlert(sequenceId);
  useSequenceEntranceExamAlert(courseId, sequenceId, intl);

@@ -194,25 +170,30 @@ const Sequence = ({
        />
        <CourseOutlineSidebarSlot />
        <div className="sequence w-100">
-          <div className="sequence-navigation-container">
-            {/**
-             SequenceNavigationSlot renders nothing by default.
-             However, we still pass nextHandler, previousHandler, and onNavigate,
-             because, as per the slot's contract, if this slot is replaced
-             with the default SequenceNavigation component, these props are required.
-             These handlers are excluded from test coverage via istanbul ignore,
-             since they are not used unless the slot is overridden.
-             */}
-            <SequenceNavigationSlot
-              sequenceId={sequenceId}
-              unitId={unitId}
-              {...{
-                ...sequenceNavProps,
-                nextSequenceHandler,
-                handleNavigate,
-              }}
-            />
-          </div>
+          {!isEnabledOutlineSidebar && (
+            <div className="sequence-navigation-container">
+              <SequenceNavigation
+                sequenceId={sequenceId}
+                unitId={unitId}
+                nextHandler={() => {
+                  logEvent('edx.ui.lms.sequence.next_selected', 'top');
+                  handleNext();
+                }}
+                onNavigate={(destinationUnitId) => {
+                  logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
+                  handleNavigate(destinationUnitId);
+                }}
+                previousHandler={() => {
+                  logEvent('edx.ui.lms.sequence.previous_selected', 'top');
+                  handlePrevious();
+                }}
+                {...{
+                  nextSequenceHandler,
+                  handleNavigate,
+                }}
+              />
+            </div>
+          )}

          <div className="unit-container flex-grow-1 pt-4">
            <SequenceContent
@@ -222,6 +203,7 @@ const Sequence = ({
              unitId={unitId}
              unitLoadedHandler={handleUnitLoaded}
              isOriginalUserStaff={originalUserIsStaff}
+              isEnabledOutlineSidebar={isEnabledOutlineSidebar}
              renderUnitNavigation={renderUnitNavigation}
            />
            {unitHasLoaded && renderUnitNavigation(false)}
@@ -235,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/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -24,6 +24,7 @@ describe('Sequence', () => {
    { type: 'vertical' },
    { courseId: courseMetadata.id },
  ));
+  const enableNavigationSidebar = { enable_navigation_sidebar: false };

  beforeAll(async () => {
    const store = await initializeTestStore({ courseMetadata, unitBlocks });
@@ -95,6 +96,7 @@ describe('Sequence', () => {
      unitBlocks,
      sequenceBlocks,
      sequenceMetadata,
+      enableNavigationSidebar: { enable_navigation_sidebar: true },
    }, false);
    const { container } = render(
      <SidebarWrapper overrideData={{ sequenceId: sequenceBlocks[0].id }} />,
@@ -129,7 +131,7 @@ describe('Sequence', () => {
      { courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
    )];
    const testStore = await initializeTestStore({
-      courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata,
+      courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata, enableNavigationSidebar,
    }, false);
    render(
      <Sequence {...mockData} {...{ sequenceId: sequenceBlocks[0].id }} />,
@@ -188,7 +190,7 @@ describe('Sequence', () => {

    beforeAll(async () => {
      testStore = await initializeTestStore({
-        courseMetadata, unitBlocks, sequenceBlocks,
+        courseMetadata, unitBlocks, sequenceBlocks, enableNavigationSidebar,
      }, false);
    });

@@ -364,6 +366,7 @@ describe('Sequence', () => {
        unitBlocks,
        sequenceBlocks: testSequenceBlocks,
        sequenceMetadata: testSequenceMetadata,
+        enableNavigationSidebar,
      }, false);
      const testData = {
        ...mockData,
--- a/src/courseware/course/sequence/SequenceContent.jsx
+++ b/src/courseware/course/sequence/SequenceContent.jsx
@@ -16,6 +16,7 @@ const SequenceContent = ({
  unitId,
  unitLoadedHandler,
  isOriginalUserStaff,
+  isEnabledOutlineSidebar,
  renderUnitNavigation,
 }) => {
  const intl = useIntl();
@@ -62,6 +63,7 @@ const SequenceContent = ({
      id={unitId}
      onLoaded={unitLoadedHandler}
      isOriginalUserStaff={isOriginalUserStaff}
+      isEnabledOutlineSidebar={isEnabledOutlineSidebar}
      renderUnitNavigation={renderUnitNavigation}
    />
  );
@@ -74,6 +76,7 @@ SequenceContent.propTypes = {
  unitId: PropTypes.string,
  unitLoadedHandler: PropTypes.func.isRequired,
  isOriginalUserStaff: PropTypes.bool.isRequired,
+  isEnabledOutlineSidebar: PropTypes.bool.isRequired,
  renderUnitNavigation: PropTypes.func.isRequired,
 };

--- a/src/courseware/course/sequence/SequenceContent.test.jsx
+++ b/src/courseware/course/sequence/SequenceContent.test.jsx
@@ -15,7 +15,6 @@ describe('Sequence Content', () => {
      sequenceId: courseware.sequenceId,
      unitId: models.sequences[courseware.sequenceId].unitIds[0],
      unitLoadedHandler: () => { },
-      renderUnitNavigation: () => { },
    };
  });

@@ -39,7 +38,7 @@ describe('Sequence Content', () => {
  });

  it('displays message for no content', () => {
-    render(<SequenceContent {...mockData} unitId="" />, { wrapWithRouter: true });
+    render(<SequenceContent {...mockData} unitId={null} />, { wrapWithRouter: true });
    expect(screen.getByText('There is no content here.')).toBeInTheDocument();
  });
 });
--- a/src/courseware/course/sequence/Unit/ContentIFrame.jsx
+++ b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -3,7 +3,7 @@ import React from 'react';

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

 import * as hooks from './hooks';
@@ -65,6 +65,21 @@ 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) && (
@@ -75,30 +90,29 @@ const ContentIFrame = ({
          <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
        </div>
      )}
-      {modalOptions.isOpen
-          && (
+      {modalOptions.isOpen && (modalOptions.isFullscreen
+        ? (
          <ModalDialog
            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,7 +1,7 @@
 import React from 'react';

 import { ErrorPage } from '@edx/frontend-platform/react';
-import { ModalDialog } from '@openedx/paragon';
+import { ModalDialog, Modal } from '@openedx/paragon';
 import { shallow } from '@edx/react-unit-test-utils';

 import PageLoading from '@src/generic/PageLoading';
@@ -14,6 +14,7 @@ jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));

 jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
  .mockComponents({
+    Modal: 'Modal',
    ModalDialog: {
      Body: 'ModalDialog.Body',
    },
@@ -138,7 +139,7 @@ describe('ContentIFrame Component', () => {
    });
    it('does not display modal if modalOptions returns isOpen: false', () => {
      el = shallow(<ContentIFrame {...props} />);
-      expect(el.instance.findByType(ModalDialog).length).toEqual(0);
+      expect(el.instance.findByType(Modal).length).toEqual(0);
    });
    describe('if modalOptions.isOpen', () => {
      const testModalOpenAndHandleClose = () => {
@@ -193,11 +194,10 @@ describe('ContentIFrame Component', () => {
        beforeEach(() => {
          hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(ModalDialog);
+          [component] = el.instance.findByType(Modal);
        });
        it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          const content = component.findByType(ModalDialog.Body)[0].children[0];
-          expect(content.matches(shallow(<div className="unit-modal">{modalOptions.withBody.body}</div>))).toEqual(true);
+          expect(component.props.body).toEqual(<div className="unit-modal">{modalOptions.withBody.body}</div>);
        });
        testModalOpenAndHandleClose();
      });
@@ -205,12 +205,11 @@ describe('ContentIFrame Component', () => {
        beforeEach(() => {
          hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(ModalDialog);
+          [component] = el.instance.findByType(Modal);
        });
        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(
+          expect(component.props.body).toEqual(
            <iframe
              title={modalOptions.withUrl.title}
              allow={IFRAME_FEATURE_POLICY}
@@ -218,7 +217,7 @@ describe('ContentIFrame Component', () => {
              src={modalOptions.withUrl.url}
              style={{ width: '100%', height: modalOptions.withUrl.height }}
            />,
-          ))).toEqual(true);
+          );
        });
      });
    });
--- a/src/courseware/course/sequence/Unit/constants.js
+++ b/src/courseware/course/sequence/Unit/constants.js
@@ -16,7 +16,6 @@ export const messageTypes = StrictDict({
  modal: 'plugin.modal',
  resize: 'plugin.resize',
  videoFullScreen: 'plugin.videoFullScreen',
-  autoAdvance: 'plugin.autoAdvance',
 });

 export default StrictDict({
--- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
+++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
@@ -1,8 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import { throttle } from 'lodash';

 import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
@@ -11,9 +10,6 @@ import { logError } from '@edx/frontend-platform/logging';
 import { fetchCourse } from '@src/courseware/data';
 import { processEvent } from '@src/course-home/data/thunks';
 import { useEventListener } from '@src/generic/hooks';
-import { getSequenceId } from '@src/courseware/data/selectors';
-import { useModel } from '@src/generic/model-store';
-import { useSequenceNavigationMetadata } from '@src/courseware/course/sequence/sequence-navigation/hooks';
 import { messageTypes } from '../constants';

 import useLoadBearingHook from './useLoadBearingHook';
@@ -23,7 +19,6 @@ export const stateKeys = StrictDict({
  hasLoaded: 'hasLoaded',
  showError: 'showError',
  windowTopOffset: 'windowTopOffset',
-  sequences: 'sequences',
 });

 const useIFrameBehavior = ({
@@ -36,12 +31,6 @@ const useIFrameBehavior = ({
  useLoadBearingHook(id);

  const dispatch = useDispatch();
-  const activeSequenceId = useSelector(getSequenceId);
-  const navigate = useNavigate();
-  const activeSequence = useModel(stateKeys.sequences, activeSequenceId);
-  const activeUnitId = activeSequence.unitIds.length > 0
-    ? activeSequence.unitIds[activeSequence.activeUnitIndex] : null;
-  const { isLastUnit, nextLink } = useSequenceNavigationMetadata(activeSequenceId, activeUnitId);

  const [iframeHeight, setIframeHeight] = useKeyedState(stateKeys.iframeHeight, 0);
  const [hasLoaded, setHasLoaded] = useKeyedState(stateKeys.hasLoaded, false);
@@ -83,12 +72,6 @@ const useIFrameBehavior = ({
      // We listen for this message from LMS to know when the page needs to
      // be scrolled to another location on the page.
      window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
-    } else if (type === messageTypes.autoAdvance) {
-      // We are listening to autoAdvance message to move to next sequence automatically.
-      // In case it is the last unit we need not do anything.
-      if (!isLastUnit) {
-        navigate(nextLink);
-      }
    }
  }, [
    id,
--- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
+++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
@@ -9,14 +9,11 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { fetchCourse } from '@src/courseware/data';
 import { processEvent } from '@src/course-home/data/thunks';
 import { useEventListener } from '@src/generic/hooks';
-import { useSequenceNavigationMetadata } from '@src/courseware/course/sequence/sequence-navigation/hooks';

 import { messageTypes } from '../constants';

 import useIFrameBehavior, { stateKeys } from './useIFrameBehavior';

-const mockNavigate = jest.fn();
-
 jest.mock('@edx/frontend-platform', () => ({
  getConfig: jest.fn(),
 }));
@@ -31,7 +28,6 @@ jest.mock('react', () => ({

 jest.mock('react-redux', () => ({
  useDispatch: jest.fn(),
-  useSelector: jest.fn(),
 }));

 jest.mock('lodash', () => ({
@@ -54,16 +50,6 @@ jest.mock('@src/course-home/data/thunks', () => ({
 jest.mock('@src/generic/hooks', () => ({
  useEventListener: jest.fn(),
 }));
-jest.mock('@src/generic/model-store', () => ({
-  useModel: () => ({ unitIds: ['unit1', 'unit2'], entranceExamData: { entranceExamPassed: null } }),
-}));
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockNavigate,
-}));
-
-jest.mock('@src/courseware/course/sequence/sequence-navigation/hooks');
-useSequenceNavigationMetadata.mockReturnValue({ isLastUnit: false, nextLink: '/next-unit-link' });

 const state = mockUseKeyedState(stateKeys);

@@ -387,26 +373,4 @@ describe('useIFrameBehavior hook', () => {
      expect(hook.hasLoaded).toEqual(stateVals.hasLoaded);
    });
  });
-  describe('navigate link for the next unit on auto advance', () => {
-    it('test for link when it is not last unit', () => {
-      hook = useIFrameBehavior(props);
-      const { cb } = useEventListener.mock.calls[0][1];
-      const autoAdvanceMessage = () => ({
-        data: { type: messageTypes.autoAdvance },
-      });
-      cb(autoAdvanceMessage());
-      expect(mockNavigate).toHaveBeenCalledWith('/next-unit-link');
-    });
-    it('test for link when it is last unit', () => {
-      useSequenceNavigationMetadata.mockReset();
-      useSequenceNavigationMetadata.mockReturnValue({ isLastUnit: true, nextLink: '/next-unit-link' });
-      hook = useIFrameBehavior(props);
-      const { cb } = useEventListener.mock.calls[0][1];
-      const autoAdvanceMessage = () => ({
-        data: { type: messageTypes.autoAdvance },
-      });
-      cb(autoAdvanceMessage());
-      expect(mockNavigate).not.toHaveBeenCalled();
-    });
-  });
 });
--- a/src/courseware/course/sequence/Unit/index.jsx
+++ b/src/courseware/course/sequence/Unit/index.jsx
@@ -22,6 +22,7 @@ const Unit = ({
  onLoaded,
  id,
  isOriginalUserStaff,
+  isEnabledOutlineSidebar,
  renderUnitNavigation,
 }) => {
  const { formatMessage } = useIntl();
@@ -47,7 +48,7 @@ const Unit = ({

  return (
    <div className="unit">
-      <UnitTitleSlot unitId={id} {...{ unit, renderUnitNavigation }} />
+      <UnitTitleSlot unitId={id} {...{ unit, isEnabledOutlineSidebar, renderUnitNavigation }} />
      <UnitSuspense {...{ courseId, id }} />
      <ContentIFrame
        elementId="unit-iframe"
@@ -69,6 +70,7 @@ Unit.propTypes = {
  id: PropTypes.string.isRequired,
  onLoaded: PropTypes.func,
  isOriginalUserStaff: PropTypes.bool.isRequired,
+  isEnabledOutlineSidebar: PropTypes.bool.isRequired,
  renderUnitNavigation: PropTypes.func.isRequired,
 };

--- a/src/courseware/course/sequence/Unit/index.test.jsx
+++ b/src/courseware/course/sequence/Unit/index.test.jsx
@@ -14,6 +14,7 @@ const defaultProps = {
  onLoaded: jest.fn().mockName('props.onLoaded'),
  id: 'unit-id',
  isOriginalUserStaff: false,
+  isEnabledOutlineSidebar: false,
  renderUnitNavigation: jest.fn(enabled => enabled && 'UnitNaviagtion'),
 };

@@ -67,8 +68,16 @@ describe('<Unit />', () => {
      expect(screen.getByText('Bookmark this page')).toBeInTheDocument();
    });

-    it('renders unit navigation buttons', () => {
-      const props = { ...defaultProps };
+    it('does not render unit navigation buttons', () => {
+      renderComponent(defaultProps);
+
+      const nextButton = screen.queryByText('UnitNaviagtion');
+
+      expect(nextButton).toBeNull();
+    });
+
+    it('renders unit navigation buttons when isEnabledOutlineSidebar is true', () => {
+      const props = { ...defaultProps, isEnabledOutlineSidebar: true };
      renderComponent(props);

      const nextButton = screen.getByText('UnitNaviagtion');
--- 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.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/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -100,13 +100,13 @@ const SequenceNavigation = ({
    );
  };

-  return sequenceStatus === LOADED ? (
+  return sequenceStatus === LOADED && (
    <nav id="courseware-sequence-navigation" data-testid="courseware-sequence-navigation" className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}>
      {renderPreviousButton()}
      {renderUnitButtons()}
      {renderNextButton()}
    </nav>
-  ) : null;
+  );
 };

 SequenceNavigation.propTypes = {
--- 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/SidebarContextProvider.jsx
+++ b/src/courseware/course/sidebar/SidebarContextProvider.jsx
@@ -1,11 +1,13 @@
 import { breakpoints, useWindowSize } from '@openedx/paragon';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import {
  useEffect, useState, useMemo, useCallback,
 } from 'react';

 import { useModel } from '@src/generic/model-store';
 import { getLocalStorage, setLocalStorage } from '@src/data/localStorage';
+import { getCoursewareOutlineSidebarSettings } from '../../data/selectors';

 import * as discussionsSidebar from './sidebars/discussions';
 import * as notificationsSidebar from './sidebars/notifications';
@@ -23,10 +25,11 @@ const SidebarProvider = ({
  const shouldDisplayFullScreen = useWindowSize().width < breakpoints.extraLarge.minWidth;
  const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.extraLarge.minWidth;
  const query = new URLSearchParams(window.location.search);
+  const { alwaysOpenAuxiliarySidebar } = useSelector(getCoursewareOutlineSidebarSettings);
  const isInitiallySidebarOpen = shouldDisplaySidebarOpen || query.get('sidebar') === 'true';

  let initialSidebar = shouldDisplayFullScreen ? getLocalStorage(`sidebar.${courseId}`) : null;
-  if (!shouldDisplayFullScreen && isInitiallySidebarOpen) {
+  if (!shouldDisplayFullScreen && isInitiallySidebarOpen && alwaysOpenAuxiliarySidebar) {
    initialSidebar = isUnitHasDiscussionTopics
      ? SIDEBARS[discussionsSidebar.ID].ID
      : verifiedMode && SIDEBARS[notificationsSidebar.ID].ID;
--- 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';
@@ -23,6 +24,7 @@ const CourseOutlineTray = () => {
  const {
    courseId,
    unitId,
+    isEnabledSidebar,
    currentSidebar,
    handleToggleCollapse,
    isActiveEntranceExam,
@@ -33,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();
@@ -76,7 +78,7 @@ const CourseOutlineTray = () => {
    </div>
  );

-  if (isActiveEntranceExam || currentSidebar !== ID) {
+  if (!isEnabledSidebar || isActiveEntranceExam || currentSidebar !== ID) {
    return null;
  }

--- 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
@@ -67,6 +67,15 @@ describe('<CourseOutlineTray />', () => {
    expect(screen.queryByRole('button', { name: 'Course outline' })).not.toBeInTheDocument();
  });

+  it('doesn\'t render when outline sidebar is disabled', async () => {
+    await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: false } });
+    renderWithProvider();
+
+    await expect(screen.queryByText(messages.loading.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: section.title })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: messages.toggleCourseOutlineTrigger.defaultMessage })).not.toBeInTheDocument();
+  });
+
  it('renders correctly when course outline is loaded', async () => {
    await initTestStore();
    renderWithProvider();
@@ -93,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/CourseOutlineTrigger.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.jsx
@@ -15,12 +15,13 @@ const CourseOutlineTrigger = ({ isMobileView }) => {
    shouldDisplayFullScreen,
    handleToggleCollapse,
    isActiveEntranceExam,
+    isEnabledSidebar,
  } = useCourseOutlineSidebar();

  const isDisplayForDesktopView = !isMobileView && !shouldDisplayFullScreen && currentSidebar !== ID;
  const isDisplayForMobileView = isMobileView && shouldDisplayFullScreen;

-  if ((!isDisplayForDesktopView && !isDisplayForMobileView) || isActiveEntranceExam) {
+  if ((!isDisplayForDesktopView && !isDisplayForMobileView) || !isEnabledSidebar || isActiveEntranceExam) {
    return null;
  }

--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTrigger.test.jsx
@@ -45,7 +45,7 @@ describe('<CourseOutlineTrigger />', () => {
  it('renders correctly for desktop when sidebar is enabled', async () => {
    const user = userEvent.setup();
    const mockToggleSidebar = jest.fn();
-    await initTestStore();
+    await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: true } });
    renderWithProvider({ toggleSidebar: mockToggleSidebar }, { isMobileView: false });

    const toggleButton = await screen.getByRole('button', {
@@ -62,7 +62,7 @@ describe('<CourseOutlineTrigger />', () => {
  it('renders correctly for mobile when sidebar is enabled', async () => {
    const user = userEvent.setup();
    const mockToggleSidebar = jest.fn();
-    await initTestStore();
+    await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: true } });
    renderWithProvider({
      toggleSidebar: mockToggleSidebar,
      shouldDisplayFullScreen: true,
@@ -82,7 +82,7 @@ describe('<CourseOutlineTrigger />', () => {
  it('changes current sidebar value on click', async () => {
    const user = userEvent.setup();
    const mockToggleSidebar = jest.fn();
-    await initTestStore();
+    await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: true } });
    renderWithProvider({
      toggleSidebar: mockToggleSidebar,
      shouldDisplayFullScreen: true,
@@ -99,4 +99,14 @@ describe('<CourseOutlineTrigger />', () => {
    expect(mockToggleSidebar).toHaveBeenCalledTimes(1);
    expect(mockToggleSidebar).toHaveBeenCalledWith(null);
  });
+
+  it('does not render when isEnabled is false', async () => {
+    await initTestStore({ enableNavigationSidebar: { enable_navigation_sidebar: false } });
+    renderWithProvider({}, { isMobileView: false });
+
+    const toggleButton = await screen.queryByRole('button', {
+      name: messages.toggleCourseOutlineTrigger.defaultMessage,
+    });
+    expect(toggleButton).not.toBeInTheDocument();
+  });
 });
--- 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,9 +22,7 @@ import { ID } from './constants';
 export const useCourseOutlineSidebar = () => {
  const dispatch = useDispatch();
  const isCollapsedOutlineSidebar = window.sessionStorage.getItem('hideCourseOutlineSidebar');
-  const {
-    enableCompletionTracking: isEnabledCompletionTracking,
-  } = useSelector(getCoursewareOutlineSidebarSettings);
+  const { enableNavigationSidebar: isEnabledSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
  const courseOutlineShouldUpdate = useSelector(getCourseOutlineShouldUpdate);
  const courseOutlineStatus = useSelector(getCourseOutlineStatus);
  const sequenceStatus = useSelector(getSequenceStatus);
@@ -47,7 +42,7 @@ export const useCourseOutlineSidebar = () => {
    shouldDisplayFullScreen,
  } = useContext(SidebarContext);

-  const isOpenSidebar = !initialSidebar && !isCollapsedOutlineSidebar;
+  const isOpenSidebar = !initialSidebar && isEnabledSidebar && !isCollapsedOutlineSidebar;
  const [isOpen, setIsOpen] = useState(true);

  const {
@@ -56,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');
    }
  };

@@ -109,32 +99,17 @@ export const useCourseOutlineSidebar = () => {
  }, [initialSidebar, unitId]);

  useEffect(() => {
-    if (courseOutlineStatus !== LOADED || courseOutlineShouldUpdate) {
+    if ((isEnabledSidebar && courseOutlineStatus !== LOADED) || courseOutlineShouldUpdate) {
      dispatch(getCourseOutlineStructure(courseId));
    }
-  }, [courseId, 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]);
+  }, [courseId, isEnabledSidebar, courseOutlineShouldUpdate]);

  return {
    courseId,
    unitId,
    currentSidebar,
    shouldDisplayFullScreen,
-    isEnabledCompletionTracking,
+    isEnabledSidebar,
    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
@@ -104,15 +104,16 @@ export async function getCourseOutline(courseId) {
 }

 /**
- * Get waffle flag value that enables completion tracking.
+ * Get waffle flag value that enable courseware outline sidebar and always open auxiliary sidebar.
 * @param {string} courseId - The unique identifier for the course.
- * @returns {Promise<{enable_completion_tracking: boolean}>} - The object
- * of boolean values of enabling of the completion tracking.
+ * @returns {Promise<{enable_navigation_sidebar: boolean, enable_navigation_sidebar: boolean}>} - The object
+ * of boolean values of enabling of the outline sidebar and is always open auxiliary sidebar.
 */
 export async function getCoursewareOutlineSidebarToggles(courseId) {
  const url = new URL(`${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware-navigation-sidebar/toggles/`);
  const { data } = await getAuthenticatedHttpClient().get(url.href);
  return {
-    enable_completion_tracking: data.enable_completion_tracking || false,
+    enable_navigation_sidebar: data.enable_navigation_sidebar || false,
+    always_open_auxiliary_sidebar: data.always_open_auxiliary_sidebar || false,
  };
 }
--- a/src/courseware/data/redux.test.js
+++ b/src/courseware/data/redux.test.js
@@ -111,7 +111,8 @@ describe('Data layer integration tests', () => {
      axiosMock.onGet(courseUrl).reply(200, courseMetadata);
      axiosMock.onGet(learningSequencesUrlRegExp).reply(200, buildOutlineFromBlocks(courseBlocks));
      axiosMock.onGet(coursewareSidebarSettingsUrl).reply(200, {
-        enable_completion_tracking: true,
+        enable_navigation_sidebar: true,
+        always_open_auxiliary_sidebar: true,
      });

      await executeThunk(thunks.fetchCourse(courseId), store.dispatch);
@@ -123,7 +124,8 @@ describe('Data layer integration tests', () => {
      expect(state.courseware.sequenceStatus).toEqual('loading');
      expect(state.courseware.sequenceId).toEqual(null);
      expect(state.courseware.coursewareOutlineSidebarSettings).toEqual({
-        enableCompletionTracking: true,
+        enableNavigationSidebar: true,
+        alwaysOpenAuxiliarySidebar: true,
      });

      // check that at least one key camel cased, thus course data normalized
@@ -137,7 +139,8 @@ describe('Data layer integration tests', () => {
      axiosMock.onGet(courseUrl).reply(200, courseMetadata);
      axiosMock.onGet(learningSequencesUrlRegExp).reply(200, simpleOutline);
      axiosMock.onGet(coursewareSidebarSettingsUrl).reply(200, {
-        enable_completion_tracking: false,
+        enable_navigation_sidebar: false,
+        always_open_auxiliary_sidebar: false,
      });

      await executeThunk(thunks.fetchCourse(courseId), store.dispatch);
@@ -149,7 +152,8 @@ describe('Data layer integration tests', () => {
      expect(state.courseware.sequenceStatus).toEqual('loading');
      expect(state.courseware.sequenceId).toEqual(null);
      expect(state.courseware.coursewareOutlineSidebarSettings).toEqual({
-        enableCompletionTracking: false,
+        enableNavigationSidebar: false,
+        alwaysOpenAuxiliarySidebar: 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
@@ -88,11 +88,10 @@ export function fetchCourse(courseId) {

      if (fetchedCoursewareOutlineSidebarTogglesResult) {
        const {
-          enable_completion_tracking: enableCompletionTracking,
+          enable_navigation_sidebar: enableNavigationSidebar,
+          always_open_auxiliary_sidebar: alwaysOpenAuxiliarySidebar,
        } = coursewareOutlineSidebarTogglesResult.value;
-        dispatch(setCoursewareOutlineSidebarToggles(
-          { enableCompletionTracking },
-        ));
+        dispatch(setCoursewareOutlineSidebarToggles({ enableNavigationSidebar, alwaysOpenAuxiliarySidebar }));
      }

      // Log errors for each request if needed. Outline failures may occur
--- 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>
@@ -172,7 +170,6 @@ initialize({
        CREDIT_HELP_LINK_URL: process.env.CREDIT_HELP_LINK_URL || null,
        DISCUSSIONS_MFE_BASE_URL: process.env.DISCUSSIONS_MFE_BASE_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,
--- 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,
@@ -408,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;
  }
 }

@@ -432,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/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/CourseBreadcrumbsSlot/README.md
+++ b/src/plugin-slots/CourseBreadcrumbsSlot/README.md
@@ -14,44 +14,6 @@ This slot is used to replace/modify/hide the course breadcrumbs.
 ### Default content
 ![Breadcrumbs slot with default content](./screenshot_default.png)

-### Replace with default breadcrumbs component
-You can also inject the default `CourseBreadcrumbs` component explicitly using the slot system, for example to wrap or style it differently.
-![Breadcrumbs slot with default content](./screenshot_with_default_breadcrumbs.png)
-
-```js
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-import CourseBreadcrumbs from './src/courseware/course/breadcrumbs';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.learning.course_breadcrumbs.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'default_breadcrumbs_component',
-            type: DIRECT_PLUGIN,
-            RenderWidget: ({ courseId, sectionId, sequenceId, isStaff, unitId }) => (
-              <CourseBreadcrumbs
-                courseId={courseId}
-                sectionId={sectionId}
-                sequenceId={sequenceId}
-                isStaff={isStaff}
-                unitId={unitId}
-              />
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```
-
 ### Replaced with custom component
 ![🍞 in breadcrumbs slot](./screenshot_custom.png)

--- a/src/plugin-slots/CourseBreadcrumbsSlot/index.tsx
+++ b/src/plugin-slots/CourseBreadcrumbsSlot/index.tsx
@@ -2,6 +2,8 @@ import React from 'react';

 import { PluginSlot } from '@openedx/frontend-plugin-framework';

+import CourseBreadcrumbs from '../../courseware/course/breadcrumbs';
+
 interface Props {
  courseId: string;
  sectionId?: string;
@@ -19,12 +21,13 @@ export const CourseBreadcrumbsSlot : React.FC<Props> = ({
    slotOptions={{
      mergeProps: true,
    }}
-    pluginProps={{
-      courseId,
-      sectionId,
-      sequenceId,
-      unitId,
-      isStaff,
-    }}
-  />
+  >
+    <CourseBreadcrumbs
+      courseId={courseId}
+      sectionId={sectionId}
+      sequenceId={sequenceId}
+      isStaff={isStaff}
+      unitId={unitId}
+    />
+  </PluginSlot>
 );
--- a/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_default.png
+++ b/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_default.png
--- a/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_with_default_breadcrumbs.png
+++ b/src/plugin-slots/CourseBreadcrumbsSlot/screenshot_with_default_breadcrumbs.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/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
Maxim Beder	241e188465	feat: update certificate icons Old certificates icons contained edX trademark logos, which were not suitable for the open source repos. Replaced with icons that contain Open edX logos.	2025-05-05 20:43:01 +05:30