Merge branch 'master' of https://github.com/openedx/frontend-component-header into mashal-m/url-test

2023-11-29 17:15:29 +05:00
parent 4c21d5874d 67fefe814b
commit 0e65c7b32c
29 changed files with 837 additions and 578 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,13 +11,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
      with:
        fetch-depth: 0
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -9,13 +9,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v3
+      uses: actions/checkout@v4
      with:
        fetch-depth: 0
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
--- a/4
+++ b/4
@@ -6,7 +6,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs

 build:
 	rm -rf ./dist
@@ -17,7 +17,7 @@ build:
 	@rm -rf dist/__mocks__

 requirements:
-	npm install
+	npm ci

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
--- a/README.rst
+++ b/README.rst
@@ -2,22 +2,42 @@
 frontend-component-header
 #########################

-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+|license| |Build Status| |Codecov| |npm_version| |npm_downloads| |semantic-release|

 ********
-Overview
+Purpose
 ********

 A generic header for Open edX micro-frontend applications.

 ************
-Requirements
+Getting Started
 ************

+Prerequisites
+=============
+
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Devstack: https://github.com/openedx/devstack
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+Requirements
+============
+
 This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/master/src/index.jsx>`_

+
 Environment Variables
-=====================
+====================

 * ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
 * ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout.
@@ -32,9 +52,8 @@ Environment Variables
  menu items when truthy.  This is intended to be used in micro-frontends like
  frontend-app-authentication in which these menus are considered distractions from the user's task.

-************
 Installation
-************
+============

 To install this header into your Open edX micro-frontend, run the following command in your MFE:

@@ -42,9 +61,33 @@ To install this header into your Open edX micro-frontend, run the following comm

 This will make the component available to be imported into your application.

-*****
+Cloning and Startup
+===================
+
+.. code-block::
+
+
+  1. Clone your new repo:
+
+    ``git clone https://github.com/openedx/frontend-component-header.git``
+
+  2. Use node v18.x.
+
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-component-header && npm ci``
+
+  4. Start the dev server:
+
+    ``npm start``
+
 Usage
-*****
+=====

 This library has the following exports:

@@ -58,10 +101,8 @@ Examples
 * `An example of component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_

-
-***********
 Development
-***********
+===========

 Install dependencies::

@@ -75,6 +116,63 @@ Build a production distribution::

  npm run build

+License
+=======
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+============
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+Getting Help
+===========
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-component-header/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+The Open edX Code of Conduct
+============================
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+Reporting Security Issues
+=========================
+
+Please do not report security issues in public. Please email security@openedx.org.
+
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
   :target: https://travis-ci.com/edx/frontend-component-header
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header
@@ -86,4 +184,4 @@ Build a production distribution::
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
   :target: @edx/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+   :target: https://github.com/semantic-release/semantic-release
--- a/example/index.js
+++ b/example/index.js
@@ -7,6 +7,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';

 import './index.scss';
+import StudioHeader from '../src/studio-header/StudioHeader';

 subscribe(APP_READY, () => {
  ReactDOM.render(
@@ -32,7 +33,35 @@ subscribe(APP_READY, () => {
      }}>
        <Header />
      </AppContext.Provider>
-      <h5 className="mt-2">Logged in state</h5>
+      <h5 className="mt-2  mb-5">Logged in state</h5>
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
+          username: 'testuser',
+          roles: [],
+          administrator: false,
+        },
+        config: getConfig(),
+      }}>
+        <StudioHeader
+          number="run123"
+          org="testX"
+          title="Course Name"
+          isHiddenMainMenu={false}
+          mainMenuDropdowns={[
+            {
+              id: 'content-dropdown',
+              buttonTitle: 'Content',
+              items: [{
+                href: '#',
+                title: 'Outline',
+              }],
+            },
+          ]}
+          outlineLink="#"
+        />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state for Studio header</h5>
    </AppProvider>,
    document.getElementById('root'),
  );
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,22 +9,22 @@
      "version": "1.0.0-semantically-released",
      "license": "AGPL-3.0",
      "dependencies": {
-        "@edx/paragon": "21.1.10",
+        "@edx/paragon": "21.5.6",
        "@fortawesome/fontawesome-svg-core": "6.4.2",
        "@fortawesome/free-brands-svg-icons": "6.4.2",
        "@fortawesome/free-regular-svg-icons": "6.4.2",
        "@fortawesome/free-solid-svg-icons": "6.4.2",
        "@fortawesome/react-fontawesome": "^0.2.0",
-        "axios-mock-adapter": "1.21.5",
+        "axios-mock-adapter": "1.22.0",
        "babel-polyfill": "6.26.0",
        "react-responsive": "8.2.0",
        "react-transition-group": "4.4.5"
      },
      "devDependencies": {
-        "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
        "@edx/browserslist-config": "^1.1.1",
-        "@edx/frontend-build": "12.9.17",
-        "@edx/frontend-platform": "5.4.0",
+        "@edx/frontend-build": "13.0.8",
+        "@edx/frontend-platform": "6.1.0",
        "@edx/reactifex": "^2.1.1",
        "@testing-library/dom": "9.3.3",
        "@testing-library/jest-dom": "5.17.0",
@@ -38,13 +38,13 @@
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-redux": "7.2.9",
-        "react-router-dom": "6.16.0",
+        "react-router-dom": "6.20.0",
        "react-test-renderer": "17.0.2",
        "redux": "4.2.1",
        "redux-saga": "1.2.3"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
+        "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
        "prop-types": "^15.5.10",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0"
@@ -60,9 +60,9 @@
      }
    },
    "node_modules/@adobe/css-tools": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
-      "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
+      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==",
      "dev": true
    },
    "node_modules/@ampproject/remapping": {
@@ -108,12 +108,13 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
-      "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
+      "version": "7.22.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
      "dev": true,
      "dependencies": {
-        "@babel/highlight": "^7.22.5"
+        "@babel/highlight": "^7.22.13",
+        "chalk": "^2.4.2"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -176,22 +177,13 @@
        "eslint": "^7.5.0 || ^8.0.0"
      }
    },
-    "node_modules/@babel/eslint-parser/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
    "node_modules/@babel/generator": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
-      "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
      "dev": true,
      "dependencies": {
-        "@babel/types": "^7.22.5",
+        "@babel/types": "^7.23.0",
        "@jridgewell/gen-mapping": "^0.3.2",
        "@jridgewell/trace-mapping": "^0.3.17",
        "jsesc": "^2.5.1"
@@ -301,22 +293,22 @@
      }
    },
    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
-      "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/helper-function-name": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
-      "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
      "dev": true,
      "dependencies": {
-        "@babel/template": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -458,9 +450,9 @@
      }
    },
    "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
-      "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
      "dev": true,
      "dependencies": {
        "@babel/types": "^7.22.5"
@@ -479,9 +471,9 @@
      }
    },
    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
-      "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
      "dev": true,
      "engines": {
        "node": ">=6.9.0"
@@ -526,13 +518,13 @@
      }
    },
    "node_modules/@babel/highlight": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
-      "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
        "js-tokens": "^4.0.0"
      },
      "engines": {
@@ -540,9 +532,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
-      "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@@ -1973,33 +1965,33 @@
      }
    },
    "node_modules/@babel/template": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
-      "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
      "dev": true,
      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5"
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
-      "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
+      "version": "7.23.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
+      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
      "dev": true,
      "dependencies": {
-        "@babel/code-frame": "^7.22.5",
-        "@babel/generator": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.5",
-        "@babel/helper-function-name": "^7.22.5",
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.0",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.22.5",
-        "@babel/parser": "^7.22.5",
-        "@babel/types": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.0",
+        "@babel/types": "^7.23.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@@ -2008,13 +2000,13 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
-      "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
      "dev": true,
      "dependencies": {
        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20",
        "to-fast-properties": "^2.0.0"
      },
      "engines": {
@@ -2053,9 +2045,9 @@
      }
    },
    "node_modules/@csstools/cascade-layer-name-parser": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz",
-      "integrity": "sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.5.tgz",
+      "integrity": "sha512-v/5ODKNBMfBl0us/WQjlfsvSlYxfZLhNMVIsuCPib2ulTwGKYbKJbwqw671+qH9Y4wvWVnu7LBChvml/wBKjFg==",
      "dev": true,
      "funding": [
        {
@@ -2071,8 +2063,8 @@
        "node": "^14 || ^16 || >=18"
      },
      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.2.0"
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
      }
    },
    "node_modules/@csstools/css-parser-algorithms": {
@@ -2149,10 +2141,10 @@
      }
    },
    "node_modules/@edx/brand": {
-      "name": "@edx/brand-openedx",
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.2.0.tgz",
-      "integrity": "sha512-r4PDN3rCgDsLovW44ayxoNNHgG5I4Rvss6MG5CrQEX4oW8YhQVEod+jJtwR5vi0mFLN2GIaMlDpd7iIy03VqXg==",
+      "name": "@openedx/brand-openedx",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@openedx/brand-openedx/-/brand-openedx-1.2.2.tgz",
+      "integrity": "sha512-mBvxR7aB9290j9+h3d/9G8VkG1b8ecLSmlxc0vskfm7DL/fKUzFmHAj3PI7Z4kkwCQOL4QT5mJHJKC0ZFf7qvQ==",
      "dev": true
    },
    "node_modules/@edx/browserslist-config": {
@@ -2176,9 +2168,9 @@
      }
    },
    "node_modules/@edx/frontend-build": {
-      "version": "12.9.17",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-12.9.17.tgz",
-      "integrity": "sha512-P4w/jp456o5EQ5l0WVl4JIRHnC5xbG+M1Ce7xX1JKex4YDN3lmoBuiaguPg3n6CBDsNKEiBr48n4u+ug+5UTCw==",
+      "version": "13.0.8",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-13.0.8.tgz",
+      "integrity": "sha512-TXUoF7BTIHe4h+W4Dt9+Gf8PXnfVJRwLKitEkpYUH5r4kDEJfyKKGYSbizkciGI+9QScbhm2u8Alv2agDXV1TA==",
      "dev": true,
      "dependencies": {
        "@babel/cli": "7.22.5",
@@ -2191,13 +2183,14 @@
        "@babel/preset-react": "7.22.5",
        "@edx/eslint-config": "3.2.0",
        "@edx/new-relic-source-map-webpack-plugin": "2.1.0",
+        "@formatjs/cli": "^6.0.3",
        "@fullhuman/postcss-purgecss": "5.0.0",
        "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
        "@svgr/webpack": "8.1.0",
        "autoprefixer": "10.4.16",
        "babel-jest": "26.6.3",
        "babel-loader": "9.1.3",
-        "babel-plugin-react-intl": "7.9.4",
+        "babel-plugin-formatjs": "^10.4.0",
        "babel-plugin-transform-imports": "2.0.0",
        "babel-polyfill": "6.26.0",
        "chalk": "4.1.2",
@@ -2219,20 +2212,20 @@
        "image-minimizer-webpack-plugin": "3.8.3",
        "jest": "26.6.3",
        "mini-css-extract-plugin": "1.6.2",
-        "postcss": "8.4.30",
-        "postcss-custom-media": "10.0.1",
+        "postcss": "8.4.31",
+        "postcss-custom-media": "10.0.2",
        "postcss-loader": "7.3.3",
-        "postcss-rtlcss": "4.0.8",
+        "postcss-rtlcss": "4.0.9",
        "react-dev-utils": "12.0.1",
        "react-refresh": "0.14.0",
        "resolve-url-loader": "5.0.0",
-        "sass": "1.65.1",
+        "sass": "1.69.5",
        "sass-loader": "13.3.2",
        "sharp": "0.32.6",
        "source-map-loader": "4.0.1",
        "style-loader": "3.3.3",
        "url-loader": "4.1.1",
-        "webpack": "5.88.2",
+        "webpack": "5.89.0",
        "webpack-bundle-analyzer": "4.9.1",
        "webpack-cli": "5.1.4",
        "webpack-dev-server": "4.15.1",
@@ -3378,9 +3371,9 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.4.0.tgz",
-      "integrity": "sha512-cz9yQfHJk1PMQdhxeyIXXiBNqaG9dQZpcBgodmVlLnL/PeN1CuRVjjW98WlKYSrxoZAH5wdgUOr0hKRW3OyBAA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-6.1.0.tgz",
+      "integrity": "sha512-O9pejnYPbmijVTsJhXEj6wq4pqA5V5njNeiYh4O5RkRDPYPzC/jxulHNGEj0oH6Kvf41IlonlSjrynJIwX/cwQ==",
      "dev": true,
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.1.0",
@@ -3400,7 +3393,7 @@
        "lodash.merge": "4.6.2",
        "lodash.snakecase": "4.1.1",
        "pubsub-js": "1.9.4",
-        "react-intl": "^5.25.0",
+        "react-intl": "6.4.7",
        "universal-cookie": "4.0.4"
      },
      "bin": {
@@ -3413,7 +3406,7 @@
        "prop-types": "^15.7.2",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0",
-        "react-redux": "^7.1.1",
+        "react-redux": "^7.1.1 || ^8.1.1",
        "react-router-dom": "^6.0.0",
        "redux": "^4.0.4"
      }
@@ -3428,9 +3421,9 @@
      }
    },
    "node_modules/@edx/paragon": {
-      "version": "21.1.10",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.1.10.tgz",
-      "integrity": "sha512-5U8tUaL20gDiKfEDr/tuRXrl7fJsN+KgAIn5bWkTtS5Us7r+H+m3LkD58HY7Ntwj8bCrSEtW7YuK3PMabXcMRA==",
+      "version": "21.5.6",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-21.5.6.tgz",
+      "integrity": "sha512-CWR9mFBQAnZ29GeP8igPk3dBLgIQmZJ6tZQiou6855TjHIXcvgmbIvtchKw9SgzhW+D5B0hQJet94zsm+GG/Rg==",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",
@@ -3718,57 +3711,112 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@formatjs/cli": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/cli/-/cli-6.2.1.tgz",
+      "integrity": "sha512-+INAFMLD+bofdFldBnkMorMQq7M+kaKf0xo9fg5ECV2JhNVziPuAWOJR3O8s6aWSfc4bvzeQ1b+1oaMwxrNRHw==",
+      "dev": true,
+      "bin": {
+        "formatjs": "bin/formatjs"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@formatjs/ecma402-abstract": {
      "version": "1.11.4",
      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dev": true,
      "dependencies": {
        "@formatjs/intl-localematcher": "0.2.25",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
      "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.6.2.tgz",
+      "integrity": "sha512-nF/Iww7sc5h+1MBCDRm68qpHTCG4xvGzYs/x9HFcDETSGScaJ1Fcadk5U/NXjXeCtzD+DhN4BAwKFVclHfKMdA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/icu-skeleton-parser": "1.6.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz",
+      "integrity": "sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/intl": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
-      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.9.3.tgz",
+      "integrity": "sha512-hclPdyCF1zk2XmhgdXfl5Sd30QEdRBnIijH7Vc1AWz2K0/saVRrxuL3UYn+m3xEyfOa4yDbTWVbmXDL0XEzlsQ==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.6.2",
+        "@formatjs/intl-displaynames": "6.5.2",
+        "@formatjs/intl-listformat": "7.4.2",
+        "intl-messageformat": "10.5.3",
+        "tslib": "^2.4.0"
      },
      "peerDependencies": {
-        "typescript": "^4.5"
+        "typescript": "^4.7 || 5"
      },
      "peerDependenciesMeta": {
        "typescript": {
@@ -3777,52 +3825,68 @@
      }
    },
    "node_modules/@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.5.2.tgz",
+      "integrity": "sha512-uC2VBlz+WydGTDDpJwMTQuPH3CUpTricr91WH1QMfz5oEHg2sB7mUERcZONE/lu8MOe1jREIx4vBciZEVTqkmA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.4.2.tgz",
+      "integrity": "sha512-+6bSVudEQkf12Hh7kuKt8Xv/MyFlqdwA4V4NLnTZW8uYdF9RxlOELDD0rPaOc2++TMKIzI5o6XXwHPvpL6VrPA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/intl-localematcher": {
      "version": "0.2.25",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
    },
-    "node_modules/@formatjs/intl-numberformat": {
-      "version": "5.7.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-numberformat/-/intl-numberformat-5.7.6.tgz",
-      "integrity": "sha512-ZlZfYtvbVHYZY5OG3RXizoCwxKxEKOrzEe2YOw9wbzoxF3PmFn0SAgojCFGLyNXkkR6xVxlylhbuOPf1dkIVNg==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.4.0",
-        "tslib": "^2.0.1"
-      }
-    },
-    "node_modules/@formatjs/intl-numberformat/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.4.0.tgz",
-      "integrity": "sha512-Mv027hcLFjE45K8UJ8PjRpdDGfR0aManEFj1KzoN8zXNveHGEygpZGfFf/FTTMl+QEVSrPAUlyxaCApvmv47AQ==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.1"
-      }
-    },
    "node_modules/@formatjs/intl-pluralrules": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-pluralrules/-/intl-pluralrules-4.3.3.tgz",
@@ -3845,6 +3909,23 @@
        "tslib": "^2.1.0"
      }
    },
+    "node_modules/@formatjs/intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@fortawesome/fontawesome-common-types": {
      "version": "6.4.2",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -5602,9 +5683,9 @@
      "dev": true
    },
    "node_modules/@remix-run/router": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
-      "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
      "dev": true,
      "engines": {
        "node": ">=14.0.0"
@@ -6283,6 +6364,15 @@
        "@babel/types": "^7.0.0"
      }
    },
+    "node_modules/@types/babel__helper-plugin-utils": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__helper-plugin-utils/-/babel__helper-plugin-utils-7.10.1.tgz",
+      "integrity": "sha512-6RaT7i6r2rT6ouIDZ2Cd6dPkq4wn1F8pLyDO+7wPVsL1dodvORiZORImaD6j9FBcHjPGuERE0hhtwkuPNXsO0A==",
+      "dev": true,
+      "dependencies": {
+        "@types/babel__core": "*"
+      }
+    },
    "node_modules/@types/babel__template": {
      "version": "7.4.1",
      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
@@ -6396,15 +6486,6 @@
        "@types/send": "*"
      }
    },
-    "node_modules/@types/fs-extra": {
-      "version": "9.0.13",
-      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
-      "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/glob": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -6525,6 +6606,12 @@
      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
      "dev": true
    },
+    "node_modules/@types/json-stable-stringify": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/@types/json-stable-stringify/-/json-stable-stringify-1.0.34.tgz",
+      "integrity": "sha512-s2cfwagOQAS8o06TcwKfr9Wx11dNGbH2E9vJz1cqV+a/LOyhWNLUNd6JSRYNzvB4d29UuJX2M0Dj9vE1T8fRXw==",
+      "dev": true
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -6625,16 +6712,6 @@
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
    },
-    "node_modules/@types/schema-utils": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/schema-utils/-/schema-utils-2.4.0.tgz",
-      "integrity": "sha512-454hrj5gz/FXcUE20ygfEiN4DxZ1sprUo0V1gqIqkNZ/CzoEzAZEll2uxMsuyz6BYjiQan4Aa65xbTemfzW9hQ==",
-      "deprecated": "This is a stub types definition. schema-utils provides its own type definitions, so you do not need this installed.",
-      "dev": true,
-      "dependencies": {
-        "schema-utils": "*"
-      }
-    },
    "node_modules/@types/send": {
      "version": "0.17.1",
      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
@@ -7533,9 +7610,9 @@
      }
    },
    "node_modules/axios-mock-adapter": {
-      "version": "1.21.5",
-      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.21.5.tgz",
-      "integrity": "sha512-5NI1V/VK+8+JeTF8niqOowuysA4b8mGzdlMN/QnTnoXbYh4HZSNiopsDclN2g/m85+G++IrEtUdZaQ3GnaMsSA==",
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.22.0.tgz",
+      "integrity": "sha512-dmI0KbkyAhntUR05YY96qg2H6gg0XMl2+qTW0xmYg6Up+BFBAJYRLROMXRdDEL06/Wqwa0TJThAYvFtSFdRCZw==",
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "is-buffer": "^2.0.5"
@@ -7751,6 +7828,167 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/babel-plugin-formatjs": {
+      "version": "10.5.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-formatjs/-/babel-plugin-formatjs-10.5.7.tgz",
+      "integrity": "sha512-mJeRdLfmVVqtKWWuEyLZgd2HYEiTv9aCNZT9XAmEg5qmMTR2GA7DrX1H9G4I1FfagsX+7dI7JUvhfbqj0CSvZA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-jsx": "7",
+        "@babel/traverse": "7",
+        "@babel/types": "^7.12.11",
+        "@formatjs/icu-messageformat-parser": "2.7.0",
+        "@formatjs/ts-transformer": "3.13.6",
+        "@types/babel__core": "^7.1.7",
+        "@types/babel__helper-plugin-utils": "^7.10.0",
+        "@types/babel__traverse": "^7.1.7",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.0.tgz",
+      "integrity": "sha512-7uqC4C2RqOaBQtcjqXsSpGRYVn+ckjhNga5T/otFh6MgxRrCJQqvjfbrGLpX1Lcbxdm5WH3Z2WZqt1+Tm/cn/Q==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/icu-skeleton-parser": "1.6.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/ts-transformer": {
+      "version": "3.13.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-3.13.6.tgz",
+      "integrity": "sha512-qKXnwcPUBPj+0vB+Bu09CR5qgu2BkvFSdPq8Ff+6gh+kx5B0Q0x7mlYS2NQUd9zDthEpMXqAsQeyRLJ8LrC5VA==",
+      "dev": true,
+      "dependencies": {
+        "@formatjs/icu-messageformat-parser": "2.7.0",
+        "@types/json-stable-stringify": "^1.0.32",
+        "@types/node": "14 || 16 || 17",
+        "chalk": "^4.0.0",
+        "json-stable-stringify": "^1.0.1",
+        "tslib": "^2.4.0",
+        "typescript": "5"
+      },
+      "peerDependencies": {
+        "ts-jest": ">=27"
+      },
+      "peerDependenciesMeta": {
+        "ts-jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+      "dev": true
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/babel-plugin-formatjs/node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
    "node_modules/babel-plugin-istanbul": {
      "version": "6.1.1",
      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -7821,82 +8059,6 @@
        "@babel/core": "^7.0.0-0"
      }
    },
-    "node_modules/babel-plugin-react-intl": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-7.9.4.tgz",
-      "integrity": "sha512-cMKrHEXrw43yT4M89Wbgq8A8N8lffSquj1Piwov/HVukR7jwOw8gf9btXNsQhT27ccyqEwy+M286JQYy0jby2g==",
-      "deprecated": "this package has been renamed to babel-plugin-formatjs",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/types": "^7.9.5",
-        "@formatjs/ts-transformer": "^2.6.0",
-        "@types/babel__core": "^7.1.7",
-        "@types/fs-extra": "^9.0.1",
-        "@types/schema-utils": "^2.4.0",
-        "fs-extra": "^9.0.0",
-        "intl-messageformat-parser": "^5.3.7",
-        "schema-utils": "^2.6.6"
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.5.0.tgz",
-      "integrity": "sha512-wXv36yo+mfWllweN0Fq7sUs7PUiNopn7I0JpLTe3hGu6ZMR4CV7LqK1llhB18pndwpKoafQKb1et2DCJAOW20Q==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.1"
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/@formatjs/ts-transformer": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-2.13.0.tgz",
-      "integrity": "sha512-mu7sHXZk1NWZrQ3eUqugpSYo8x5/tXkrI4uIbFqCEC0eNgQaIcoKgVeDFgDAcgG+cEme2atAUYSFF+DFWC4org==",
-      "dev": true,
-      "dependencies": {
-        "intl-messageformat-parser": "6.1.2",
-        "tslib": "^2.0.1",
-        "typescript": "^4.0"
-      },
-      "peerDependencies": {
-        "ts-jest": "^26.4.0"
-      },
-      "peerDependenciesMeta": {
-        "ts-jest": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/@formatjs/ts-transformer/node_modules/intl-messageformat-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-6.1.2.tgz",
-      "integrity": "sha512-4GQDEPhl/ZMNDKwMsLqyw1LG2IAWjmLJXdmnRcHKeLQzpgtNYZI6lVw1279pqIkRk2MfKb9aDsVFzm565azK5A==",
-      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.5.0",
-        "tslib": "^2.0.1"
-      }
-    },
-    "node_modules/babel-plugin-react-intl/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
    "node_modules/babel-plugin-transform-imports": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz",
@@ -13239,24 +13401,31 @@
      }
    },
    "node_modules/intl-messageformat": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
-      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "version": "10.5.3",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.3.tgz",
+      "integrity": "sha512-TzKn1uhJBMyuKTO4zUX47SU+d66fu1W9tVzIiZrQ6hBqQQeYscBMIzKL/qEXnFbJrH9uU5VV3+T5fWib4SIcKA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.6.2",
+        "tslib": "^2.4.0"
      }
    },
-    "node_modules/intl-messageformat-parser": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-5.5.1.tgz",
-      "integrity": "sha512-TvB3LqF2VtP6yI6HXlRT5TxX98HKha6hCcrg9dwlPwNaedVNuQA9KgBdtWKgiyakyCTYHQ+KJeFEstNKfZr64w==",
-      "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser",
-      "dev": true,
+    "node_modules/intl-messageformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
      "dependencies": {
-        "@formatjs/intl-numberformat": "^5.5.2"
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/intl-messageformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/invariant": {
@@ -17836,6 +18005,18 @@
      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
      "dev": true
    },
+    "node_modules/json-stable-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.2.tgz",
+      "integrity": "sha512-eunSSaEnxV12z+Z73y/j5N37/In40GK4GmsSy+tEHJMxknvqnA7/djeYtAgW0GsWHUfg+847WJjKaEylk2y09g==",
+      "dev": true,
+      "dependencies": {
+        "jsonify": "^0.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -17866,6 +18047,15 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -18257,9 +18447,9 @@
      }
    },
    "node_modules/make-dir/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
      "dev": true,
      "bin": {
        "semver": "bin/semver"
@@ -18861,9 +19051,9 @@
      }
    },
    "node_modules/object-code": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.2.4.tgz",
-      "integrity": "sha512-uGq4ETUuWe+GA586NXEriiaozNuff+YNFXlpD8cVrM1GoiuTZpCABP+bZCWDrvQDoCiSTyiWAFHD/HF/iwhb2w==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.3.0.tgz",
+      "integrity": "sha512-PLplgvzuFhSPBuTX/mtaXEnU3c6g7qKflVVQbV9VWEnV/34iKeAX1jeDNCKq1OgGlsnkA/NjldCzTbHxa7Wj4A==",
      "dev": true
    },
    "node_modules/object-copy": {
@@ -19723,9 +19913,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
      "funding": [
        {
@@ -19801,9 +19991,9 @@
      }
    },
    "node_modules/postcss-custom-media": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.1.tgz",
-      "integrity": "sha512-fil7cosvzlIAYmZJPtNFcTH0Er7a3GveEK4q5Y/L24eWQHmiw8Fv/E5DMkVpdbNjkGzJxrvowOSt/Il9HZ06VQ==",
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.2.tgz",
+      "integrity": "sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==",
      "dev": true,
      "funding": [
        {
@@ -19816,10 +20006,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.4",
-        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.4"
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
      },
      "engines": {
        "node": "^14 || ^16 || >=18"
@@ -20269,15 +20459,15 @@
      }
    },
    "node_modules/postcss-rtlcss": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-4.0.8.tgz",
-      "integrity": "sha512-CR2sY889PHnX6K8rjW9FG4Qvm9UJsIekDakMtEYGH3zgFp9XADMeaKcA0hPOmkClNh0jWbkaPBm0jZ6fHmqkJQ==",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-4.0.9.tgz",
+      "integrity": "sha512-dCNKEf+FgTv+EA3XI8ysg2RnpS5s3/iZmU+9qpCNFxHU/BhK+4hz7jyCsCAfo0CLnDrMPtaQENhwb+EGm1wh7Q==",
      "dev": true,
      "dependencies": {
-        "rtlcss": "4.1.0"
+        "rtlcss": "4.1.1"
      },
      "engines": {
-        "node": ">=12.0.0"
+        "node": ">=18.0.0"
      },
      "peerDependencies": {
        "postcss": "^8.4.21"
@@ -21071,24 +21261,24 @@
      }
    },
    "node_modules/react-intl": {
-      "version": "5.25.1",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
-      "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.4.7.tgz",
+      "integrity": "sha512-0hnOHAZhxTFqD1hGTxrF40qNyZJPPYiGhWIIxIz0Udz+3e3c7sdN80qlxArR+AbJ+jb5ALXZkJYH20+GPFCM0Q==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl": "2.2.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/icu-messageformat-parser": "2.6.2",
+        "@formatjs/intl": "2.9.3",
+        "@formatjs/intl-displaynames": "6.5.2",
+        "@formatjs/intl-listformat": "7.4.2",
        "@types/hoist-non-react-statics": "^3.3.1",
        "@types/react": "16 || 17 || 18",
        "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.5.3",
+        "tslib": "^2.4.0"
      },
      "peerDependencies": {
-        "react": "^16.3.0 || 17 || 18",
-        "typescript": "^4.5"
+        "react": "^16.6.0 || 17 || 18",
+        "typescript": "^4.7 || 5"
      },
      "peerDependenciesMeta": {
        "typescript": {
@@ -21096,6 +21286,23 @@
        }
      }
    },
+    "node_modules/react-intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/react-intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -21250,12 +21457,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
-      "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
+      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.9.0"
+        "@remix-run/router": "1.13.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -21265,13 +21472,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.16.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz",
-      "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
+      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.9.0",
-        "react-router": "6.16.0"
+        "@remix-run/router": "1.13.0",
+        "react-router": "6.20.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -21980,9 +22187,9 @@
      }
    },
    "node_modules/rtlcss": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.0.tgz",
-      "integrity": "sha512-W+N4hh0nVqVrrn3mRkHakxpB+c9cQ4CRT67O39kgA+1DjyhrdsqyCqIuHXyvWaXn4/835n+oX3fYJCi4+G/06A==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.1.tgz",
+      "integrity": "sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==",
      "dev": true,
      "dependencies": {
        "escalade": "^3.1.1",
@@ -22379,9 +22586,9 @@
      }
    },
    "node_modules/sass": {
-      "version": "1.65.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz",
-      "integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -22490,9 +22697,9 @@
      }
    },
    "node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
      "dev": true,
      "bin": {
        "semver": "bin/semver.js"
@@ -24349,6 +24556,7 @@
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
      "devOptional": true,
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -24835,9 +25043,9 @@
      }
    },
    "node_modules/webpack": {
-      "version": "5.88.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
-      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
+      "version": "5.89.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz",
+      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
      "dev": true,
      "dependencies": {
        "@types/eslint-scope": "^3.7.3",
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
  },
  "scripts": {
    "build": "make build",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
@@ -33,10 +33,10 @@
  },
  "homepage": "https://github.com/openedx/frontend-component-header#readme",
  "devDependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.17",
-    "@edx/frontend-platform": "5.4.0",
+    "@edx/frontend-build": "13.0.8",
+    "@edx/frontend-platform": "6.1.0",
    "@edx/reactifex": "^2.1.1",
    "@testing-library/dom": "9.3.3",
    "@testing-library/jest-dom": "5.17.0",
@@ -50,25 +50,25 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.9",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.20.0",
    "react-test-renderer": "17.0.2",
    "redux": "4.2.1",
    "redux-saga": "1.2.3"
  },
  "dependencies": {
-    "@edx/paragon": "21.1.10",
+    "@edx/paragon": "21.5.6",
    "@fortawesome/fontawesome-svg-core": "6.4.2",
    "@fortawesome/free-brands-svg-icons": "6.4.2",
    "@fortawesome/free-regular-svg-icons": "6.4.2",
    "@fortawesome/free-solid-svg-icons": "6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
-    "axios-mock-adapter": "1.21.5",
+    "axios-mock-adapter": "1.22.0",
    "babel-polyfill": "6.26.0",
    "react-responsive": "8.2.0",
    "react-transition-group": "4.4.5"
  },
  "peerDependencies": {
-    "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
+    "@edx/frontend-platform": "^4.0.0 || ^5.0.0 || ^6.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.9.0 || ^17.0.0",
    "react-dom": "^16.9.0 || ^17.0.0"
--- a/src/Menu/Menu.jsx
+++ b/src/Menu/Menu.jsx
@@ -14,7 +14,8 @@ MenuTrigger.defaultProps = {
  tag: 'div',
  className: null,
 };
-const MenuTriggerType = <MenuTrigger />.type;
+const MenuTriggerComp = <MenuTrigger />;
+const MenuTriggerType = MenuTriggerComp.type;

 const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
  className: ['menu-content', className].join(' '),
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "التسجيل",
-  "general.signIn.sentenceCase": "تسجيل الدخول",
  "header.links.courses": "المساقات",
  "header.links.programs": "البرامج",
  "header.links.content.search": "اكتشف الجديد",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "القائمة الثانوية",
  "header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
  "header.label.app.nav": "تطبيق",
+  "general.register.sentenceCase": "التسجيل",
+  "general.signIn.sentenceCase": "تسجيل الدخول",
  "header.menu.dashboard.label": "لوحة المعلومات",
  "header.help.label": "المساعدة",
  "header.menu.profile.label": "الملف الشخصي",
  "header.menu.account.label": "الحساب",
  "header.menu.orderHistory.label": "سجل الطلبيات",
  "header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
-  "header.menu.signOut.label": "تسجيل الخروج"
+  "header.menu.signOut.label": "تسجيل الخروج",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
  "header.links.courses": "Courses",
  "header.links.programs": "Programs",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Skip to main content",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Registrarse",
-  "general.signIn.sentenceCase": "Iniciar sesión",
  "header.links.courses": "Cursos",
  "header.links.programs": "Programas",
  "header.links.content.search": "Encontrar nuevo",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Ir al contenido principal",
  "header.label.app.nav": "Aplicación",
+  "general.register.sentenceCase": "Registrarse",
+  "general.signIn.sentenceCase": "Iniciar sesión",
  "header.menu.dashboard.label": "Panel de Control",
  "header.help.label": "Ayuda",
  "header.menu.profile.label": "Perfil",
  "header.menu.account.label": "Cuenta",
  "header.menu.orderHistory.label": "Historial de órdenes",
  "header.navigation.skipNavLink": "Dirígete al contenido principal.",
-  "header.menu.signOut.label": "Cerrar sesión"
+  "header.menu.signOut.label": "Cerrar sesión",
+  "header.user.menu.studio": "Inicio Studio",
+  "header.user.menu.maintenance": "Mantenimiento",
+  "header.label.courseOutline": "Volver al esquema del curso en Studio"
 }
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "S'inscrire",
-  "general.signIn.sentenceCase": "Connectez-vous",
  "header.links.courses": "Cours",
  "header.links.programs": "Programmes",
  "header.links.content.search": "Explorer les cours",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondaire",
  "header.label.skip.nav": "Passer au contenu principal",
  "header.label.app.nav": "Application",
+  "general.register.sentenceCase": "S'inscrire",
+  "general.signIn.sentenceCase": "Connectez-vous",
  "header.menu.dashboard.label": "Tableau de bord",
  "header.help.label": "Aide",
  "header.menu.profile.label": "Profil",
  "header.menu.account.label": "Compte",
  "header.menu.orderHistory.label": "Historique des commandes",
  "header.navigation.skipNavLink": "Passer au contenu principal",
-  "header.menu.signOut.label": "Se déconnecter"
+  "header.menu.signOut.label": "Se déconnecter",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/fr_CA.json
+++ b/src/i18n/messages/fr_CA.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Inscription",
-  "general.signIn.sentenceCase": "Connexion",
  "header.links.courses": "Cours",
  "header.links.programs": "Programmes",
  "header.links.content.search": "Découvrir les nouveautés",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondaire",
  "header.label.skip.nav": "Passer au contenu de cette vue",
  "header.label.app.nav": "Application",
+  "general.register.sentenceCase": "Inscription",
+  "general.signIn.sentenceCase": "Connexion",
  "header.menu.dashboard.label": "Tableau de bord",
  "header.help.label": "Aide",
  "header.menu.profile.label": "Profil",
  "header.menu.account.label": "Compte",
  "header.menu.orderHistory.label": "Historique des commandes",
  "header.navigation.skipNavLink": "Passer au contenu principal.",
-  "header.menu.signOut.label": "Se déconnecter"
+  "header.menu.signOut.label": "Se déconnecter",
+  "header.user.menu.studio": "Accueil Studio",
+  "header.user.menu.maintenance": "Entretien",
+  "header.label.courseOutline": "Retour au plan de cours dans Studio"
 }
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
  "header.links.courses": "Courses",
  "header.links.programs": "Programs",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Skip to main content",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
  "header.links.courses": "Courses",
  "header.links.programs": "Programs",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Skip to main content",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
  "header.links.courses": "Courses",
  "header.links.programs": "Programs",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Skip to main content",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
  "header.links.courses": "Courses",
  "header.links.programs": "Programs",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Skip to main content",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Увійти",
  "header.links.courses": "Курси",
  "header.links.programs": "Програми",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Перейти до головного змісту",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Увійти",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Перейти до головного змісту.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -1,6 +1,4 @@
 {
-  "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
  "header.links.courses": "Courses",
  "header.links.programs": "Programs",
  "header.links.content.search": "Discover New",
@@ -23,11 +21,16 @@
  "header.label.secondary.nav": "Secondary",
  "header.label.skip.nav": "Skip to main content",
  "header.label.app.nav": "App",
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
  "header.menu.dashboard.label": "Dashboard",
  "header.help.label": "Help",
  "header.menu.profile.label": "Profile",
  "header.menu.account.label": "Account",
  "header.menu.orderHistory.label": "Order History",
  "header.navigation.skipNavLink": "Skip to main content.",
-  "header.menu.signOut.label": "Sign Out"
+  "header.menu.signOut.label": "Sign Out",
+  "header.user.menu.studio": "Studio Home",
+  "header.user.menu.maintenance": "Maintenance",
+  "header.label.courseOutline": "Back to course outline in Studio"
 }
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,7 +3,7 @@ $blue: #007db8;
 $white: #fff;

@import './Menu/menu.scss';
-@import './studio-header/header.scss';
+@import './studio-header/StudioHeader.scss';

 .dropdown-item a {
  text-decoration: none;
@@ -43,9 +43,9 @@ $white: #fff;
  .user-dropdown {
    .btn {
      height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
+      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      //   padding: 0 0.5rem;
+      // }
    }
  }
 }
--- a/src/studio-header/CourseLockUp.jsx
+++ b/src/studio-header/CourseLockUp.jsx
@@ -24,7 +24,7 @@ const CourseLockUp = ({
    )}
  >
    <a
-      className="course-title-lockup w-25 mr-2"
+      className="course-title-lockup mr-2"
      href={outlineLink}
      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
      data-testid="course-lock-up-block"
--- a/src/studio-header/HeaderBody.jsx
+++ b/src/studio-header/HeaderBody.jsx
@@ -44,7 +44,7 @@ const HeaderBody = ({
  );

  return (
-    <Container size="xl" className="px-4">
+    <Container size="xl" className="px-2.5">
      <ActionRow as="header">
        {isHiddenMainMenu ? (
          <Row className="flex-nowrap ml-4">
@@ -64,17 +64,19 @@ const HeaderBody = ({
                Menu
              </Button>
            ) : (
-              <Row className="flex-nowrap m-0">
-                {renderBrandNav}
-                <CourseLockUp
-                  {...{
-                    outlineLink,
-                    number,
-                    org,
-                    title,
-                  }}
-                />
-              </Row>
+              <div className="w-25">
+                <Row className="m-0 flex-nowrap">
+                  {renderBrandNav}
+                  <CourseLockUp
+                    {...{
+                      outlineLink,
+                      number,
+                      org,
+                      title,
+                    }}
+                  />
+                </Row>
+              </div>
            )}
            {isMobile ? (
              <>
@@ -82,11 +84,11 @@ const HeaderBody = ({
                {renderBrandNav}
              </>
            ) : (
-              <Nav data-testid="desktop-menu" className="ml-4">
+              <Nav data-testid="desktop-menu" className="ml-2">
                {mainMenuDropdowns.map(dropdown => {
                  const { id, buttonTitle, items } = dropdown;
                  return (
-                    <NavDropdownMenu {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
                  );
                })}
              </Nav>
@@ -113,9 +115,9 @@ const HeaderBody = ({
 HeaderBody.propTypes = {
  studioBaseUrl: PropTypes.string.isRequired,
  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
+  setModalPopupTarget: PropTypes.func,
+  toggleModalPopup: PropTypes.func,
+  isModalPopupOpen: PropTypes.bool,
  number: PropTypes.string,
  org: PropTypes.string,
  title: PropTypes.string,
@@ -138,6 +140,9 @@ HeaderBody.propTypes = {
 };

 HeaderBody.defaultProps = {
+  setModalPopupTarget: null,
+  toggleModalPopup: null,
+  isModalPopupOpen: false,
  logo: null,
  logoAltText: null,
  number: '',
--- a/src/studio-header/MobileHeader.jsx
+++ b/src/studio-header/MobileHeader.jsx
@@ -38,9 +38,6 @@ const MobileHeader = ({
 MobileHeader.propTypes = {
  studioBaseUrl: PropTypes.string.isRequired,
  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
  number: PropTypes.string,
  org: PropTypes.string,
  title: PropTypes.string,
--- a/src/studio-header/NavDropdownMenu.jsx
+++ b/src/studio-header/NavDropdownMenu.jsx
@@ -13,10 +13,12 @@ const NavDropdownMenu = ({
  <DropdownButton
    id={id}
    title={buttonTitle}
-    variant="tertiary"
+    variant="outline-primary"
+    className="mr-2"
  >
    {items.map(item => (
      <Dropdown.Item
+        key={`${item.title}-dropdown-item`}
        href={item.href}
        className="small"
      >
--- a/src/studio-header/StudioHeader.jsx
+++ b/src/studio-header/StudioHeader.jsx
@@ -36,14 +36,15 @@ const StudioHeader = ({
  };

  return (
-    <>
-      <Responsive maxWidth={768}>
+    <div className="studio-header">
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
+      <Responsive maxWidth={841}>
        <MobileHeader {...props} />
      </Responsive>
-      <Responsive minWidth={769}>
+      <Responsive minWidth={842}>
        <HeaderBody {...props} />
      </Responsive>
-    </>
+    </div>
  );
 };

--- a/src/studio-header/StudioHeader.scss
+++ b/src/studio-header/StudioHeader.scss
@@ -0,0 +1,49 @@
+$spacer: 1rem;
+$white: #FFFFFF;
+
+.studio-header {
+  position: relative;
+  z-index: 1000;
+
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: $white;
+
+  .btn-outline-primary {
+    border-color: $white;
+  }
+
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: $spacer 0;
+    margin-right: $spacer;
+
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+
+  .course-title-lockup {
+    @media only screen and (min-width: 769px) {
+      padding: .5rem;
+      padding-right: $spacer;
+      border-right: 1px solid #E5E5E5;
+      width: 70%;
+    }
+  
+    overflow: hidden;
+  
+    span {
+      color: #333333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.375rem;
+    }
+  }
+}
--- a/src/studio-header/header.scss
+++ b/src/studio-header/header.scss
@@ -1,64 +0,0 @@
-// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
-$spacer: 1rem;
-$white: #FFFFFF;
-
-.btn-tertiary:hover {
-  color: white;
-  background-color: #00262B;
-}
-
-.course-title-lockup {
-  @media only screen and (max-width: 768px) {
-    padding-left: .5rem;
-    max-width: 70%;
-  }
-
-  @media only screen and (min-width: 769px) {
-    padding: .5rem;
-    padding-right: $spacer;
-    border-right: 1px solid #E5E5E5;
-    min-width: 70%;
-  }
-
-  overflow: hidden;
-
-  span {
-    color: #333333;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.375rem;
-  }
-}
-
-.site-header-mobile,
-.site-header-desktop {
-  position: relative;
-  z-index: 1000;
-}
-
-.site-header-mobile {img {
-    height: 1.5rem;
-  }
-}
-
-.site-header-desktop {
-  height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
-
-  .logo {
-    display: block;
-    box-sizing: content-box;
-    position: relative;
-    top: -.05em;
-    height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-}
--- a/src/studio-header/messages.js
+++ b/src/studio-header/messages.js
@@ -1,106 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
-  'header.links.content': {
-    id: 'header.links.content',
-    defaultMessage: 'Content',
-    description: 'Label for Content menu trigger',
-  },
-  'header.links.settings': {
-    id: 'header.links.settings',
-    defaultMessage: 'Settings',
-    description: 'Label for Settings menu trigger',
-  },
-  'header.links.tools': {
-    id: 'header.links.content.tools',
-    defaultMessage: 'Tools',
-    description: 'Label for Tools menu trigger',
-  },
-  'header.links.outline': {
-    id: 'header.links.outline',
-    defaultMessage: 'Outline',
-    description: 'Link to Studio Outline page',
-  },
-  'header.links.updates': {
-    id: 'header.links.updates',
-    defaultMessage: 'Updates',
-    description: 'Link to Studio Updates page',
-  },
-  'header.links.pages': {
-    id: 'header.links.pages',
-    defaultMessage: 'Pages & Resources',
-    description: 'Link to Studio Pages page',
-  },
-  'header.links.filesAndUploads': {
-    id: 'header.links.filesAndUploads',
-    defaultMessage: 'Files & Uploads',
-    description: 'Link to Studio Files & Uploads page',
-  },
-  'header.links.textbooks': {
-    id: 'header.links.textbooks',
-    defaultMessage: 'Textbooks',
-    description: 'Link to Studio Textbooks page',
-  },
-  'header.links.videoUploads': {
-    id: 'header.links.videoUploads',
-    defaultMessage: 'Video Uploads',
-    description: 'Link to Studio Video Uploads page',
-  },
-  'header.links.scheduleAndDetails': {
-    id: 'header.links.scheduleAndDetails',
-    defaultMessage: 'Schedule & Details',
-    description: 'Link to Studio Schedule & Details page',
-  },
-  'header.links.grading': {
-    id: 'header.links.grading',
-    defaultMessage: 'Grading',
-    description: 'Link to Studio Grading page',
-  },
-  'header.links.courseTeam': {
-    id: 'header.links.courseTeam',
-    defaultMessage: 'Course Team',
-    description: 'Link to Studio Course Team page',
-  },
-  'header.links.groupConfigurations': {
-    id: 'header.links.groupConfigurations',
-    defaultMessage: 'Group Configurations',
-    description: 'Link to Studio Group Configurations page',
-  },
-  'header.links.proctoredExamSettings': {
-    id: 'header.links.proctoredExamSettings',
-    defaultMessage: 'Proctored Exam Settings',
-    description: 'Link to Studio Proctored Exam Settings page',
-  },
-  'header.links.advancedSettings': {
-    id: 'header.links.advancedSettings',
-    defaultMessage: 'Advanced Settings',
-    description: 'Link to Studio Advanced Settings page',
-  },
-  'header.links.certificates': {
-    id: 'header.links.certificates',
-    defaultMessage: 'Certificates',
-    description: 'Link to Studio Certificates page',
-  },
-  'header.links.publisher': {
-    id: 'header.links.publisher',
-    defaultMessage: 'Publisher',
-    description: 'Link to Publisher',
-  },
-  'header.links.import': {
-    id: 'header.links.import',
-    defaultMessage: 'Import',
-    description: 'Link to Studio Import page',
-  },
-  'header.links.export': {
-    id: 'header.links.export',
-    defaultMessage: 'Export',
-    description: 'Link to Studio Export page',
-  },
-  'header.links.checklists': {
-    id: 'header.links.checklists',
-    defaultMessage: 'Checklists',
-    description: 'Link to Studio Checklists page',
-  },
  'header.user.menu.studio': {
    id: 'header.user.menu.studio',
    defaultMessage: 'Studio Home',
--- a/src/studio-header/utils.js
+++ b/src/studio-header/utils.js
@@ -8,7 +8,7 @@ const getUserMenuItems = ({
 }) => {
  let items = [
    {
-      href: `${studioBaseUrl}}`,
+      href: `${studioBaseUrl}`,
      title: intl.formatMessage(messages['header.user.menu.studio']),
    }, {
      href: `${logoutUrl}`,
@@ -18,7 +18,7 @@ const getUserMenuItems = ({
  if (isAdmin) {
    items = [
      {
-        href: `${studioBaseUrl}}`,
+        href: `${studioBaseUrl}`,
        title: intl.formatMessage(messages['header.user.menu.studio']),
      }, {
        href: `${studioBaseUrl}/maintenance`,